地图覆盖物：折线（Polyline）与多边形（Polygon）完全指南
引言
矢量图形是地图业务的核心，无论是物流路线、行政区域还是电子围栏，都离不开它们。相比简单的标记点 Marker，折线和多边形的处理涉及几何算法、渲染性能和交互逻辑，复杂度更高。
在实际开发中，画点容易画线难。坐标系偏差一点，线可能飘到海里；多边形少个闭合点，区域就会漏风。本文将深入解析这两种矢量覆盖物的核心原理，提供可落地的代码方案，帮助你解决路径绘制、样式定制、顶点编辑及性能优化等常见问题。
学习目标
- 掌握矢量图形创建：分清
Polyline（折线）和Polygon（多边形）的区别，尤其是路径path的数据结构。 - 理解闭合与非闭合：明白为什么多边形必须首尾相连，而折线不需要，避免渲染异常。
- 精通样式定制：线条颜色、宽度、虚线样式、填充色、透明度，确保视觉表现符合需求。
- 编辑与交互能力：实现拖拽编辑顶点，判断点在多边形内，满足业务刚需。
- 性能与精度平衡：海量坐标点如何简化，如何避免自相交图形导致的渲染错误。
核心原理与流程
Polyline 和 Polygon 的本质是矢量路径数据，通过地图引擎投影到屏幕，再用 Canvas 或 SVG 绘制。一个矢量图形从数据到屏幕显示的全过程如下：
- 准备坐标数组：定义
path经纬度数组。 - 图形类型判断：根据配置创建
Polyline或Polygon实例。 - 设置样式属性：配置颜色、宽度、填充等。
- 添加到地图：调用
map.add()将覆盖物加入图层。 - 引擎投影计算：经纬度转换为屏幕像素坐标。
- 渲染绘制：生成矢量路径数据，Canvas/SVG 渲染。
- 用户交互触发：点击、悬停等事件触发几何算法判断命中。
- 执行回调逻辑：更新路径或样式。
原理深度解析
- 坐标投影：经纬度需转换成屏幕像素。矢量图形是一串点，计算量随点数线性增长。如果路径有 1000 个点，每次地图移动都要重新计算投影，这是卡顿的根源。
- 闭合逻辑：
Polygon要求首尾坐标一致（部分 SDK 自动闭合），否则填充区域会出错。Polyline则是开放的，首尾不相连。 - 渲染层级：矢量图形通常绘制在地图瓦片之上，
Marker之下。可通过zIndex调整，但大量矢量图形会触发 GPU 加速或降级为 CPU 渲染。
实战代码详解
1. 创建折线与多边形
初始化时，首先需要定义路径数据。确保顺序正确，检查坐标合法性。对于多边形，建议手动确保首尾坐标一致，虽然部分 SDK 支持自动闭合。
// 定义路径数据
const path = [
[116.397428, 39.90923],
[116.407428, 39.91923],
[, ]
];
polyline = .({
: path,
: ,
: ,
: ,
: map
});
polygon = .({
: path,
: ,
: ,
: ,
: map
});
