轨迹回放功能实现中的关键技术与踩坑经验分享

轨迹回放？别一上来就上高德地图

最近项目里又遇到轨迹回放的需求，不是那种简单的点对点动画，而是要能暂停、快进、拖动时间轴、还能实时显示当前速度和状态的那种。我第一反应是：“又来？上次用高德搞了三天，最后发现性能崩了。” 所以这次我决定认真对比一下几种主流方案，不光看文档，直接撸代码实测。

我主要试了三种：高德/百度地图原生轨迹回放（以高德为例）、纯 Canvas 自绘 + requestAnimationFrame、以及用 SVG + CSS 动画。下面说说我的真实体验。

谁更灵活？谁更省事？

先说结论：小项目或对样式要求高的，我首选 Canvas；要快速上线、轨迹简单、还得带地图底图的，高德也行，但得忍着它的限制。

高德的轨迹回放 API 看起来很香，几行代码就能跑起来：

const map = new AMap.Map('container', { zoom: 10 });
const path = [[116.39, 39.9], [116.4, 39.91], /* ... */];
const marker = new AMap.Marker({ position: path[0] });
const passedPolyline = new AMap.Polyline({ path: [], strokeColor: '#00f' });

map.add([marker, passedPolyline]);

let index = 0;
const timer = setInterval(() => {
  if (index >= path.length) {
    clearInterval(timer);
    return;
  }
  marker.setPosition(path[index]);
  passedPolyline.setPath(path.slice(0, index + 1));
  index++;
}, 100);

看起来挺简洁，对吧？但问题很快就来了：你没法精确控制“播放进度”。比如用户拖动时间轴到 50%，你得自己算出对应路径上的点，而高德没有提供路径插值工具。我折腾了半天，最后还是得自己写贝塞尔插值，那还不如不用它。

而且，高德的 Marker 和 Polyline 都是 DOM 元素（其实是 Canvas 封装的），频繁更新大量点位时，内存和 CPU 消耗肉眼可见地涨。我测过 500 个点以上的轨迹，页面直接卡成幻灯片。

相比之下，Canvas 方案虽然前期要多写点代码，但自由度高太多了。核心逻辑其实就这几行：

const canvas = document.getElementById('track');
const ctx = canvas.getContext('2d');
const points = [...]; // 轨迹点数组
let progress = 0; // 0 ~ 1

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  
  // 绘制完整轨迹（灰色）
  ctx.strokeStyle = '#ccc';
  ctx.beginPath();
  ctx.moveTo(...points[0]);
  for (let i = 1; i < points.length; i++) {
    ctx.lineTo(...points[i]);
  }
  ctx.stroke();

  // 绘制已播放部分（蓝色）
  const currentIdx = Math.floor(progress * (points.length - 1));
  const remainder = progress * (points.length - 1) - currentIdx;
  const currentPoint = lerp(
    points[currentIdx],
    points[currentIdx + 1] || points[currentIdx],
    remainder
  );

  ctx.strokeStyle = '#00f';
  ctx.beginPath();
  ctx.moveTo(...points[0]);
  for (let i = 1; i <= currentIdx; i++) {
    ctx.lineTo(...points[i]);
  }
  if (remainder > 0) {
    ctx.lineTo(...currentPoint);
  }
  ctx.stroke();

  // 绘制当前 marker
  ctx.fillStyle = '#f00';
  ctx.beginPath();
  ctx.arc(currentPoint[0], currentPoint[1], 5, 0, Math.PI * 2);
  ctx.fill();
}

function lerp(a, b, t) {
  return [a[0] + (b[0] - a[0]) * t, a[1] + (b[1] - a[1]) * t];
}

这个 lerp 函数就是线性插值，实现进度平滑的关键。有了它，时间轴拖动、快进、慢放都变得非常简单——你只需要改 progress 的值，然后 draw() 一下就行。而且 Canvas 是直接操作像素，性能比高德那种封装层好太多，5000 个点都没压力。

至于 SVG + CSS 动画，我试了下，用 <animateMotion> 确实能实现路径移动，但控制粒度太差。你想暂停？可以。但想跳到任意时间点？几乎不可能，除非你把整个动画拆成无数小段，那还不如手写。所以这个方案我直接 pass 了。

踩坑提醒：这三点一定注意

• 坐标系转换别偷懒：如果你的数据是 WGS84（GPS 原始坐标），而地图用的是 GCJ-02（高德）或 BD-09（百度），直接画会偏移几百米。我之前就栽在这儿，客户说“车怎么开到河里去了”。后来统一在后端转成 Web Mercator，前端直接用像素坐标，省心。
• 帧率控制很重要：用 setInterval 控制播放很容易掉帧，尤其在低端机上。我后来全改成 requestAnimationFrame + 时间戳计算，流畅多了。比如：

  let lastTime = 0;
      function animate(now) {
        if (!lastTime) lastTime = now;
        const delta = (now - lastTime) / 1000; // 秒
        progress += delta * speed; // speed 是 1 表示正常速度
        if (progress > 1) progress = 1;
        draw();
        if (progress < 1) requestAnimationFrame(animate);
        lastTime = now;
      }

• 轨迹数据别一股脑全加载：有一次我拿到一个 10 万点的轨迹文件，直接浏览器卡死。后来加了分段加载 + 动态简化（比如 Douglas-Peucker 算法），只保留关键拐点，体积减少 80%，效果几乎没差。

我的选型逻辑

现在我基本这么选：

• 如果只是展示一条静态轨迹，不需要交互，高德/百度随便用，省事。
• 如果需要精确控制播放进度、支持时间轴拖拽、或者要叠加自定义 UI（比如速度表、状态标签），我毫不犹豫选 Canvas。虽然前期多写 100 行代码，但后期维护和扩展轻松太多。
• 如果项目已经重度依赖某个地图 SDK，且轨迹很简单（比如就几十个点），那就用地图自带的，避免重复造轮子。

说白了，地图 SDK 的轨迹回放是个“玩具”，真要上生产环境，还是得自己掌控渲染逻辑。 我现在项目里，连地图底图都换成静态瓦片图了，轨迹用 Canvas 叠在上面，性能和体验都稳了。

最后说两句

轨迹回放看着简单，其实细节特别多：坐标纠偏、数据压缩、插值算法、性能优化…… 我上面写的方案也不是完美的，比如 Canvas 方案在 Retina 屏上得手动处理 DPR，不然线条会模糊。但这些小问题都好解决，关键是架构要灵活。

以上是我踩坑后的总结，有更优的实现方式欢迎评论区交流。这个技巧的拓展用法还有很多，比如结合 WebSocket 实现实时轨迹追踪，后续会继续分享这类博客。