高德插件之mouseTool和polyEditor实现电子围栏和

引言

这一阵子基本完成了前端vue2的学习后，在项目中使用到了mouseTool和polyEditor这两个插件（plugin）来实现电子围栏和禁飞区相关功能展示，在高德JS API 1.4中介绍的比较笼统，真正用到时碰到的一些坑和使用要点以及他们之间的联动记录一下。

mouseTool 鼠标工具

• 定义/初始化/监听

let self = this  
AMap.plugin(['AMap.MouseTool'], function () {
        self.mouseTool = new AMap.MouseTool(map) 
        self.mouseTool.on('draw', function (e) {
          self.polygon = e.obj
        })
      })

• 使用

//开启绘图polygon多边形 也可指定Polyline、Marker等
this.mouseTool.polygon({
        strokeColor: '#3366FF',
        strokeOpacity: 1,
        strokeWeight: 3,
        fillOpacity: 0,
        fillColor: '#223300',
        zIndex: 50,
        bubble: true,
      })
//关闭绘图 参数布尔值：表示是否同时清除绘图
this.mouseTool.close(isClearDraw)

• 注意点
  1. 在上面的代码中加载该插件后，特别注意需要使用别名比如self来指向this才能在函数中调用到vue的组件对象的函数和属性，否则无法访问到vue组件对象会报错。
  2. 该插件可监听绘图完成后的覆盖物对象，监听draw事件并接收返回对象的obj属性，该属性为AMap.Polyline（线）或 AMap.Polygon（多边形）等类型，根据使用情况赋值对应接收对象。
  3. 使用时的参数设置和对应的AMap对象一致，且不需要设置path等new AMap.Polygon对象时必传的属性会被忽略。
  4. 要想获取绘图完成对象的路径点坐标数组，监听接收后的对象后使用this.polygon.getPath()获取即可，返回的是一个数组对象，可自行解析后使用。

polyEditor 线/多边形编辑工具

• 使用和监听

let self = this
AMap.plugin(['AMap.PolyEditor'], function () {
        self.polyEditor = new AMap.PolyEditor(self.map, self.polygon)
        self.polyEditor.open() 
        self.polyEditor.on('end',function(e){console.log(e.target)})
      })
//关闭编辑 (没有参数可选)
self.polyEditor.close()

• 注意点
  1. 第一点和上面一样，加载该插件后，注意self来指向vue的组件对象this。
  2. 该插件可监听绘图完成后的覆盖物对象，监听end事件并接收返回对象的target属性，其实就是传入的对象self.polygon，除此以外还可监听addnode（增加点）、removenode（删除点）、adjust（移动点）事件，较少使用。
  3. 初始化时需要指定一个不为空的AMap对象传入，这里是self.polygon一个多边形对象。

两个插件的联动

从上面的使用方法可以看出，正是应用了联动功能，但是一开始不能直接初始化使用polyEditor，因为此时mouseTool绘图没有完成，this.polygon对象为空还没有赋值，在绘图完成后才能获取到绘图完成的对象并赋值，此时才可以传入该参数初始化并使用polyEditor，使用这两个插件不需要额外自行使用new AMap.xxx来创建AMap对象，比较方便对象管理和维护。

2023.07.28