学习目标掌握点击显示多边形信息的实现方法理解相关API的使用能够独立完成类似功能开发MapLibre GL JS 从入门到精通 - 130实战案例 核心概念当用户点击多边形时显示包含更多信息的弹窗。 完 整 代 码代码示例constmapnewmaplibregl.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){newmaplibregl.Popup().setLngLat(e.lngLat).setHTML(e.features[0].properties.name).addTo(map);});// 当鼠标悬停在states图层上时将光标更改为指针。map.on(mouseenter,states-layer,(){map.getCanvas().style.cursorpointer;});// 当鼠标离开时将其改回默认光标。map.on(mouseleave,states-layer,(){map.getCanvas().style.cursor;});});代码示例!DOCTYPEhtmlhtmllangenheadtitleShow polygon information on click/titlemetapropertyog:descriptioncontent当用户点击多边形时显示包含更多信息的弹出框。/metapropertyog:createdcontent2006-06-25/metacharsetutf-8metanameviewportcontentwidthdevice-width, initial-scale1linkrelstylesheethrefhttps://unpkg.com/maplibre-gl5.24.0/dist/maplibre-gl.css/scriptsrchttps://unpkg.com/maplibre-gl5.24.0/dist/maplibre-gl.js/scriptstylebody{margin:0;padding:0;}html, body, #map{height:100%;}/style/headbodystyle.maplibregl-popup{max-width:400px;font:12px/20pxHelvetica Neue,Arial,Helvetica,sans-serif;}/styledividmap/divscriptconstmapnewmaplibregl.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){newmaplibregl.Popup().setLngLat(e.lngLat).setHTML(e.features[0].properties.name).addTo(map);});// 当鼠标悬停在states图层上时将光标更改为指针。map.on(mouseenter,states-layer,(){map.getCanvas().style.cursorpointer;});// 当鼠标离开时将其改回默认光标。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-colorstring否填充颜色fill-outline-colorstring否边框颜色e.features[0].propertiesobject-获取要素属性 效果说明运行代码后地图显示美国各州区域。点击任意州会在该位置弹出信息窗口显示州名称。鼠标悬停时光标变为指针提示可点击。 常 见 问 题Q1: 点击多边形没有反应A:检查以下几点确认图层已正确添加确认事件监听器绑定在正确的图层ID上检查GeoJSON数据是否包含propertiesQ2: 如何获取更多属性信息A:通过e.features[0].properties访问完整属性constpropse.features[0].properties;console.log(props.name,props.population);Q3: 多边形填充色可以动态设置吗A:可以使用表达式根据属性值设置不同颜色 练习任务基础练习修改多边形的填充色和边框样式进阶挑战显示州的全名而非简称拓展思考如何实现多选功能综合实践创建一个州信息查询系统 最佳实践交互提示: 鼠标悬停时改变光标样式信息展示: 弹窗内容简洁明了样式设计: 填充色使用半透明效果数据管理: 合理组织GeoJSON数据结构性能考虑: 避免大数据量的多边形同时渲染 延伸阅读Map API文档MapLibre GL JS 官方文档[下一课预告]将继续学习地图图层的基础知识本文是MapLibre GL JS实践课程系列的一部分欢迎关注收藏