首页 / MapLibre / 使用示例
路径动画
橙色轨迹沿折线向前生长,头部圆点始终压在末端,右侧进度与里程同步跳动。
全程只在两处小数据上调用 setData。
源码与运行效果
说明
折线的顶点间距并不均匀,直接按顶点推进会让速度忽快忽慢。 示例先按经纬度距离累计长度,再等距插值出 600 个点, 动画每帧前进一格,视觉速度就稳定了。
每帧更新两个源:trail 是已经走过的那段 LineString,
head 是末端的一个点。数据量都只有几十个坐标,
序列化与上传的开销远小于重画整条线。
| 做法 | 实现 | 说明 |
|---|---|---|
| 等距采样 | 按累计距离插值 | 速度均匀,不随顶点疏密变化 |
| 轨迹增长 | path.slice(0, n) | 只传已走部分 |
| 头部点 | 单个 Point 源 | 圆点与光晕两层共用 |
| 节奏 | 每 16 毫秒前进一格 | 约 10 秒走完全程 |
暂停只停住索引增长,动画循环仍在跑,恢复时不会跳帧。
需要彻底停掉循环时用 cancelAnimationFrame,
但那要额外保存句柄。
轨迹数据每帧替换会不断产生新对象,长时间运行注意别把历史数组一起
塞进 setData,只传当前需要的片段。