电子围栏：VUE实现高德地图的电子围栏绘制

首先要高德地图需要的前端依赖：

//首先需要安装高德地图的前端依赖
npm install vue-amap@0.5.10
//我的node版本是v14.21.3
//npm版本是6.14.18

创建自己的vue页面并引入相应的依赖：

<template>
	<div>
	  <div id="mapContainer" style="width: 100vw; height: 100vh;">
    </div>
    <div class="drawBtns">
      <el-button type="primary" round @click="clearAll">清空</el-button>
      <el-button type="primary" round @click="circleClick">{
  {isCircle ? "圆形" :"绘制中"}}</el-button>
      <el-button type="primary" round @click="polygonClick">{
  {isPolygon ? "多边形" :"绘制中"}}</el-button>
    </div>
	</div>
  </template>
  
  <script>
export default {
	data() {
	  return {
		center: [116.397428, 39.90923], // 地图中心点
		zoom: 11,
		map: undefined,
    //当前的绘制图层
    currentOverlay:undefined,
    //控制绘制圆形的变量
    isCircle:true,
    //控制绘制多变型的变量
    isPolygon:true,
    activeEditor:undefined,
    editorOptions:undefined
	};
	},
	mounted() {
    setTimeout(()=>{
      this.initMap()
    },500)
	},
	methods: {
    //地图初始化
	  initMap() {
		  this.map = new AMap.Map('mapContainer', {
		    center: this.center,
		    zoom: this.zoom,
		    layers: [
		  	new AMap.TileLayer() // 默认普通地图图层
		    ]
		  });
      // 初始化 MouseTool
       // 加载 MouseTool 插件
       //MouseTool 是一个鼠标工具插件，用于在地图上绘制图形（如点、线、多边形等），并支持简单的交互。
       AMap.plugin('AMap.MouseTool', () => {
        console.log("Mous