经纬志
首页 / MapLibre / 使用示例

路径动画

橙色轨迹沿折线向前生长,头部圆点始终压在末端,右侧进度与里程同步跳动。 全程只在两处小数据上调用 setData。

MapLibre GL JS 4.x · 更新 2026-10-28
源码与运行效果
运行效果

说明

折线的顶点间距并不均匀,直接按顶点推进会让速度忽快忽慢。 示例先按经纬度距离累计长度,再等距插值出 600 个点, 动画每帧前进一格,视觉速度就稳定了。

每帧更新两个源:trail 是已经走过的那段 LineString, head 是末端的一个点。数据量都只有几十个坐标, 序列化与上传的开销远小于重画整条线。

做法实现说明
等距采样按累计距离插值速度均匀,不随顶点疏密变化
轨迹增长path.slice(0, n)只传已走部分
头部点单个 Point 源圆点与光晕两层共用
节奏每 16 毫秒前进一格约 10 秒走完全程

暂停只停住索引增长,动画循环仍在跑,恢复时不会跳帧。 需要彻底停掉循环时用 cancelAnimationFrame, 但那要额外保存句柄。

轨迹数据每帧替换会不断产生新对象,长时间运行注意别把历史数组一起 塞进 setData,只传当前需要的片段。