学习目标掌握添加GeoJSON多边形的实现方法理解相关API的使用能够独立完成类似功能开发 核心概念使用填充图层类型样式化多边形。 完整代码代码示例constmapnewmaplibregl.Map({container:map,style:https://demotiles.maplibre.org/style.json,center:[-68.13734351262877,45.137451890638886],zoom:5});map.on(load,(){map.addSource(maine,{type:geojson,data:{type:Feature,geometry:{type:Polygon,coordinates:[[[-67.13734351262877,45.137451890638886],[-66.96466,44.8097],[-68.03252,44.3252],[-69.06,43.98],[-70.11617,43.68405],[-70.64573401557249,43.090083319667144],[-70.75102474636725,43.08003225358635],[-70.79761105007827,43.21973948828747],[-70.98176001655037,43.36789581966826],[-70.94416541205806,43.46633942318431],[-71.08482,45.3052400000002],[-70.6600225491012,45.46022288673396],[-70.30495378282376,45.914794623389355],[-70.00014034695016,46.69317088478567],[-69.23708614772835,47.44777598732787],[-68.90478084987546,47.184794623394396],[-68.23430497910454,47.35462921812177],[-67.79035274928509,47.066248887716995],[-67.79141211614706,45.702585354182816],[-67.13734351262877,45.137451890638886]]]}}});map.addLayer({id:maine,type:fill,source:maine,layout:{},paint:{fill-color:#088,fill-opacity:0.8}});});代码示例!DOCTYPEhtmlhtmllangenheadtitleAdd a GeoJSON polygon/titlemetapropertyog:descriptioncontent使用 fill 图层类型设置多边形样式。/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://demotiles.maplibre.org/style.json,center:[-68.13734351262877,45.137451890638886],zoom:5});map.on(load,(){map.addSource(maine,{type:geojson,data:{type:Feature,geometry:{type:Polygon,coordinates:[[[-67.13734351262877,45.137451890638886],[-66.96466,44.8097],[-68.03252,44.3252],[-69.06,43.98],[-70.11617,43.68405],[-70.64573401557249,43.090083319667144],[-70.75102474636725,43.08003225358635],[-70.79761105007827,43.21973948828747],[-70.98176001655037,43.36789581966826],[-70.94416541205806,43.46633942318431],[-71.08482,45.3052400000002],[-70.6600225491012,45.46022288673396],[-70.30495378282376,45.914794623389355],[-70.00014034695016,46.69317088478567],[-69.23708614772835,47.44777598732787],[-68.90478084987546,47.184794623394396],[-68.23430497910454,47.35462921812177],[-67.79035274928509,47.066248887716995],[-67.79141211614706,45.702585354182816],[-67.13734351262877,45.137451890638886]]]}}});map.addLayer({id:maine,type:fill,source:maine,layout:{},paint:{fill-color:#088,fill-opacity:0.8}});});/script/body/html 代码解析1. 初始化地图使用new maplibregl.Map()创建地图实例配置基本参数。本示例中心点设置在缅因州附近。2. 添加GeoJSON数据源通过map.addSource()添加GeoJSON数据源包含一个多边形要素描述缅因州的边界轮廓。3. 添加填充图层使用map.addLayer()添加fill类型图层设置填充颜色和透明度。⚙️ 参数说明参数类型必填说明containerstring是地图容器IDstylestring是地图样式URLcenter[number, number]否初始中心点默认[0, 0]zoomnumber否初始缩放级别默认0fill 图层 paint 属性属性类型说明fill-colorstring填充颜色fill-opacitynumber填充透明度0-1 效果说明运行代码后地图显示美国缅因州区域中心点 -68.14°W, 45.14°N缅因州边界以青色填充显示#088透明度80%用户可正常交互拖拽、缩放、旋转 常见问题Q1: 如何添加多边形边框A:添加一个line类型图层叠加在多边形上map.addLayer({id:maine-border,type:line,source:maine,paint:{line-color:#000,line-width:2}});Q2: GeoJSON坐标顺序是什么A:GeoJSON使用[经度, 纬度]顺序即先X后Y。Q3: 多边形坐标需要闭合吗A:是的多边形的最后一个坐标必须与第一个坐标相同。 练习任务基础练习修改多边形的填充颜色和透明度进阶挑战添加多边形边框拓展思考如何添加多个多边形并使用不同颜色 最佳实践数据格式验证: 加载GeoJSON前验证数据格式是否正确性能优化: 大数据量时使用矢量瓦片而非GeoJSON坐标顺序: 确保GeoJSON坐标遵循[lng, lat]顺序图层顺序: 合理安排图层添加顺序确保正确的视觉层级 延伸阅读Map API文档Layer API文档Expression文档MapLibre GL JS 官方文档[下一课预告]将继续学习地图图层的基础知识本文是MapLibre GL JS实践课程系列的一部分欢迎关注收藏