vue引用高德地图电子围栏功能

 

<template>

  <div class="main">

    <section class="section">

      <div class="ebox">

        <ButtonGroup>

          <Tooltip content="左键绘制围栏,右键绘制结束退出">

            <Button

              type="info"

              icon="ios-locate-outline"

              :disabled="addFlag"

              @click="drawRectangle"

            >

              绘制围栏</Button

            ></Tooltip

          >

          <!-- <Button

            type="primary"

            icon="ios-create-outline"

            @click="editRectangle"

            >编辑围栏</Button

          > -->

          <!-- <Button type="warning" icon="md-close" @click="cancelRectangle"

            >结束编辑</Button

          > -->

          <Button

            type="success"

            icon="md-checkmark-circle"

            @click="saveRectangle"

            >保存围栏</Button

          >

          <Tooltip content="清空未保存围栏">

            <Button type="error" icon="ios-trash-outline" @click="deleRectangle"

              >重新绘制</Button

            ></Tooltip

          >

        </ButtonGroup>

      </div>

      <!-- 地图 -->

      <div id="container" style="width: 100%; height: 100%" />

      <!-- 控制按钮组 -->

    </section>

  </div>

</template> 

<script>

import {

  addFence,

  getFence,

  setFence,

  delFence,

} from "@/api/totalEquipment/totalEquipmentRequest.js";

