背景
就是接到需求，要求进行高德多边形编辑器操作点位时，临近的两个点位和当前操作点间的两条线实时显示长度。
技术背景
高德相应的 API。
AMap.PolygonAMap.PolygonEditor
快速看了一下，发现 AMap.PolygonEditor 的事件好像能支持这类行为😏（这波稳了）。
搞了个 demo 跑了一下，结果被这个 editor.adjust 的相应行为给蚌住了... 发现这个事件存在如下几点问题：
- 只能在点位移动操作完成后响应；
- 响应的结果是
target即操作的多边形而不是当前操作的点； - 只有白色点（实际点）操作触发事件，蓝色点（中间点）则无法触发事件；
实现思路
基于以上的操作肯定是行不通的，只能另辟蹊径了。
分析一波
1、获取多边形编辑器的所有点（白色点+蓝色点）;
2、基于这些点创建一个不可见的点位放在对应的操作点下；
3、给地图注册相应事件
- mousedown: 判断鼠标点击的位置是否在这点圆内
- mousemove: 操作点移动时，实时更新文本
- mouseup: 清除本次操作相应的数据记录
4、命中某个圆点，则用这个圆点找到编辑器上对应的操作点（可通过经纬度查找）以及临近两个点的信息；
5、操作点移动时，使用当前鼠标移动点位和临近两个点建立两条直线并实时更新线长；
编码环节
全部代码有点多，直接简单的伪代码说明下处理流程😝.
// 基础代码
const map = new AMap.Map();
// 创建多边形
const polygon = new AMap.Polygon();
// 创建编辑器
const edtior = new AMap.PolygonEdtior(map, polygon);
// 类封装
class PolygonEdtiorRanging {
constructor(polygonEdtior) {
this.polygonEdtior = polygonEdtior;
}
start() {
// 1、获取多边形编辑器的所有点（白色点+蓝色点）
// 2、基于这些点创建一个不可见的点位放在对应的操作点下
this.polygonPaths = this.getPolygonEditorTargetPaths();
// this.circleMarkers 是一个点位收集类
this.circleMarkers.createCircleMarkersByPaths(this.polygonPaths);
// 3、给地图注册相应事件
// 鼠标点下
this.map.on('mousedown', this.onMouseDown);
// 鼠标移动
this.map.on('mousemove', this.onMouseMove);
// 鼠标松开
this.map.on('mouseup', this.onMouseUp);
}
onMouseDown(event) {
// 4、命中某个圆点，则用这个圆点找到编辑器上对应的操作点（可通过经纬度查找）以及临近两个点的信息；
}
onMouseMove() {
// 5、操作点移动时，使用当前鼠标移动点位和临近两个点建立两条直线并实时更新线长；
}
onMouseUp() {
// 重置一些当前次操作数据
}
}
结果
最后的实现效果~
通过上述思路进行处理的话，还可以实现其他的一些能力，如：
- 多边形绘制时测距
- 多边形边线测距
- 多边形编辑器点事件扩展（
mousedown、mousemove、mouseup）
最后，为了方便有同样需求的同学，此类功能已经封装了一个 npm 包，供大家快速食用。
