如何为整个Mapbox FeatureCollection应用line-gradient而非单个要素

问题根源 #

line-progress表达式的作用范围是单个要素，它会基于当前要素自身的线段长度计算进度比例，而非整个FeatureCollection的总轨迹长度。所以你的代码会让每个线段都按自身长度的50%截断，而不是整个长轨迹的前50%显示、后50%隐藏。

最优解决方案：合并多要素为单个LineString #

把FeatureCollection中的多段线合并成一条完整的LineString，这样line-progress就会基于整个轨迹的总长度计算进度，你的渐变设置就能正确作用于整个轨迹。

可以用turf.js的lineMerge工具实现合并：

import * as turf from '@turf/turf';

// 假设你的原始轨迹数据是originalFeatureCollection
const mergedTrack = turf.lineMerge(originalFeatureCollection);

// 更新地图源的数据为合并后的单要素
map.getSource('track').setData(mergedTrack);

之后再执行你原来的渐变设置代码，就能实现整个轨迹按progress比例显示/隐藏的效果。

备选方案：手动计算要素相对进度（复杂度高，仅特殊场景使用） #

如果因特殊需求无法合并要素，需要提前计算每个要素在总轨迹中的起止进度比例，并添加为要素属性：

1. 计算整个FeatureCollection的总长度
2. 遍历每个要素，累加长度，记录每个要素的startProgress（该要素在总轨迹中的起始比例）和endProgress（结束比例）
3. 修改渐变表达式，结合要素的起止进度和自身的line-progress计算全局进度：

map.setPaintProperty(
    'track',
    "line-gradient",
    [
        "step",
        // 计算当前点在总轨迹中的全局进度
        [
            "+",
            ["get", "startProgress"],
            ["*", ["line-progress"], ["-", ["get", "endProgress"], ["get", "startProgress"]]]
        ],
        "rgba(255, 255, 255, 1)",
        progress,
        "rgba(0, 0, 0, 0)"
    ]
)

这种方法需要额外的数据预处理工作，仅在无法合并要素时使用。

内容的提问来源于stack exchange，提问作者zitscher