MapLibre GL JS第71课：点击显示多边形信息

原创已于 2026-06-30 17:18:04 修改 · 124 阅读

2 ·

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

GEO检测

标签

#javascript #GIS #MapLibre GL JS #Mapbox #Marker

于 2026-06-30 16:56:51 首次发布

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

73 篇文章

订阅专栏

📌 学习目标

掌握点击显示多边形信息的实现方法
理解相关API的使用
能够独立完成类似功能开发

MapLibre GL JS 从入门到精通 - 130+实战案例

🎯 核心概念

当用户点击多边形时，显示包含更多信息的弹窗。

💻 完整代码

代码示例

const map = new maplibregl.Map({
    container: 'map',
    style: 'https://demotiles.maplibre.org/style.json',
    center: [-100.04, 38.907],
    zoom: 3
});

map.on('load', () => {
    // 添加州多边形的源。
    map.addSource('states', {
        'type': 'geojson',
        'data': 'https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_110m_admin_1_states_provinces_shp.geojson'
    });

    // 添加显示州多边形的图层。
    map.addLayer({
        'id': 'states-layer',
        'type': 'fill',
        'source': 'states',
        'paint': {
            'fill-color': 'rgba(200, 100, 240, 0.4)',
            'fill-outline-color': 'rgba(200, 100, 240, 1)'
        }
    });

    // 当states图层中的要素发生点击事件时，在点击位置
    // 打开弹窗，显示其属性中的描述HTML。
    map.on('click', 'states-layer', (e) => {
        new maplibregl.Popup()
            .setLngLat(e.lngLat)
            .setHTML(e.features[0].properties.name)
            .addTo(map);
    });

    // 当鼠标悬停在states图层上时，将光标更改为指针。
    map.on('mouseenter', 'states-layer', () => {
        map.getCanvas().style.cursor = 'pointer';
    });

    // 当鼠标离开时，将其改回默认光标。
    map.on('mouseleave', 'states-layer', () => {
        map.getCanvas().style.cursor = '';
    });
});

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Show polygon information on click</title>
    <meta property="og:description" content="当用户点击多边形时，显示包含更多信息的弹出框。" />
    <meta property="og:created" content="2006-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>
    .maplibregl-popup {
        max-width: 400px;
        font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
    }
</style>
<div id="map"></div>
<script>
    const map = new maplibregl.Map({
        container: 'map',
        style: 'https://demotiles.maplibre.org/style.json',
        center: [-100.04, 38.907],
        zoom: 3
    });

    map.on('load', () => {
        // 添加州多边形的源。
        map.addSource('states', {
            'type': 'geojson',
            'data': 'https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_110m_admin_1_states_provinces_shp.geojson'
        });

        // 添加显示州多边形的图层。
        map.addLayer({
            'id': 'states-layer',
            'type': 'fill',
            'source': 'states',
            'paint': {
                'fill-color': 'rgba(200, 100, 240, 0.4)',
                'fill-outline-color': 'rgba(200, 100, 240, 1)'
            }
        });

        // 当states图层中的要素发生点击事件时，在点击位置打开弹窗，显示其属性中的描述HTML。
        map.on('click', 'states-layer', (e) => {
            new maplibregl.Popup()
                .setLngLat(e.lngLat)
                .setHTML(e.features[0].properties.name)
                .addTo(map);
        });

        // 当鼠标悬停在states图层上时，将光标更改为指针。
        map.on('mouseenter', 'states-layer', () => {
            map.getCanvas().style.cursor = 'pointer';
        });

        // 当鼠标离开时，将其改回默认光标。
        map.on('mouseleave', 'states-layer', () => {
            map.getCanvas().style.cursor = '';
        });
    });
</script>
</body>
</html>

🔍 代码解析

1. 初始化地图

使用 new maplibregl.Map() 创建地图实例，配置美国区域作为初始视图。

2. 关键配置项

map.addSource(): 添加GeoJSON多边形数据源
fill图层: 使用fill类型渲染多边形区域
fill-outline-color: 设置多边形边框颜色
点击事件: 点击多边形获取要素属性

3. 核心逻辑

点击多边形时，获取该要素的name属性
使用e.lngLat获取点击位置作为弹窗坐标
创建弹窗显示州名称

⚙️ 参数说明

参数	类型	必填	说明
fill-color	string	否	填充颜色
fill-outline-color	string	否	边框颜色
e.features[0].properties	object	-	获取要素属性

🎨 效果说明

在这里插入图片描述

运行代码后，地图显示美国各州区域。点击任意州，会在该位置弹出信息窗口显示州名称。鼠标悬停时光标变为指针提示可点击。

💡 常见问题

Q1: 点击多边形没有反应？
A: 检查以下几点：

确认图层已正确添加
确认事件监听器绑定在正确的图层ID上
检查GeoJSON数据是否包含properties

Q2: 如何获取更多属性信息？
A: 通过e.features[0].properties访问完整属性：

const props = e.features[0].properties;
console.log(props.name, props.population);

Q3: 多边形填充色可以动态设置吗？
A: 可以使用表达式根据属性值设置不同颜色

📝 练习任务

基础练习：修改多边形的填充色和边框样式
进阶挑战：显示州的全名而非简称
拓展思考：如何实现多选功能？
综合实践：创建一个州信息查询系统

🌟 最佳实践

交互提示: 鼠标悬停时改变光标样式
信息展示: 弹窗内容简洁明了
样式设计: 填充色使用半透明效果
数据管理: 合理组织GeoJSON数据结构
性能考虑: 避免大数据量的多边形同时渲染

🔗 延伸阅读

Map API文档
MapLibre GL JS 官方文档
[下一课预告]：将继续学习地图图层的基础知识

本文是MapLibre GL JS实践课程系列的一部分，欢迎关注收藏

MapLibre GL JS第71课：点击显示多边形信息

📌 学习目标

🎯 核心概念

💻 完 整 代 码

代码示例

代码示例

🔍 代码解析

1. 初始化地图

2. 关键配置项

3. 核心逻辑

⚙️ 参数说明

🎨 效果说明

💡 常 见 问 题

📝 练习任务

🌟 最佳实践

🔗 延伸阅读

💻 完整代码

💡 常见问题