高德地图api，利用鼠标工具完成电子围栏-----圆形，矩形（包括编辑）

一、基本思路

使用到的高德地图api： 鼠标工具 MouseTool  

AMap.MouseTool 插件主要通过用户在地图图面的鼠标操作，绘制相应的点、线、面覆盖物；或者进行图面的距离测量、面积量测、拉框放大、拉框缩小等。

• 不选择围栏类型时，只显示地图

• 选择围栏后，（此处以圆形为例）触发鹰眼和比例尺控件

• 使用AMap.MouseTool 画圆，获取半径和圆心

• 高德地图中AMap.MouseTool只支持画圆，但是不能修改，在这里我处理的方式是，使用AMap.MouseTool获取半径和圆心，清除图形。再使用AMap.CircleEditor构建圆进入编辑状态。

• 常规处理数据，将后端所需数据传过去

• 回显问题，我这里是自己定义了一个get方法，思路跟之前较为接近，先获取圆的数据，然后使用AMap.CircleEditor

二、源码展现

 draw(type) {
    this.clearFence();
    //小手变成十字架
    this.map.setDefaultCursor('crosshair');
    this.fenceType = type;
    this.isFenceEmpty = false;
    this.saveFenceButtonType = 'add';
    this.buttonToggle = false;
    let that = this;
    switch (type) {
      case '2': {
        that.mouseTool.rectangle({
          fillColor: '#00b0ff',
          strokeColor: '#80d8ff'
        });
        that.AMap.event.addListener(that.mouseTool, 'draw', function (e) {
          that.mouseTool.close(false)
          let fenceData = [];
          let fenceDataItem = {}
          e.obj.getPath().forEach(item => {
            fenceDataItem = {
              LONG: item.lng + '',
              LAT: item.lat + ''
            }
            fenceData.push(fenceDataItem)
          })

          // 清除原来的矩形
          // that.map.clearMap();

          var southWest = new that.AMap.LngLat(

            Number(fenceData[3]['LONG']).toFixed(3),

            Number(fenceData[3]['LAT']).toFixed(3)

          )

          var northEast = new that.AMap.LngLat(

            Number(fenceData[1]['LONG']).toFixed(3),

            Number(fenceData[1]['LAT']).toFixed(3)

          )

          var bounds = new that.AMap.Bounds(southWest, northEast)

          var rectangle = new that.AMap.Rectangle({
            bounds: bounds,
            strokeOpacity: 1,
            fillOpacity: 0.4,
            fillColor: '#00b0ff',
            strokeColor: '#80d8ff',
            zIndex: 50,
            cursor: 'pointer',
            draggable: true,
          })

          that.map.add(rectangle);
          that.rectangleEditor = new that.AMap.RectangleEditor(that.map, rectangle);
          that.rectangleEditor.open();
          that.rectangleEditor.on('end', function (event) {
            that.triangleObj['northEast'] = [];
            that.triangleObj['southWest'] = [];
            that.triangleObj['northEast'].push(event.target.De.bounds.northeast.lng);
            that.triangleObj['northEast'].push(event.target.De.bounds.northeast.lat);
            that.triangleObj['southWest'].push(event.target.De.bounds.southwest.lng);
            that.triangleObj['southWest'].push(event.target.De.bounds.southwest.lat);
          })
        })
        break;
      }
      case '1': {
        that.mouseTool.circle({
          fillColor: '#00b0ff',
          strokeColor: '#80d8ff'
          //同Circle的Option设置
        });
        that.AMap.event.addListener(that.mouseTool, 'draw', function (e) {
          // console.log('lujing', e.obj.getPath()) //获取路径/范围
          // console.log('zhongxindian', e.obj.getCenter()) //获取中心点
          // console.log('banjing', e.obj.getRadius()) //获取半径
          that.mouseTool.close(false)
          // 清除原来的圆
          // that.map.clearMap()

          // 进入编辑模式
          var circle = new that.AMap.Circle({
            center: [e.obj.getCenter().lng, e.obj.getCenter().lat],
            radius: e.obj.getRadius().toFixed(0), //半径
            strokeOpacity: 1,
            fillOpacity: 0.4,
            strokeDasharray: [10, 10],
            // 线样式还支持 'dashed'
            fillColor: '#00b0ff',
            strokeColor: '#80d8ff',
            zIndex: 50
          })
          that.map.add(circle);
          that.circleEditor = new that.AMap.CircleEditor(that.map, circle)

          that.circleEditor.open()
          that.circleEditor.on('end', function (event) {
            console.log('触发事件： end', event);
            that.circleObj['center'] = [];
            that.circleObj['radius'] = event.target.De.radius;
            that.circleObj['center'].push(event.target.De.center.lng, event.target.De.center.lat);
            console.log('that.circleObj', that.circleObj);
            // event.target 即为编辑后的圆形对象
          })

        })
        break;
      }
    }
  }

参考链接：blog.csdn.net/weixin_4673…