学习目标掌握用表达式创建虚线渐变线的实现方法理解相关API的使用能够独立完成类似功能开发 核心概念使用表达式创建带虚线的渐变线条。 完 整 代 码代码示例!DOCTYPEhtmlhtmllangenheadtitleCreate a gradient line with dasharray using an expression/titlemetapropertyog:descriptioncontent同时使用 line-gradient 和 line-dasharray 绘制属性来创建带有渐变颜色的虚线。/metapropertyog:createdcontent2025-10-09/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:[-77.035,38.875],zoom:12});constgeojson{type:FeatureCollection,features:[{type:Feature,properties:{},geometry:{coordinates:[[-77.044211,38.852924],[-77.045659,38.860158],[-77.044232,38.862326],[-77.040879,38.865454],[-77.039936,38.867698],[-77.040338,38.86943],[-77.04264,38.872528],[-77.03696,38.878424],[-77.032309,38.87937],[-77.030056,38.880945],[-77.027645,38.881779],[-77.026946,38.882645],[-77.026942,38.885502],[-77.028054,38.887449],[-77.02806,38.892088],[-77.03364,38.892108],[-77.033643,38.899926]],type:LineString}}]};map.on(load,(){// line-gradient 只能与GeoJSON源一起使用// 并且源必须将lineMetrics选项设置为truemap.addSource(line,{type:geojson,lineMetrics:true,data:geojson});// 图层必须是line类型map.addLayer({type:line,source:line,id:line,paint:{line-color:red,line-width:14,// line-gradient 必须使用表达式指定// 使用特殊的line-progress属性line-gradient:[interpolate,[linear],[line-progress],0,blue,0.1,royalblue,0.3,cyan,0.5,lime,0.7,yellow,1,red],// line-dasharray 可以与 line-gradient 结合使用line-dasharray:[10,2.4]},layout:{line-cap:round,line-join:round}});});/script/body/html 代码解析初始化地图使用new maplibregl.Map()创建地图实例配置基本参数。本示例的核心特色是展示如何同时使用line-gradient和line-dasharray属性创建带虚线的渐变线条。关键配置项container: 地图容器的 DOM 元素 IDstyle: 使用 OpenStreetMap 亮色样式https://tiles.openfreemap.org/styles/brightcenter: 地图初始中心点[-77.035, 38.875]美国华盛顿特区zoom: 初始缩放级别为 12显示城市级别视图GeoJSON 数据源配置map.addSource(line,{type:geojson,lineMetrics:true,// 必须启用此选项才能使用 line-gradientdata:geojson});虚线渐变线条配置map.addLayer({type:line,source:line,id:line,paint:{line-color:red,line-width:14,line-gradient:[interpolate,[linear],[line-progress],0,blue,0.1,royalblue,0.3,cyan,0.5,lime,0.7,yellow,1,red],line-dasharray:[10,2.4]// 虚线模式10px实线2.4px空白},layout:{line-cap:round,line-join:round}});⚙️ 参数说明参数类型必填默认值说明containerstring是-地图容器元素的 IDstylestring/object是-地图样式 URL 或内联样式对象center[number, number]否[0, 0]初始中心点坐标zoomnumber否0初始缩放级别line-dasharray 属性参数类型必填说明dashArraynumber[]是虚线模式数组交替表示实线和空白的长度示例:[10, 2.4]: 10px 实线2.4px 空白[5, 5]: 5px 实线5px 空白均匀虚线[10, 2, 2, 2]: 10px 实线2px 空白2px 实线2px 空白点划线 效果说明运行代码后地图上会显示一条彩虹渐变的虚线路径起点: 坐标[-77.0442, 38.8529]颜色为蓝色终点: 坐标[-77.0336, 38.8999]颜色为红色渐变过渡: 蓝 → 皇家蓝 → 青 → 石灰绿 → 黄 → 红虚线模式: 10px 实线段2.4px 空白间隔视觉效果:每个虚线段都呈现完整的颜色渐变虚线在拐角处平滑连接line-join: round虚线端点圆润line-cap: round 常 见 问 题Q1: line-dasharray 如何工作A:line-dasharray接受一个数字数组定义虚线的模式。数组元素交替表示实线长度和空白长度。例如[10, 2.4]表示 10px 实线、2.4px 空白、10px 实线、2.4px 空白以此类推。Q2: line-gradient 和 line-dasharray 可以一起使用吗A:可以。如本示例所示两者可以组合使用创建带有渐变效果的虚线。Q3: 虚线间距如何影响渐变效果A:每个虚线段都会呈现完整的颜色渐变。较小的虚线间距会让渐变看起来更连续较大的间距会让渐变效果更分散。Q4: 如何创建点划线效果A:使用四个元素的数组如[10, 2, 2, 2]表示实线、长空白、短实线、短空白的重复模式。 练习任务基础练习修改虚线间距和渐变颜色进阶挑战创建点划线效果实线点空白拓展思考如何实现虚线动画效果 最佳实践虚线比例: 虚线间距和实线长度要协调避免过于密集或稀疏视觉一致性: 虚线样式应与整体设计风格保持一致性能考虑: 复杂的虚线模式可能影响渲染性能线宽配合: 较宽的线条更能展示虚线效果端点处理: 使用line-cap: round使虚线端点更平滑语义使用: 虚线通常表示次要路径、规划路线或边界 延伸阅读Map API文档MapLibre GL JS 官方文档[下一课预告]将继续学习地图图层的基础知识本文是MapLibre GL JS实践课程系列的一部分欢迎关注收藏
MapLibre GL JS第50课：用表达式创建虚线渐变线
学习目标掌握用表达式创建虚线渐变线的实现方法理解相关API的使用能够独立完成类似功能开发 核心概念使用表达式创建带虚线的渐变线条。 完 整 代 码代码示例!DOCTYPEhtmlhtmllangenheadtitleCreate a gradient line with dasharray using an expression/titlemetapropertyog:descriptioncontent同时使用 line-gradient 和 line-dasharray 绘制属性来创建带有渐变颜色的虚线。/metapropertyog:createdcontent2025-10-09/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:[-77.035,38.875],zoom:12});constgeojson{type:FeatureCollection,features:[{type:Feature,properties:{},geometry:{coordinates:[[-77.044211,38.852924],[-77.045659,38.860158],[-77.044232,38.862326],[-77.040879,38.865454],[-77.039936,38.867698],[-77.040338,38.86943],[-77.04264,38.872528],[-77.03696,38.878424],[-77.032309,38.87937],[-77.030056,38.880945],[-77.027645,38.881779],[-77.026946,38.882645],[-77.026942,38.885502],[-77.028054,38.887449],[-77.02806,38.892088],[-77.03364,38.892108],[-77.033643,38.899926]],type:LineString}}]};map.on(load,(){// line-gradient 只能与GeoJSON源一起使用// 并且源必须将lineMetrics选项设置为truemap.addSource(line,{type:geojson,lineMetrics:true,data:geojson});// 图层必须是line类型map.addLayer({type:line,source:line,id:line,paint:{line-color:red,line-width:14,// line-gradient 必须使用表达式指定// 使用特殊的line-progress属性line-gradient:[interpolate,[linear],[line-progress],0,blue,0.1,royalblue,0.3,cyan,0.5,lime,0.7,yellow,1,red],// line-dasharray 可以与 line-gradient 结合使用line-dasharray:[10,2.4]},layout:{line-cap:round,line-join:round}});});/script/body/html 代码解析初始化地图使用new maplibregl.Map()创建地图实例配置基本参数。本示例的核心特色是展示如何同时使用line-gradient和line-dasharray属性创建带虚线的渐变线条。关键配置项container: 地图容器的 DOM 元素 IDstyle: 使用 OpenStreetMap 亮色样式https://tiles.openfreemap.org/styles/brightcenter: 地图初始中心点[-77.035, 38.875]美国华盛顿特区zoom: 初始缩放级别为 12显示城市级别视图GeoJSON 数据源配置map.addSource(line,{type:geojson,lineMetrics:true,// 必须启用此选项才能使用 line-gradientdata:geojson});虚线渐变线条配置map.addLayer({type:line,source:line,id:line,paint:{line-color:red,line-width:14,line-gradient:[interpolate,[linear],[line-progress],0,blue,0.1,royalblue,0.3,cyan,0.5,lime,0.7,yellow,1,red],line-dasharray:[10,2.4]// 虚线模式10px实线2.4px空白},layout:{line-cap:round,line-join:round}});⚙️ 参数说明参数类型必填默认值说明containerstring是-地图容器元素的 IDstylestring/object是-地图样式 URL 或内联样式对象center[number, number]否[0, 0]初始中心点坐标zoomnumber否0初始缩放级别line-dasharray 属性参数类型必填说明dashArraynumber[]是虚线模式数组交替表示实线和空白的长度示例:[10, 2.4]: 10px 实线2.4px 空白[5, 5]: 5px 实线5px 空白均匀虚线[10, 2, 2, 2]: 10px 实线2px 空白2px 实线2px 空白点划线 效果说明运行代码后地图上会显示一条彩虹渐变的虚线路径起点: 坐标[-77.0442, 38.8529]颜色为蓝色终点: 坐标[-77.0336, 38.8999]颜色为红色渐变过渡: 蓝 → 皇家蓝 → 青 → 石灰绿 → 黄 → 红虚线模式: 10px 实线段2.4px 空白间隔视觉效果:每个虚线段都呈现完整的颜色渐变虚线在拐角处平滑连接line-join: round虚线端点圆润line-cap: round 常 见 问 题Q1: line-dasharray 如何工作A:line-dasharray接受一个数字数组定义虚线的模式。数组元素交替表示实线长度和空白长度。例如[10, 2.4]表示 10px 实线、2.4px 空白、10px 实线、2.4px 空白以此类推。Q2: line-gradient 和 line-dasharray 可以一起使用吗A:可以。如本示例所示两者可以组合使用创建带有渐变效果的虚线。Q3: 虚线间距如何影响渐变效果A:每个虚线段都会呈现完整的颜色渐变。较小的虚线间距会让渐变看起来更连续较大的间距会让渐变效果更分散。Q4: 如何创建点划线效果A:使用四个元素的数组如[10, 2, 2, 2]表示实线、长空白、短实线、短空白的重复模式。 练习任务基础练习修改虚线间距和渐变颜色进阶挑战创建点划线效果实线点空白拓展思考如何实现虚线动画效果 最佳实践虚线比例: 虚线间距和实线长度要协调避免过于密集或稀疏视觉一致性: 虚线样式应与整体设计风格保持一致性能考虑: 复杂的虚线模式可能影响渲染性能线宽配合: 较宽的线条更能展示虚线效果端点处理: 使用line-cap: round使虚线端点更平滑语义使用: 虚线通常表示次要路径、规划路线或边界 延伸阅读Map API文档MapLibre GL JS 官方文档[下一课预告]将继续学习地图图层的基础知识本文是MapLibre GL JS实践课程系列的一部分欢迎关注收藏
