可以使用 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 毫秒绘制一个点
}
实现原理
- 逐步绘制：
setInterval控制每 300ms 添加一个点，更新Polyline。 - 动态更新路径：每次添加新点后，调用
polyline.setPath(drawnPath)重新渲染。 - 完成后调整视图：当所有点绘制完成，
clearInterval(timer)停止计时，并map.setFitView()以适应整个折线。
这样，你的折线会像动画一样逐个点地绘制出来！🚀
)
