vue3+高德地图实现，创建和编辑多边形、圆形覆盖物（完整实现）

目录

一、绘制

1.形状选择

2.绘制图形

二、编辑

1.定义所需变量

2.获取需要编辑的覆盖物数据 fenceData并渲染

3.上述监听改动事件↓↓↓

4.上述监听编辑结束事件

5.鼠标右击结束事件

---

初始化地图不再赘述，参考这篇文章

vue3中引入高德地图初始化，并添加、删除markerhttp://t.csdnimg.cn/1ZXa7

先看效果图

注意：为实现编辑功能，在引入地图时，需要配置以下几个插件

'AMap.MouseTool', 'AMap.PolyEditor', 'AMap.CircleEditor'

初始化地图后，得到map实例，下文中多出有用到

一、绘制

1.形状选择

简单写个选择覆盖物形状的功能，如下拉框

<el-select v-model="fenceInfo.fenceType" 
        :placeholder="添加"
        @change="shapeChange">
    <el-option v-for="item in options"
        :key="item.value"
        :label="item.label" 
        :value="item.value" />
</el-select>

/* 选择形状绘制电子围栏*/
	let options = ref([{
		value: 1,
		label: '多边形',
	}, {
		value: 2,
		label: '圆形,
	}, ])

2.绘制图形

选择对应的形状后，初始化绘制工具，并监听绘制完成事件

操作方法：选择形状后，在地图上使用左键创建形状，右键结束创建

结束创建后，在mouseTool.value.on监听方法中获取到对应的覆盖物信息

/