MapLibre GL JS第18课：从一个GeoJSON源添加多个几何体

学习目标掌握从一个GeoJSON源添加多个几何体的实现方法理解相关API的使用能够独立完成类似功能开发 核心概念从一个GeoJSON数据源添加多个几何体到地图。 完 整 代 码代码示例constmapnewmaplibregl.Map({container:map,style:https://tiles.openfreemap.org/styles/bright,center:[-121.403732,40.492392],zoom:10});map.on(load,(){map.addSource(national-park,{type:geojson,data:{type:FeatureCollection,features:[{type:Feature,geometry:{type:Polygon,coordinates:[[[-121.353637,40.584978],[-121.284551,40.584758],[-121.275349,40.541646],[-121.246768,40.541017],[-121.251343,40.423383],[-121.32687,40.423768],[-121.360619,40.43479],[-121.363694,40.409124],[-121.439713,40.409197],[-121.439711,40.423791],[-121.572133,40.423548],[-121.577415,40.550766],[-121.539486,40.558107],[-121.520284,40.572459],[-121.487219,40.550822],[-121.446951,40.56319],[-121.370644,40.563267],[-121.353637,40.584978]]]}},{type:Feature,geometry:{type:Point,coordinates:[-121.415061,40.506229]}},{type:Feature,geometry:{type:Point,coordinates:[-121.505184,40.488084]}},{type:Feature,geometry:{type:Point,coordinates:[-121.354465,40.488737]}}]}});map.addLayer({id:park-boundary,type:fill,source:national-park,paint:{fill-color:#888888,fill-opacity:0.4},filter:[,$type,Polygon]});map.addLayer({id:park-volcanoes,type:circle,source:national-park,paint:{circle-radius:6,circle-color:#B42222},filter:[,$type,Point]});});代码示例!DOCTYPEhtmlhtmllangenheadtitleAdd multiple geometries from one GeoJSON source/titlemetapropertyog:descriptioncontent从同一个 GeoJSON 源添加多边形和圆形图层。/metapropertyog:createdcontent2025-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/headbodydividmap/divscriptconstmapnewmaplibregl.Map({container:map,style:https://tiles.openfreemap.org/styles/bright,center:[-121.403732,40.492392],zoom:10});map.on(load,(){map.addSource(national-park,{type:geojson,data:{type:FeatureCollection,features:[{type:Feature,geometry:{type:Polygon,coordinates:[[[-121.353637,40.584978],[-121.284551,40.584758],[-121.275349,40.541646],[-121.246768,40.541017],[-121.251343,40.423383],[-121.32687,40.423768],[-121.360619,40.43479],[-121.363694,40.409124],[-121.439713,40.409197],[-121.439711,40.423791],[-121.572133,40.423548],[-121.577415,40.550766],[-121.539486,40.558107],[-121.520284,40.572459],[-121.487219,40.550822],[-121.446951,40.56319],[-121.370644,40.563267],[-121.353637,40.584978]]]}},{type:Feature,geometry:{type:Point,coordinates:[-121.415061,40.506229]}},{type:Feature,geometry:{type:Point,coordinates:[-121.505184,40.488084]}},{type:Feature,geometry:{type:Point,coordinates:[-121.354465,40.488737]}}]}});map.addLayer({id:park-boundary,type:fill,source:national-park,paint:{fill-color:#888888,fill-opacity:0.4},filter:[,$type,Polygon]});map.addLayer({id:park-volcanoes,type:circle,source:national-park,paint:{circle-radius:6,circle-color:#B42222},filter:[,$type,Point]});});/script/body/html 代码解析1. 初始化地图使用new maplibregl.Map()创建地图实例配置基本参数。本示例中心点设置在美国拉森火山国家公园附近。2. 添加GeoJSON数据源通过map.addSource()添加包含多种几何类型的GeoJSON数据源包括一个Polygon国家公园边界三个Point火山位置3. 添加多个图层使用filter过滤不同几何类型创建不同样式的图层fill图层显示多边形公园边界circle图层显示点火山位置4. Filter使用使用[, $type, Polygon]和[, $type, Point]过滤要素类型。⚙️ 参数说明参数类型必填说明containerstring是地图容器IDstylestring是地图样式URLcenter[number, number]否初始中心点默认[0, 0]zoomnumber否初始缩放级别默认0图层Filter语法表达式说明[, $type, Polygon]过滤多边形要素[, $type, Point]过滤点要素[, $type, LineString]过滤线要素 效果说明运行代码后地图显示美国拉森火山国家公园区域中心点 -121.40°W, 40.49°N公园边界以灰色填充显示透明度40%三个火山位置以红色圆形标记显示#B42222半径6像素用户可正常交互拖拽、缩放、旋转 常 见 问 题Q1: 一个数据源可以创建多个图层吗A:可以。多个图层可以共享同一个数据源通过filter区分不同要素。**Q2: filter中的t y p e 表示什么 ∗ ∗ ∗ ∗ A : ∗ ∗ ‘ type表示什么** **A:** type表示什么∗∗∗∗A:∗∗‘type 是一个特殊属性表示GeoJSON要素的几何类型Point/LineString/Polygon等。Q3: 如何按属性值过滤A:使用属性过滤表达式filter:[,[get,name],Lassen Peak] 练习任务基础练习修改多边形颜色和圆形大小进阶挑战添加线图层连接火山点拓展思考如何根据属性值动态设置颜色 最佳实践数据复用: 多个图层共享同一数据源减少内存占用Filter优化: 使用高效的filter表达式提升渲染性能图层组织: 合理命名图层ID便于管理和维护视觉层次: 根据要素类型选择合适的图层类型和样式 延伸阅读Map API文档MapLibre GL JS 官方文档[下一课预告]将继续学习地图图层的基础知识本文是MapLibre GL JS实践课程系列的一部分欢迎关注收藏