地图矢量覆盖物实战：折线和多边形绘制与交互

const editor = new AMap.PolyEditor(map, polygon);
editor.open();

editor.on('end', (e) => {
  const newPath = e.target.getPath();
  console.log('新路径', newPath);
  // 通常这里要校验路径是否自相交
});

polygon.on('click', (e) => {
  console.log('点击了多边形', e.lnglat);
});

PolyEditor 的内存泄漏我碰到过一次：在 SPA 页面里切换路由时只销毁了地图实例，没关编辑器，结果再次进入时地图完全无法拖拽。折腾了半天才发现是编辑器在后台还抓着旧的图形对象。现在我的习惯是在 beforeunload 或路由离开时显式 editor.close()。

矢量图形的点击事件比 Marker 更耗计算，因为它要走几何命中测试。细线在移动端很难点中，可以刻意加大 strokeWeight 到 8 以上，或者用透明边框扩大点击区域——高德没提供直接参数，但可以通过叠加一个透明 Polygon 来放大热区。

路径更新与清理

动态更新路径用 setPath，但注意频繁调用会触发多次渲染。如果有实时轨迹，建议用节流，比如每 200ms 只更新一次。

polyline.setPath(newPathArray);
map.remove(polyline);
editor.close();
// 记得关闭编辑器，防止内存泄漏

如果需要管理一堆覆盖物，维护一个列表，统一清理：

overlayList.forEach(overlay => {
  if (overlay instanceof AMap.PolyEditor) {
    overlay.close();
  } else {
    map.remove(overlay);
  }
});
overlayList = [];

常见问题与应对

• 点在多边形内判断：射线法是标配。从目标点向右（或任意方向）发射线，与多边形边的交点为奇数就是在内部。算法本身不复杂，但注意处理点在边上的特殊情况。
• 折线总长度：遍历相邻点对，用 Haversine 公式算球面距离再累加。高德 AMap.Polyline 有 getLength()，但底层也是这个逻辑。
• 多边形孔洞：路径支持嵌套数组，外层是外边界，内层是孔。注意环的方向——通常外环逆时针、内环顺时针（或反过来，取决于 SDK）。高德遵循的是 GeoJSON 规范，外环逆时针、内环顺时针。如果你用 Turf.js 这类工具生成，一般不会搞错。
• 自相交检查：自相交的多边形填充效果在浏览器间可能不一致，甚至导致渲染错误。前端校验可以用简单的线段相交算法，复杂度 O(n²)。如果路径点太多，后端校验更踏实。
• 坐标系混用：高德用的是 GCJ-02，如果数据源是 WGS84，需要现转换。一个典型的症状是画出来的线和底图偏移几百米。
• 宽度随地图缩放：strokeWeight 单位是像素，地图缩放时线会变粗或变细。如果要求线宽代表地理距离（如 10 米），得监听 zoomchange，动态计算当前的像素宽度。

性能要点备忘

坑点速查

1. 自相交：填充可能花掉，视觉上很怪。
2. 坐标系偏移：数据源是 WGS84 的话，别忘了转 GCJ-02。
3. 移动端触摸：细线难戳中，要么加粗，要么增大热区。
4. 编辑器泄漏：PolyEditor 不 close()，地图拖拽必废。

说到底，矢量覆盖物的麻烦在于它既有几何计算的复杂性，也有 UI 交互的琐碎。不过一旦理解了坐标投影和命中学的原理，调试起来会顺手很多。后续再聊 InfoWindow，那玩意儿看着简单，CSS 定位才是大坑。