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

轨迹回放

26 个轨迹点按累计距离插值推进,支持进度拖动、三档倍速和视角跟随。

Leaflet 1.9.4 · 更新 2026-10-27
源码与运行效果
运行效果

说明

回放的核心不是「逐点跳」,而是「按距离连续插值」。初始化时先算出 cum[i](起点到第 i 个点的累计米数),播放时把当前里程换算到某一段内, 再线性插值出经纬度,光点移动才是平滑的。

部件实现方式
背景路线完整点的浅灰虚线,标出全程走向
已走路径只保留当前点前 1400 米的采样点,形成拖尾
车辆标记divIcon 圆点,每帧 setLatLng
进度条0–1000 的整数映射到总长度,拖动即可定位
跟随勾选后每帧 panTo,关闭动画避免抖动

时间推进用 requestAnimationFrame 的时间差,并对单帧时长做 50 ms 上限截断。 切到后台再回来时,时间差可能达到几秒,不截断会导致光点瞬移。

示例的速度是为了演示压缩后的结果,真实 GPS 轨迹应按时间戳推进,而不是等距。 数据里还有漂移点时,先做卡尔曼或中值滤波,再进入回放。