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

线渐变色

一条线从起点到终点渐变着色,颜色沿线的进程推进,适合表达方向或累计量。

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

说明

源必须开 lineMetrics: true,否则 line-progress 没有值。line-gradient 用 line-progress 从 0 到 1 插值颜色。

开渐变后不能用 line-dasharray,两者互斥。

配置取值说明
lineMetricstrue源级开关
line-progress0 到 1沿线进程
line-gradientinterpolate颜色随进程变化

渐变按线的几何长度计算,折线拐点密集处颜色变化更快。想要按属性分段上色,用 line-color 的 match 更合适。