地图覆盖物：折线（Polyline）与多边形（Polygon）完全指南
引言
如果说 Marker 是地图上的'图钉'，那 Polyline 和 Polygon 就是地图上的'绳子'和'圈地'。矢量图形是地图业务的核心，无论是物流路线、行政区域还是电子围栏，都离不开它们。但这部分功能比 Marker 复杂得多，涉及几何算法、渲染性能和交互逻辑。
很多时候开发者只会调 API，不懂原理。一旦遇到奇葩需求，比如'画一个带孔洞的多边形'，就容易卡壳。其实 Polyline 和 Polygon 的本质是矢量路径数据，通过地图引擎投影到屏幕，再用 Canvas 或 SVG 绘制。
学习目标
- 掌握矢量图形创建：分清 Polyline（折线）和 Polygon（多边形）的区别，尤其是路径 path 的数据结构。
- 理解闭合与非闭合：明白为什么多边形必须首尾相连，而折线不需要，避免渲染异常。
- 精通样式定制：线条颜色、宽度、虚线样式、填充色、透明度，确保视觉效果符合预期。
- 编辑与交互能力：如何实现拖拽编辑顶点？如何判断点在多边形内？这些是业务刚需。
- 性能与精度平衡：海量坐标点如何简化？如何避免自相交图形导致的渲染错误？
核心原理
1. 坐标投影
和 Marker 一样，经纬度需要转换成屏幕像素。但矢量图形是一串点，计算量是 N 倍。如果路径有 1000 个点，每次地图移动都要重新计算 1000 次投影，这就是卡顿的根源。
2. 闭合逻辑
Polygon 要求首尾坐标一致（或者引擎自动闭合），否则填充区域会出错。Polyline 则是开放的，首尾不相连。
3. 渲染层级
矢量图形通常绘制在地图瓦片之上，Marker 之下（默认情况）。可以通过 zIndex 调整，但要注意大量矢量图形会触发 GPU 加速或降级为 CPU 渲染。
实战代码详解
1. 创建折线与多边形
// 定义路径数据
const path = [
[116.397428, 39.90923],
[116.407428, 39.91923],
[116.387428, 39.91923]
];
// 创建折线 Polyline
const polyline = new AMap.Polyline({
path: path,
strokeColor: "#FF33FF",
strokeWeight: 6,
strokeStyle: "solid",
map: map
});
// 创建多边形 Polygon
const polygon = new AMap.Polygon({
path: path,
fillColor: "#00B2FF",
fillOpacity: 0.4,
strokeColor: "#FF33FF",
map: map
});
2. 编辑与交互事件
// 开启编辑功能
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);
// 矢量图形的点击判断基于几何命中测试，比 Marker 复杂
});
3. 路径更新与清理
// 动态更新路径
polyline.setPath(newPathArray);
// 删除图形
map.remove(polyline);
editor.close();
// 记得关闭编辑器，防止内存泄漏
// 批量清除思路
// 维护一个 overlayList 数组，遍历调用 map.remove()，清空数组引用
性能优化与坑点总结
| 优化场景 | 常见做法 | 建议方案 | 性能影响 |
|---|---|---|---|
| 海量坐标点 | 直接渲染所有点 | 使用 Douglas-Peucker 算法简化路径 | ⭐⭐⭐⭐⭐ |
| 频繁更新 | 每次修改都 setPath | 节流更新，或只更新变动部分 | ⭐⭐⭐ |
| 复杂多边形 | 单个 Polygon 对象 | 拆分多个小多边形渲染 | ⭐⭐ |
| 事件监听 | 每个图形绑独立回调 | 使用事件委托或统一处理 | ⭐⭐ |
| 可见性控制 | 移除不可见区域的线 | 监听 moveend 动态加载 | ⭐⭐⭐⭐ |
| 样式复杂度 | 复杂渐变或阴影 | 尽量用纯色，避免 CSS 阴影 | ⭐⭐⭐ |
坑点预警
- 自相交问题：多边形路径如果自相交，填充效果在不同浏览器可能不一致。前端最好做几何校验。
- 坐标系偏移：画出来的线和底图对不上？检查数据源是 WGS84 还是 GCJ-02，别混用。
- 移动端触摸：细线在移动端很难点中。建议增加 strokeWeight 或者扩大点击判断区域（Hit Testing Padding）。
- 编辑器泄漏：PolyEditor 用完一定要 close() 并销毁实例，否则地图拖拽会异常。
常见问题与解答
-
Q: 如何判断一个点是否在多边形内部？
- A: 射线法（Ray Casting Algorithm）。从该点发出一条射线，统计与多边形边相交的次数，奇数在内，偶数在外。
-
Q: 折线坐标点太多导致卡顿，怎么优化？
- A: 使用道格拉斯 - 普克（Douglas-Peucker）算法进行路径简化，保留关键拐点，移除冗余点。
-
Q: 多边形填充颜色溢出怎么办？
- A: 检查路径是否闭合，是否有自相交。部分 SDK 支持设置 evenOdd 填充规则来解决孔洞问题。
-
Q: 如何实现多边形的孔洞（Hole）效果？
- A: 路径数组支持嵌套。外层数组是外边界，内层数组是孔洞边界。需注意内外环的顺时针/逆时针方向。
-
Q: 地图缩放时，线条宽度如何保持实际米数不变？
- A: 默认 strokeWeight 是像素单位。若需地理宽度，需监听 zoomchange 事件，动态计算并更新线宽。
-
Q: 矢量图形点击事件不灵敏怎么办？
- A: 增加透明边框，或在事件判断时扩大命中半径。移动端建议最小点击区域不小于 44x44 像素。
-
Q: 如何计算折线的总长度？
- A: 遍历路径数组，计算相邻两点间的地理距离（Haversine 公式），累加求和。SDK 通常有 getLength() 方法。
-
Q: 多边形编辑时如何限制顶点不能拖出特定区域？
- A: 监听 adjust 或 move 事件，获取新坐标，判断是否在限制区域内，若不在则撤销操作或修正坐标。
-
Q: Canvas 渲染和 SVG 渲染有什么区别？
- A: Canvas 性能更好适合海量数据，但交互弱；SVG 是 DOM 节点，交互方便但节点多了卡顿。地图 SDK 通常自动选择。
-
Q: 如何实现轨迹回放动画？
- A: 使用 Polyline 的 setPath 配合 requestAnimationFrame 逐步增加路径点，或使用 SDK 提供的 TrajectoryAnimation 插件。
总结表
| 功能模块 | 核心 API/属性 | 注意事项 | 适用场景 |
|---|---|---|---|
| 创建 | new Polyline/Polygon | 区分开放与闭合路径 | 路线、区域 |
| 路径 | path: [] | 经纬度数组，顺序关键 | 所有矢量图形 |
| 样式 | strokeColor, fillColor | 透明度影响性能 | 视觉展示 |
| 编辑 | PolyEditor | 用完必须 close() | 用户绘制 |
| 事件 | on('click', cb) | 命中测试消耗计算 | 交互逻辑 |
| 长度 | getLength() | 单位通常是米 | 距离测量 |
| 面积 | getArea() | 仅 Polygon 支持 | 区域计算 |
| 简化 | 算法自行实现 | 减少坐标点数量 | 性能优化 |
| 孔洞 | 嵌套 path 数组 | 注意环的方向 | 复杂区域 |
| 清理 | map.remove() | 同时销毁编辑器 | 内存管理 |
