vue中使用高德地图画电子围栏

思路:根据项目的需求，给某个区域画电子围栏，且必须得在规定区域内画，所有首先得有个区域先规定好，从后台获取规定区域的坐标点，让后就是画矩形，这里主要是画矩形，在不在圈内，前端做校验，后端也要做检验。

data:

map: {},polygon: {},//用来画区域的mouseTool: {}, //画图工具centerArr: [], //中心点pathArr: [], //用来画区域的点drawPoint: [], //后端传过来的划默认工作区域点的坐标

methods:

//得到数据后初始化地图initMap() {this.map = new AMap.Map("container", {resizeEnable: true,center: this.centerArr,zoom: 20});this.polygon = new AMap.Polygon({map: this.map,fillOpacity: 0.4,path: this.pathArr});this.mouseTool = new AMap.MouseTool(this.map);this.draw();//监听draw事件可获取画好的覆盖物this.mouseTool.on("draw", e => {//e.obj.getPath() --这里是画出来的点//每次只能传四个点，所以先清空this.addForm.pointArr = [];//画出来的坐标放在存放在数组里面e.obj.getPath().forEach(item => {this.addForm.pointArr.push([String(item.lng), String(item.lat)]);});});this.map.setFitView();},//画矩形方法draw() {this.mouseTool.rectangle({fillColor: "#00b0ff",strokeColor: "#80d8ff"//同Polygon的Option设置});}, //关闭并清除你之前画的图像closeAndClear() {this.mouseTool.close(true);this.addForm.pointArr = [];},

总结：具体的问题具体分析，画圈，划线，都是差不多类似的，只是换一个方式而已。

遇到的问题：就是重新编辑的时候，再去渲染曾经画好的矩形，数据会被高德地图重新更改一下结构，v-model绑定的数据所有会出现你想不到的问题。所以需要你重新对数据push一遍达到你想要的数据结构。