MapLibre GL JS第49课：用表达式创建渐变线

学习目标掌握用表达式创建渐变线的实现方法理解相关API的使用能够独立完成类似功能开发 核心概念使用表达式创建渐变线条。 完 整 代 码代码示例!DOCTYPEhtmlhtmllangenheadtitleCreate a gradient line using an expression/titlemetapropertyog:descriptioncontent使用线渐变 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:[-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]},layout:{line-cap:round,line-join:round}});});/script/body/html 代码解析初始化地图使用new maplibregl.Map()创建地图实例配置基本参数。本示例的核心特色是展示如何使用line-gradient属性和表达式创建渐变线条。关键配置项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});line-gradient 表达式配置map.addLayer({type:line,source:line,id:line,paint:{line-color:red,line-width:14,line-gradient:[interpolate,[linear],[line-progress],// 特殊属性表示线条进度0-10,blue,// 起点蓝色0.1,royalblue,// 10%皇家蓝0.3,cyan,// 30%青色0.5,lime,// 中点石灰绿0.7,yellow,// 70%黄色1,red// 终点红色]},layout:{line-cap:round,line-join:round}});⚙️ 参数说明参数类型必填默认值说明containerstring是-地图容器元素的 IDstylestring/object是-地图样式 URL 或内联样式对象center[number, number]否[0, 0]初始中心点坐标zoomnumber否0初始缩放级别GeoJSON 数据源配置参数类型必填默认值说明lineMetricsboolean否false是否计算线条度量启用后支持line-progressline-gradient 表达式参数类型说明line-progressexpression特殊属性返回当前点在线条上的进度0 到 1interpolateexpression插值表达式用于创建平滑过渡linearkeyword线性插值方式 效果说明运行代码后地图上会显示一条彩虹渐变的路径起点: 坐标[-77.0442, 38.8529]颜色为蓝色终点: 坐标[-77.0336, 38.8999]颜色为红色渐变过渡: 蓝 → 皇家蓝 → 青 → 石灰绿 → 黄 → 红渐变原理:line-progress返回 0起点到 1终点的值interpolate表达式根据line-progress值进行线性插值在指定的进度点之间平滑过渡颜色 常 见 问 题Q1: line-gradient 为什么不生效A:需要满足两个条件数据源必须是 GeoJSON 类型数据源必须设置lineMetrics: trueQ2: line-progress 是什么A:line-progress是一个特殊的表达式属性返回当前点在线条路径上的进度值从 0起点到 1终点。Q3: 可以使用其他插值方式吗A:可以。除了linear还可以使用exponential或cubic-bezier插值方式。Q4: 可以基于其他属性创建渐变吗A:line-gradient只能使用line-progress作为输入无法直接使用其他属性。 练习任务基础练习修改渐变颜色和颜色节点位置进阶挑战创建双向渐变从两端向中间渐变拓展思考如何实现动态渐变动画 最佳实践性能优化:lineMetrics会增加内存使用只在需要时启用颜色数量: 适当控制颜色节点数量过多会影响性能线条宽度: 较宽的线条更能展示渐变效果端点处理: 使用line-cap: round使端点更平滑兼容性检查: 确保目标浏览器支持此功能备用方案: 为不支持line-gradient的环境提供纯色备用 延伸阅读Map API文档MapLibre GL JS 官方文档[下一课预告]将继续学习地图图层的基础知识本文是MapLibre GL JS实践课程系列的一部分欢迎关注收藏