经纬志
首页 / MapLibre / 使用示例

线图层

一条线路三层画法:深色描边打底、渐变主线表示进度、虚线区分规划段。 线宽滑块同时改主线与描边,保持比例。

MapLibre GL JS 4.x · 更新 2026-10-28
源码与运行效果
运行效果

说明

渐变依赖 lineMetrics: true。开启后源会额外计算沿线距离, line-progress 才能作为插值输入。忘记这个开关时, 渐变表达式不生效,线显示为单色。

描边不是 line-width 的描边属性,而是另一条更宽的线压在下面。 三段式线宽(底宽、主宽、端点样式)都各自声明,图层顺序决定谁在上。

配置取值说明
lineMetricstrue渐变与沿线距离的必要条件
line-gradientline-progress 插值按里程变色
line-dasharray[2, 1.5]虚线节奏,单位线宽
line-capround端点为圆头,接头更顺
line-joinround折角圆滑,避免尖刺

线宽以像素为单位,缩放时不会自动变化。需要随级别加粗时, 把 line-width 写成 interpolate 表达式, 而不是在 zoomend 里改数值。

虚线在急转弯处会断裂,这是 dasharray 按线长均匀切分的必然结果。 接缝要求高时改用实线,或用符号图层沿线摆放点段。