高德地图电子围栏 - 矢量图形覆盖物绘制编辑

地图电子围栏，也就是在地图上圈出一个区域，高德地图上对应的方案就是矢量图形覆盖物。
如果仅仅是在地图上绘制矢量图形覆盖物，mouseTool这个插件就满足了，利用它可以在地图上绘制点线面（圆形、矩形、多边形）。通过监听绘制完成事件，可以拿到对应绘制图形的相关属性信息。
代码示例：

<div id="container"></div>

// 地图以及插件的引入
<script src="https://webapi.amap.com/maps?v=2.0&key=申请的key值&plugin=AMap.MouseTool"></script>
<script>

// 初始化地图
let map = new AMap.Map("container", {
    center: [116.434381, 39.898515],
    zoom: 14
});

// 实例化mouseTool
let mouseTool = new AMap.MouseTool(map);

// 绘制矩形
function drawRectangle () {
    mouseTool.rectangle({
        strokeColor:'red',
        strokeOpacity:0.5,
        strokeWeight: 6,
        fillColor:'blue',
        fillOpacity:0.5,
        strokeStyle: 'solid',
    })
}

// 绘制圆形
function drawCircle () {
    mouseTool.circle({
        strokeColor: "#FF33FF",
        strokeOpacity: 1,
        strokeWeight: 6,
        strokeOpacity: 0.2,
        fillColor: '#1791fc',
        fillOpacity: 0.4,
        strokeStyle: 'solid',
    })
}

// 绘制多边形
function drawPolygon () {
    mouseTool.polygon({
        strokeColor: "#FF33FF", 
        strokeOpacity: 1,
        strokeWeight: 6,
        strokeOpacity: 0.2,
        fillColor: '#1791fc',
        fillOpacity: 0.4,
        strokeStyle: "solid",
    })
}

// 绘制事件监听
mouseTool.on('draw', function(e) {
    // e.obj 为绘制出来的覆盖物对象
    // 获取覆盖物对象属性, 圆形：可以拿到中心点，半径； 矩形：可以拿到决定矩形区域的两个坐标点southWest和northEast的坐标；多边形：可以拿到各坐标点数组
    let attr = e.obj.getOptions();
    console.log(attr);
})

</script>

我们在画围栏的时候很少会一步到位，画得那么精确，如果要对绘制的图形进行修改，只有mouseTool这个插件是不够的。还需要引入对应的编辑插件，比如矩形编辑，以js加载为例。
<script src="https://webapi.amap.com/maps?v=2.0&key=申请的key值&plugin=AMap.MouseTool,AMap.RectangleEditor"></script>
多个插件以“,”连接。

虽然RectangleEditor也可以绘制矩形，但交互体验不如mouseTool点击拖动绘制好，所以还是两个插件配合使用比较好。
mouseTool绘制的矩形不能直接通过RectangleEditor编辑，RectangleEditor可编辑由Rectangle创建的矩形。那解决办法就是获取mouseTool绘制的矩形属性，拿到关键的两个坐标点，然后清除mouseTool绘制的矩形，再通过Rectangle和拿到的矩形坐标点重新绘制一个矩形。这个矩形就能通过RectangleEditor编辑了。

代码示例：

let rect = null;
// 绘制事件监听
mouseTool.on('draw', function(e) {
    // e.obj 为绘制出来的覆盖物对象
    switch (e.obj.className){
        case 'Overlay.Circle':
            break;
        case 'Overlay.Rectangle':
            if($rect) return;  // 如果地图上已经存在矩形就不再重画了
            let attr = e.obj.getOptions();
            mouseTool.close();  // 关闭mouseTool绘画功能，防止在编辑矩形的时候因鼠标滑动而重复画矩形
            map.clearMap();     // 清除地图上的所有覆盖物
            reDrawRect(attr);   // 通过矩形属性重新绘制
            break;
      }
})

// 重绘可以编辑的矩形
function reDrawRect(attr){
    // 设置矩形绘制样式，绘制矩形
    rect = new AMap.Rectangle({
        bounds: attr.bounds,
        strokeColor:'black',
        strokeOpacity:0.5,
        strokeWeight: 6,
        fillColor:'blue',
        fillOpacity:0.5,
        strokeStyle: 'solid',
    });

    // 将新矩形放到地图上
    map.add($rect);

    // 实例化矩形编辑对象
    let rectangleEditor = new AMap.RectangleEditor(map, $rect);
    // 开启矩形编辑
    rectangleEditor.open();
}

// 获取矩形属性
rect.getOptions();

圆形的操作同矩形。

多边形的可编辑设置就不必如此复杂了。仅用PolygonEditor这一个插件就可以较好的在地图上绘制多边形，并编辑。

<script src="https://webapi.amap.com/maps?v=2.0&key=申请的key值&plugin=AMap.PolygonEditor"></script>

代码示例

let polyEditor = new AMap.PolygonEditor(map);
let polygon = null;

polyEditor.setTarget();
polyEditor.open();

polyEditor.on('add', function (e) {
    polygon = e.target;
    polyEditor.addAdsorbPolygons(polygon);
    polygon.on('dblclick', () => {
        polyEditor.setTarget(polygon);
        polyEditor.open();
    })
});

// 重置多边形绘制
$edit.addEventListener('click', function(){
        if(polygon){
            polyEditor.close();
            map.clearMap();
            polygon = null;
        }
        polyEditor.adsorbPolygons = [];  // 清除鼠标在地图上移动展示的历史痕迹圆点
        polyEditor.setTarget();
        polyEditor.open();
    });

// 完成绘制，关闭编辑状态
$editDone.addEventListener('click', function(){
    polyEditor.close();

    // 获取多边形路劲坐标点
    let path = polygon ? polygon.getPath() : [];
    console.log(path);
});