【vue】高德地图AMap.Polyline动态更新画折线，逐步绘制

可以使用 setTimeout 或 setInterval 来逐个点绘制折线，确保每次添加新的点到 path 并更新 Polyline，如下所示：

localPolyline(path) {
  console.log('逐点绘制 polyline...');
  
  let drawnPath = []; // 用于存储当前绘制的点
  let index = 0;
  
  let polyline = new AMap.Polyline({
    path: drawnPath, // 初始为空
    isOutline: true,
    outlineColor: '#ffeeff',
    borderWeight: 3,
    strokeColor: "#3366FF",
    strokeOpacity: 1,
    strokeWeight: 6,
    strokeStyle: "solid",
    strokeDasharray: [10, 5], // 只有 strokeStyle 为 dashed 时有效
    lineJoin: 'round',
    lineCap: 'round',
    zIndex: 50,
  });

  map.add([polyline]);

  let timer = setInterval(() => {
    if (index < path.length) {
      drawnPath.push(path[index]); // 添加新点
      polyline.setPath(drawnPath); // 更新折线路径
      index++;
    } else {
      clearInterval(timer); // 结束绘制
      map.setFitView(); // 调整视图
    }
  }, 300); // 每 300 毫秒绘制一个点
}

实现原理

1. 逐步绘制：setInterval 控制每 300ms 添加一个点，更新 Polyline。
2. 动态更新路径：每次添加新点后，调用 polyline.setPath(drawnPath) 重新渲染。
3. 完成后调整视图：当所有点绘制完成，clearInterval(timer) 停止计时，并 map.setFitView() 以适应整个折线。

这样，你的折线会像动画一样逐个点地绘制出来！🚀