MapLibre GL JS第37课：动态修改图层颜色

原创已于 2026-06-04 13:43:08 修改 · 341 阅读

4 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#javascript #MapLibre GL JS #mapbox #GIS #地图

于 2026-06-03 11:29:40 首次发布

MapLibre GL JS教程专栏收录该内容

68 篇文章

订阅专栏

📌 学习目标

掌握用按钮改变图层颜色的实现方法
理解相关API的使用
能够独立完成类似功能开发

⭕️MapLibre GL JS全部课时完整目录⭕️

🎯 核心概念

动态修改图层颜色。

💻 完整代码

代码示例

const map = new maplibregl.Map({
    container: 'map',
    style: 'https://tiles.openfreemap.org/styles/bright',
    center: [12.338, 45.4385],
    zoom: 17.4
});

const swatches = document.getElementById('swatches');
const layer = document.getElementById('layer');
const colors = [
    '#ffffcc',
    '#a1dab4',
    '#41b6c4',
    '#2c7fb8',
    '#253494',
    '#fed976',
    '#feb24c',
    '#fd8d3c',
    '#f03b20',
    '#bd0026'
];

colors.forEach((color) => {
    const swatch = document.createElement('button');
    swatch.style.backgroundColor = color;
    swatch.addEventListener('click', () => {
        map.setPaintProperty(
            layer.value,
            'fill-color',
            color
        );
    });
    swatches.appendChild(swatch);
});

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Change a layer's color with buttons</title>
    <meta property="og:description" content="使用 setPaintProperty 更改图层的填充颜色。" />
    <meta property="og:created" content="2025-06-25" />
    <meta charset='utf-8'>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel='stylesheet' href='https://unpkg.com/maplibre-gl@5.24.0/dist/maplibre-gl.css' />
    <script src='https://unpkg.com/maplibre-gl@5.24.0/dist/maplibre-gl.js'></script>
    <style>
        body { margin: 0; padding: 0; }
        html, body, #map { height: 100%; }
    </style>
</head>
<body>
<style>
    .map-overlay {
        font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
        position: absolute;
        width: 200px;
        top: 0;
        left: 0;
        padding: 10px;
    }

    .map-overlay .map-overlay-inner {
        background-color: #fff;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
        border-radius: 3px;
        padding: 10px;
        margin-bottom: 10px;
    }

    .map-overlay-inner fieldset {
        border: none;
        padding: 0;
        margin: 0 0 10px;
    }

    .map-overlay-inner fieldset:last-child {
        margin: 0;
    }

    .map-overlay-inner select {
        width: 100%;
    }

    .map-overlay-inner label {
        display: block;
        font-weight: bold;
        margin: 0 0 5px;
    }

    .map-overlay-inner button {
        display: inline-block;
        width: 36px;
        height: 20px;
        border: none;
        cursor: pointer;
    }

    .map-overlay-inner button:focus {
        outline: none;
    }

    .map-overlay-inner button:hover {
        box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.1);
    }
</style>

<div id="map"></div>
<div class="map-overlay top">
    <div class="map-overlay-inner">
        <fieldset>
            <label for="layer">Select layer</label>
            <select id="layer" name="layer">
                <option value="water">Water</option>
                <option value="building-top">Buildings</option>
            </select>
        </fieldset>
        <fieldset>
            <label>Choose a color</label>
            <div id="swatches"></div>
        </fieldset>
    </div>
</div>

<script>
    const map = new maplibregl.Map({
        container: 'map',
        style: 'https://tiles.openfreemap.org/styles/bright',
        center: [12.338, 45.4385],
        zoom: 17.4
    });

    const swatches = document.getElementById('swatches');
    const layer = document.getElementById('layer');
    const colors = [
        '#ffffcc',
        '#a1dab4',
        '#41b6c4',
        '#2c7fb8',
        '#253494',
        '#fed976',
        '#feb24c',
        '#fd8d3c',
        '#f03b20',
        '#bd0026'
    ];

    colors.forEach((color) => {
        const swatch = document.createElement('button');
        swatch.style.backgroundColor = color;
        swatch.addEventListener('click', () => {
            map.setPaintProperty(
                layer.value,
                'fill-color',
                color
            );
        });
        swatches.appendChild(swatch);
    });
</script>
</body>
</html>

🔍 代码解析

初始化地图

使用 new maplibregl.Map() 创建地图实例，配置基本参数。本示例的核心特色是展示如何通过按钮交互动态改变图层颜色。

关键配置项

container: 地图容器的 DOM 元素 ID
style: 使用 MapLibre 官方样式 https://tiles.openfreemap.org/styles/bright
center: 地图初始中心点 [12.338, 45.4385]（意大利威尼斯附近）
zoom: 初始缩放级别为 17.4，显示城市详细视图

颜色选择器实现

const swatches = document.getElementById('swatches');
const layer = document.getElementById('layer');
const colors = [
    '#ffffcc', '#a1dab4', '#41b6c4', '#2c7fb8', '#253494',
    '#fed976', '#feb24c', '#fd8d3c', '#f03b20', '#bd0026'
];

colors.forEach((color) => {
    const swatch = document.createElement('button');
    swatch.style.backgroundColor = color;
    swatch.addEventListener('click', () => {
        map.setPaintProperty(
            layer.value,
            'fill-color',
            color
        );
    });
    swatches.appendChild(swatch);
});

HTML 控制界面

页面左上角有一个控制面板，包含：

图层选择下拉框: 可选择 water（水域）或 building-top（建筑物）图层
颜色选择按钮: 10个不同颜色的按钮，点击可改变选中图层的填充颜色

⚙️ 参数说明

参数	类型	必填	默认值	说明
container	string	是	-	地图容器元素的 ID
style	string/object	是	-	地图样式 URL 或内联样式对象
center	[number, number]	否	`[0, 0]`	初始中心点坐标，格式为 `[经度, 纬度]`
zoom	number	否	`0`	初始缩放级别，范围 0-22

setPaintProperty 方法参数

参数	类型	必填	说明
layerId	string	是	目标图层的 ID
propertyName	string	是	要修改的绘制属性名称
value	any	是	属性的新值

🎨 效果说明

在这里插入图片描述

运行代码后，页面显示一个交互式地图和颜色控制面板：

控制面板: 位于页面左上角，包含图层选择器和10个颜色按钮
颜色切换: 点击颜色按钮可实时改变选中图层的填充颜色
图层选择: 通过下拉框可切换修改水域或建筑物图层的颜色
交互功能: 支持鼠标拖拽、滚轮缩放、右键旋转等标准交互

地图默认显示威尼斯区域，缩放级别为 17.4，可以清晰看到建筑物和水域分布。

💡 常见问题

Q1: setPaintProperty 和 setLayoutProperty 有什么区别？
A: setPaintProperty 用于修改图层的绘制属性（如颜色、透明度），这些属性影响图层的视觉外观；setLayoutProperty 用于修改图层的布局属性（如标签可见性、文字大小），这些属性控制图层的布局和排列方式。

Q2: 如何获取当前图层的属性值？
A: 使用 map.getPaintProperty(layerId, propertyName) 可以获取指定图层的绘制属性值。

Q3: 如果指定的图层不存在会怎样？
A: 会抛出错误。建议在修改前使用 map.getLayer(layerId) 检查图层是否存在。

Q4: 可以修改哪些绘制属性？
A: 取决于图层类型。对于 fill 图层，可以修改 fill-color、fill-opacity、fill-outline-color 等属性。