export default {

  props: { iotId: String, tabName: String },

  data() {

    return {

      companyId: window.sessionStorage.getItem("companyId"),

      // 地图对象

      map: null,

      // 右键菜单对象

      contextMenu: null,

      centerArr: [113.756232, 23.055855], //地图中心位置，不能为空数组【为空数组会报错】

      path: [], //以前绘制的数据

      paths: [], // 当前绘制的多边形经纬度数组

      polygonItem: [], // 地图上绘制的所有多边形对象

      polyEditors: [], // 新增数据=>所有编辑对象数组

      addFlag: false,

      editFlag: false,

      // 编辑参数对象

      editParams: [],

      // 围栏删除ID

      deleteID: "",

    };

  },

  watch: {},

  created() {},

  mounted() {

    setTimeout(() => {

      //异步加载（否则报错initMap is not defined）

      this.initMap();

      // 初始化数据

      this.init();

    }, 100);

  },

  methods: {

    // 地图初始化

    initMap() {

      this.map = new AMap.Map("container", {

        resizeEnable: true, // 窗口大小调整

        center: this.centerArr, // 中心

        zoom: 15, //放大级别

        showLabel: true, // 是否显示地图文字标记

        willReadFrequency: true,

      });

      // 创建右键菜单

      this.contextMenu = new AMap.ContextMenu();

      const that = this;

      this.contextMenu.addItem(

        "编辑",

        function () {

          that.editParams.map((item) => {

            that.editRectangle(item);

          });

        },

        0

      );

      this.contextMenu.addItem(

        "删除",

        function () {

          if (that.editParams != "" && that.editParams.length > 1) {

            that.$Modal.confirm({

              title: "删除确认",

              content: "<p>还有正在编辑的电子围栏尚未保存,请问是否保存?</p>",

              okText: "继续删除",

              cancelText: "保存",

              onOk: () => {

                this.delFence();

              },

              onCancel: () => {

                that.saveRectangle(that.deleteID);

              },

            });

          } else {

            this.delFence();

          }

        },

        1

      );

      // 添加工具栏

      this.map.plugin(["AMap.ToolBar", "AMap.Scale", "AMap.Geocoder"], () => {

        const toolbar = new AMap.ToolBar(); // 工具条

        const scale = new AMap.Scale(); // 比例尺

        this.map.addControl(toolbar);

        this.map.addControl(scale);

        new AMap.Geocoder({

          radius: 1000,

        });

      });

    },

    // 绘制多边形

    drawRectangle() {

      this.addFlag = true;

      const This = this;

      let mouseTool = new AMap.MouseTool(This.map);

      mouseTool.polygon({

        //polygon：绘制多边形【线段：polyline;矩形：rectangle;圆：circle】

        strokeColor: "red",

        strokeOpacity: 0.4,

        strokeWeight: 6,

        fillColor: "#1791fc",

        fillOpacity: 0.2,

        // strokeStyle还支持 solid

        strokeStyle: "solid",

        // strokeDasharray: [30,10],

      });

      mouseTool.on("draw", function (event) {

        // console.log(event);

        // event.obj 为绘制出来的覆盖物对象

        let polygonItem = event.obj;

        let paths = polygonItem.getPath(); //取得绘制的多边形的每一个点坐标

        // console.log('覆盖物对象绘制完成各个点的坐标', paths, event);

        let path = []; // 编辑的路径

        paths.forEach((v) => {

          path.push([v.lng, v.lat]);

        });

        This.paths.push(path); //将新增数据放入paths数组里

        // This.editRectangle();//绘制完成,默认进入编辑状态

        // mouseTool.close();

        // This.mapNaNpxove(event.obj); // 删除多边形

      });

    },

    // 编辑围栏

    editRectangle(obj) {

      const path = obj.deviceFence;

      //新增的进入编辑状态

      let polygon = new AMap.Polygon({

        path: path,

        strokeColor: "#FF33FF",

        strokeWeight: 6,

        strokeOpacity: 0.2,

        fillOpacity: 0.2,

        fillColor: "#1791fc",

        zIndex: 50,

      });

      this.map.add(polygon);

      this.polygonItem.push(polygon);

      // 缩放地图到合适的视野级别

      this.map.setFitView([polygon]);

      const that = this;

      this.polyEditor = new AMap.PolyEditor(this.map, polygon);

      this.polyEditor.open();

      this.polyEditors.push(this.polyEditor);

      this.polyEditor.on("end", function (event) {

        // console.info("触发事件： end", event);

        // console.info("end修改后的经纬度：", polygon.getPath());

        const paths = []; //编辑的路径

        let path = polygon.getPath();

        path.forEach((v) => {

          paths.push([v.lng, v.lat]);

        });

        that.editParams.map((item) => {

          if (item.id == obj.id) {

            item.deviceFence = paths;

          }

        });

      });

    },

    // 删除围栏

    delFence() {

      delFence(this.deleteID).then((res) => {

        // console.log(res);

        this.$Message.success(res.msg);

        this.deleteID = "";

        that.editParams = [];

        this.init();

      });

    },

    // 结束编辑状态

    cancelRectangle() {

      this.polyEditors.forEach((item) => {

        item.close();

      });

    },

    //保存围栏

    saveRectangle(val) {

      // 结束编辑状态

      this.polyEditors.forEach((item) => {

        item.close();

      });

      // console.log(this.path);

      // console.log(this.paths);

      if (this.editParams != "") {

        if (val && val == this.deleteID) {

          let i = this.editParams.findIndex((item) => item.id == val);

          this.editParams.splice(i, 1);

          // console.log(this.editParams);

        }

        setFence(this.editParams).then((res) => {

          // console.log(res);

          this.$Message.success(res.msg);

          this.editParams = [];

          if (this.paths == "") {

            this.init();

          }

        });

      }

      if (this.paths != "") {

        var num = this.path.length + this.paths.length;

        if (num > 3) {

          return this.$Message.info("请勿保存超过3个电子围栏!");

        }

        var params = {

          companyId: this.companyId,

          iotId: this.iotId,

        };

        addFence(params, this.paths).then((res) => {

          // console.log(res);

          this.paths = [];

          this.polygonItem = [];

          this.init();

          this.$Message.success(res.msg);

        });

      }

    },

    // 重新绘制

    deleRectangle() {

      // 结束编辑状态

      this.polyEditors.forEach((item) => {

        item.close();

      });

      this.init();

    },

    //获取后台数据

    init() {

      const that = this;

      let params = {

        iotId: this.iotId,

        companyId: this.companyId,

      };

      that.path = [];

      getFence(params).then((res) => {

        that.map.clearMap();

        this.marker = new AMap.Marker({

          position: this.centerArr,

          offset: new AMap.Pixel(-13, -30),

          icon: new AMap.Icon({

            image:

              "http://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",

            size: new AMap.Size(28, 35), //图标大小

            imageSize: new AMap.Size(28, 35),

          }),

        });

        this.marker.setMap(this.map);

        // console.log(res);

        res.map((item) => {

          var polygon = new AMap.Polygon({

            path: item.deviceFence,         

            strokeColor: "#FF33FF",

            strokeWeight: 6,

            strokeOpacity: 0.2,

            fillOpacity: 0.4,

            fillColor: "#1791fc",

            zIndex: 50,

          });

          that.path.push(item.deviceFence);

          that.map.add(polygon);

          //创建右键菜单

          polygon.on("rightclick", function (e) {

            // 设置右键菜单位置

            that.contextMenu.open(that.map, e.lnglat);

            that.editParams.push(item);

            that.deleteID = item.id;

          });

          that.map.setFitView();

        });

      });

    },

  },

};

</script>

问题点:

1.当处理删除时,接口调用全删了,但是界面只清除掉一个围栏图层,init重新调用获取数据接口,也清不掉

2.要按照每个围栏去记录编辑和删除的结果,必定调用接口,但是绘制渲染围栏时,返回结果只有经纬度,并无法携带标识ID

解决:

1.在init()获取数据,渲染地图图层的时候 调用map.clearMap()方法清掉所有图层

2.进入编辑模式时,单击围栏编辑,单个围栏数据对应收集操作,避免所有围栏同时进入编辑模式

原因:1.每次初始化数据时,都会再在地图上渲染一遍图层,而且每删除或编辑新增一个电子围栏的时候,都会初始化一个图层,所以一个电子围栏可能覆盖了很多图层,但是删除围栏的时候只是删掉了一个最新的图层,然后初始化之后就又会覆盖一层,所以初始化渲染围栏时要先把旧的图层清掉

2.当电子围栏进入编辑模式时,只携带了path经纬度,

 所以返回的时候自然不会有Id,所以只能设置右键菜单,单个围栏进入编辑状态,以便调用接口处理编辑逻辑