Mapbox GL JS多路径点动画异常：仅首个点平滑移动问题咨询

问题原因 #

你的代码存在两个核心问题：

1. 共享进度变量：所有路径复用同一个进度值，导致后续路径的点直接被设置为终点位置
2. 动画逻辑未遍历所有路径：仅更新了第一个点的位置，其余点未参与逐帧计算

修复方案 #

1. 为每个路径维护独立进度 #

将单个进度变量替换为数组，存储每个路径的当前动画进度：

// 初始化每个路径进度为0
let progressArray = routes.map(() => 0);

2. 修改动画循环逻辑 #

在动画回调中遍历所有路径，独立计算每个点的位置：

function animate() {
  progressArray = progressArray.map((prog, idx) => {
    // 更新当前路径进度（可调整0.005控制移动速度）
    let newProg = prog + 0.005;
    // 到达终点后重置（可选）
    newProg = newProg > 1 ? 0 : newProg;

    // 获取当前路径上的对应点
    const point = getPointAlongLine(routes[idx].geometry.coordinates, newProg);
    // 更新点特征的坐标
    pointFeatures[idx].geometry.coordinates = [point.lng, point.lat];

    return newProg;
  });

  // 更新点数据源
  map.getSource('points').setData({
    type: 'FeatureCollection',
    features: pointFeatures
  });

  requestAnimationFrame(animate);
}

3. 确保路径坐标格式合法 #

检查routes数组中的每个路径，必须是标准GeoJSON LineString格式：

const routes = [
  {
    type: 'Feature',
    geometry: {
      type: 'LineString',
      coordinates: [
        [116.39, 39.9],
        [116.4, 39.91],
        // 更多路径节点...
      ]
    }
  },
  // 其他路径...
];

4. 验证辅助函数正确性 #

确保lineDistance和getPointAlongLine函数能正确计算路径长度和点位置：

// 计算路径总长度
function lineDistance(coords) {
  let dist = 0;
  for (let i = 0; i < coords.length - 1; i++) {
    const p1 = new mapboxgl.LngLat(coords[i][0], coords[i][1]);
    const p2 = new mapboxgl.LngLat(coords[i+1][0], coords[i+1][1]);
    dist += p1.distanceTo(p2);
  }
  return dist;
}

// 根据进度获取路径上的点
function getPointAlongLine(coords, progress) {
  const totalDist = lineDistance(coords);
  const targetDist = totalDist * progress;
  let currentDist = 0;

  for (let i = 0; i < coords.length - 1; i++) {
    const p1 = new mapboxgl.LngLat(coords[i][0], coords[i][1]);
    const p2 = new mapboxgl.LngLat(coords[i+1][0], coords[i+1][1]);
    const segDist = p1.distanceTo(p2);

    if (currentDist + segDist >= targetDist) {
      const ratio = (targetDist - currentDist) / segDist;
      return new mapboxgl.LngLat(
        coords[i][0] + (coords[i+1][0] - coords[i][0]) * ratio,
        coords[i][1] + (coords[i+1][1] - coords[i][1]) * ratio
      );
    }
    currentDist += segDist;
  }

  return new mapboxgl.LngLat(coords.at(-1)[0], coords.at(-1)[1]);
}

修复后效果 #

所有点会沿各自路径独立平滑移动，不会出现直接跳转终点的问题。

内容的提问来源于stack exchange，提问作者Szabó Krisztián