MapLibre GL JS第17课：添加GeoJSON线

学习目标掌握添加GeoJSON线的实现方法理解相关API的使用能够独立完成类似功能开发 核心概念使用addSource向地图添加GeoJSON线然后使用addLayer的绘制属性进行样式化。 完 整 代 码代码示例constmapnewmaplibregl.Map({container:map,style:https://tiles.openfreemap.org/styles/bright,center:[-122.486052,37.830348],zoom:15});map.on(load,(){map.addSource(route,{type:geojson,data:{type:Feature,properties:{},geometry:{type:LineString,coordinates:[[-122.48369693756104,37.83381888486939],[-122.48348236083984,37.83317489144141],[-122.48339653015138,37.83270036637107],[-122.48356819152832,37.832056363179625],[-122.48404026031496,37.83114119107971],[-122.48404026031496,37.83049717427869],[-122.48348236083984,37.829920943955045],[-122.48356819152832,37.82954808664175],[-122.48507022857666,37.82944639795659],[-122.48610019683838,37.82880236636284],[-122.48695850372314,37.82931081282506],[-122.48700141906738,37.83080223556934],[-122.48751640319824,37.83168351665737],[-122.48803138732912,37.832158048267786],[-122.48888969421387,37.83297152392784],[-122.48987674713133,37.83263257682617],[-122.49043464660643,37.832937629287755],[-122.49125003814696,37.832429207817725],[-122.49163627624512,37.832564787218985],[-122.49223709106445,37.83337825839438],[-122.49378204345702,37.83368330777276]]}}});map.addLayer({id:route,type:line,source:route,layout:{line-join:round,line-cap:round},paint:{line-color:#888,line-width:8}});});代码示例!DOCTYPEhtmlhtmllangenheadtitleAdd a GeoJSON line/titlemetapropertyog:descriptioncontent使用 addSource 向地图添加 GeoJSON 线然后使用 addLayer 的 paint 属性对其进行样式设置。/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:[-122.486052,37.830348],zoom:15});map.on(load,(){map.addSource(route,{type:geojson,data:{type:Feature,properties:{},geometry:{type:LineString,coordinates:[[-122.48369693756104,37.83381888486939],[-122.48348236083984,37.83317489144141],[-122.48339653015138,37.83270036637107],[-122.48356819152832,37.832056363179625],[-122.48404026031496,37.83114119107971],[-122.48404026031496,37.83049717427869],[-122.48348236083984,37.829920943955045],[-122.48356819152832,37.82954808664175],[-122.48507022857666,37.82944639795659],[-122.48610019683838,37.82880236636284],[-122.48695850372314,37.82931081282506],[-122.48700141906738,37.83080223556934],[-122.48751640319824,37.83168351665737],[-122.48803138732912,37.832158048267786],[-122.48888969421387,37.83297152392784],[-122.48987674713133,37.83263257682617],[-122.49043464660643,37.832937629287755],[-122.49125003814696,37.832429207817725],[-122.49163627624512,37.832564787218985],[-122.49223709106445,37.83337825839438],[-122.49378204345702,37.83368330777276]]}}});map.addLayer({id:route,type:line,source:route,layout:{line-join:round,line-cap:round},paint:{line-color:#888,line-width:8}});});/script/body/html 代码解析1. 初始化地图使用new maplibregl.Map()创建地图实例配置基本参数。本示例中心点设置在美国旧金山附近。2. 添加GeoJSON数据源通过map.addSource()添加GeoJSON数据源包含一个LineString要素表示一条徒步路线。3. 添加线图层使用map.addLayer()添加line类型图层配置线条连接方式和样式属性。⚙️ 参数说明参数类型必填说明containerstring是地图容器IDstylestring是地图样式URLcenter[number, number]否初始中心点默认[0, 0]zoomnumber否初始缩放级别默认0line 图层属性属性类型说明line-joinstring线段连接方式round/bevel/miterline-capstring线段端点样式round/butt/squareline-colorstring线条颜色line-widthnumber线条宽度像素 效果说明运行代码后地图显示美国旧金山区域中心点 -122.49°W, 37.83°N一条灰色徒步路线#888显示在地图上线宽8像素线条使用圆角连接和圆角端点用户可正常交互拖拽、缩放、旋转 常 见 问 题Q1: 如何创建虚线A:使用line-dasharray属性paint:{line-color:#888,line-width:8,line-dasharray:[10,5]}Q2: 如何创建渐变线A:使用表达式实现渐变效果paint:{line-color:[interpolate,[linear],[line-progress],0,#0000ff,1,#ff0000]}Q3: LineString和MultiLineString有什么区别A:LineString是单条线MultiLineString可以包含多条独立的线。 练习任务基础练习修改线条颜色和宽度进阶挑战创建虚线样式拓展思考如何实现渐变线条 最佳实践数据格式验证: 加载GeoJSON前验证数据格式是否正确性能优化: 大数据量时使用矢量瓦片而非GeoJSON线条样式: 根据用途选择合适的line-join和line-cap响应式设计: 可根据缩放级别动态调整线宽 延伸阅读Map API文档MapLibre GL JS 官方文档[下一课预告]将继续学习地图图层的基础知识本文是MapLibre GL JS实践课程系列的一部分欢迎关注收藏