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

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一遍达到你想要的数据结构。