Mapbox Gl JS 多路径多点位动画异常 仅单个点位正常生效

• 单路径插值逻辑缺失：现有代码仅对route.features[0]做了距离计算、逐点插值生成平滑坐标序列，其余路径要素始终保留原始仅含起点、终点的两个坐标点，没有可供动画遍历的步长坐标数组，对应点位自然无法移动。
• 动画循环独立运行无同步：两个点位的动画分别通过独立的requestAnimationFrame递归触发，两套循环的执行时序存在错位，且每帧都会全量重绘整个点位GeoJSON，加上计数器判断逻辑没有匹配每条路径的实际插值长度，会出现某一路径提前终止更新、点位定格在半路的问题。
• 回放逻辑覆盖不全：点击回放按钮时，仅将第一个点位的坐标重置为起点坐标，存在点位和起点的匹配错位——把对应origin_2的点位设置成了origin的坐标，第二个点位的位置没有被重置；且全局共享的单个计数器没有按路径拆分维护，复位逻辑存在漏洞。

核心调整点 #

• 循环遍历所有路径要素，为每一条路径单独计算长度、生成对应插值后的平滑坐标序列
• 统一使用一个全局步长计数器，在同一个动画帧回调内批量更新所有点位的位置、朝向参数，实现完全同步的动画效果
• 回放时遍历所有点位，将每个点位的坐标重置为对应匹配路径的起点位置，同步重置全局计数器

修正后的代码片段 #

// 定义起终点坐标
var origin = [-122.414, 37.776];
var origin_2 = [-122.5, 37.676];
var destination = [-77.032, 38.913];
var destination_2 = [-77.132, 38.813];

// 初始化路径GeoJSON
var route = {
  type: "FeatureCollection",
  features: [
    {
      type: "Feature",
      geometry: {
        type: "LineString",
        coordinates: [origin_2, destination_2],
      },
    },
    {
      type: "Feature",
      geometry: {
        type: "LineString",
        coordinates: [origin, destination],
      },
    },
  ],
};

// 初始化点位GeoJSON
var point = {
  type: "FeatureCollection",
  features: [
    {
      type: "Feature",
      properties: {},
      geometry: {
        type: "Point",
        coordinates: origin_2,
      },
    },
    {
      type: "Feature",
      properties: {},
      geometry: {
        type: "Point",
        coordinates: origin,
      },
    },
  ],
};

var steps = 500;

// 逐路径做坐标插值，为每条路径生成完整的平滑坐标序列
route.features.forEach((feature) => {
  const lineDistance = turf.length(feature);
  const arc = [];
  for (var i = 0; i < lineDistance; i += lineDistance / steps) {
    const segment = turf.along(feature, i);
    arc.push(segment.geometry.coordinates);
  }
  // 补充终点坐标，避免最后一段位置偏移
  arc.push(feature.geometry.coordinates[feature.geometry.coordinates.length - 1]);
  feature.geometry.coordinates = arc;
});

// 全局统一的动画步长计数器
let currentStep = 0;

map.on("load", function () {
  map.addSource("route", {
    type: "geojson",
    data: route,
  });
  map.addSource("point", {
    type: "geojson",
    data: point,
  });

  map.addLayer({
    id: "route",
    source: "route",
    type: "line",
    paint: {
      "line-width": 2,
      "line-color": "#007cbf",
    },
  });

  map.addLayer({
    id: "point",
    source: "point",
    type: "symbol",
    layout: {
      "icon-image": "car-15",
      "icon-size": 1.5,
      "icon-rotation-alignment": "map",
      "icon-allow-overlap": true,
      "icon-ignore-placement": true,
    },
  });

  // 统一的动画更新函数，单帧内更新所有点位
  function animate() {
    // 所有路径都走到终点后停止动画
    if (currentStep >= steps) return;

    // 逐路径更新对应点位的位置、朝向
    point.features.forEach((pointFeature, idx) => {
      const currentCoord = route.features[idx].geometry.coordinates[currentStep];
      pointFeature.geometry.coordinates = currentCoord;
      // 计算点位朝向
      const nextCoord = route.features[idx].geometry.coordinates[Math.min(currentStep + 1, steps)];
      pointFeature.properties.bearing = turf.bearing(
        turf.point(currentCoord),
        turf.point(nextCoord)
      );
    });

    // 单帧批量更新所有点位数据，减少重复渲染开销
    map.getSource("point").setData(point);
    currentStep++;
    requestAnimationFrame(animate);
  }

  document.getElementById("replay").addEventListener("click", function () {
    // 遍历所有点位，重置为对应路径的起点位置
    point.features.forEach((pointFeature, idx) => {
      pointFeature.geometry.coordinates = route.features[idx].geometry.coordinates[0];
    });
    map.getSource("point").setData(point);
    // 重置全局计数器，重新启动动画
    currentStep = 0;
    animate();
  });

  // 启动动画
  animate();
});

效果验证说明 #

• 所有路径会同步按照预设的500步平滑移动
• 每个点位会根据所在路径的实时方向自动调整图标朝向
• 点击回放按钮时，所有点位会同步回到起点重新开始动画

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