地图坐标与轨迹渲染：管理端和小程序的共同实践

1. 统一点模型#

先把所有来源转成最小模型：

1
type GeoPoint = {
2
  latitude: number
3
  longitude: number
4
}

1
function normalizePoint(source = {}) {
2
  const latitude = Number(source.latitude ?? source.lat ?? source.y)
3
  const longitude = Number(source.longitude ?? source.lng ?? source.lon ?? source.x)
4
  return Number.isFinite(latitude) && Number.isFinite(longitude)
5
    ? { latitude, longitude }
6
    : null
7
}

渲染层只接收 GeoPoint，不再猜字段。

2. 纬度和经度不要写反#

很多地图构造函数使用 (longitude, latitude)，数据模型通常写 { latitude, longitude }。封装一次转换：

1
const toLngLat = point => new T.LngLat(point.longitude, point.latitude)

不要在十几个调用点手写参数顺序。

3. 坐标系#

飞行航线可能是 WGS84，国内互联网地图常显示 GCJ-02。整体偏移数百米时，优先检查坐标系，不要先调 CSS。转换只执行一次，并让接口或配置明确声明来源坐标系。

4. 覆盖物与普通 DOM 的边界#

随地图缩放和拖动的元素必须由地图引擎管理：marker、polyline、circle。普通 DOM 适合标题、按钮和说明卡片，不适合表示无人机位置。

1
地理对象：经纬度 → 地图引擎 → 屏幕像素
2
普通元素：CSS 像素 → 页面布局

两套坐标系统一不了，硬叠在一起就会产生“悬浮”。

5. 锚点#

marker 的坐标对应图片中的哪个点，由 anchor 决定。普通水滴图标常用 { x: 0.5, y: 1 }，无人机图标可能更适合中心或机身下方。素材带透明边距时，视觉中心和图片中心还不相同，需要按实际资源微调。

6. 路线插值#

沿折线运动不能简单在起终点之间插值，否则会穿过拐角。先计算每段距离和总距离，再把整体进度映射到某一段：

1
整体进度 × 总距离 = 已飞距离
2
已飞距离 - 前序线段长度 = 当前段距离
3
当前段距离 / 当前段长度 = 当前段进度

最后只在当前段起终点之间插值。

7. 视野适配#

Web 地图使用 bounds，小程序使用 includePoints。padding 要考虑侧栏、底部卡片和顶部标题，不能只让所有点“理论上可见”。

8. 实时位置和推算位置#

实时接口有坐标时优先显示真实位置；只有缺少实时点时，才根据开始时间和预计时长推算。页面要明确这是推算进度，不能把动画当成真实遥测。

9. 生命周期#

离开页面时停止动画帧和轮询、移除事件、清理覆盖物。重新加载航线前也先停止旧动画，否则两套任务会争夺同一个 marker。

10. 排查顺序#

遇到偏移时依次检查：

1. 经纬度是否写反；
2. 坐标是否有效；
3. WGS84/GCJ-02 是否一致；
4. 元素是否为地图 marker；
5. anchor 是否正确；
6. 素材是否有透明留白；
7. 路线和 marker 是否使用同一批转换后坐标。

11. 本篇小结#

地图 bug 经常看起来像“差十几个像素”，根因却可能远在坐标系。建立统一点模型和排查顺序以后，我终于不用围着无人机图标反复改 margin-top 了——它该在经纬度里飞，不该在 CSS 里漂。