地图接口

ZZJ

2021-11-24 bbe33e5fd87e5961fdab804bfb0b4cf354e0c5b2

 src/pages/internetEquipment/module/mapIndex.vue

@@ -13,6 +13,8 @@
</template>

<script>
import { getHelemtData, getZones, createZones } from "@/api/helemt";

import "ol/ol.css";
import Feature from "ol/Feature";
import Point from "ol/geom/Point";
@@ -41,6 +43,9 @@
let myModify = {};

export default {
  created() {
    this.getNodeData();
  },
  data() {
    return {
      showBtn: false,
@@ -59,17 +64,7 @@
      rangeArr: [],
      zoom: 15,
      center: [116.06667, 39.66667],
      polygonArr: [
        {
          data: [
            [12919660.904416857, 4817401.4907109635],
            [12921041.54824026, 4817277.28054],
            [12920195.963614853, 4816775.662541878],
            [12919493.698417485, 4816785.2171704145],
          ],
          id: "1",
        },
      ],
      polygonArr: [],
      polyFeature: [],
      drawStore: [],
      modifyStore: [],
@@ -79,8 +74,38 @@
    this.initMap();
  },
  methods: {
    initMap() {
    async getNodeData() {},
    async initMap() {
      // 获取节点
      const res = await getHelemtData();
      this.nodeArr = [];
      res.data.items.forEach((item) => {
        this.nodeArr.push({
          data: [item.lng, item.lat],
          id: item.device_sn,
          color: item.is_out_bound == 0 ? "绿" : "红",
        });
      });

      // 获取区域
      const res2 = await getZones();
      if (res2.data && res2.data.items && res2.data.items.length > 0) {
        this.polygonArr = res2.data.items.map((obj) => {
          obj.data = obj.dots.map((item) => {
            return transform([item[0], item[1]], "EPSG:4326", "EPSG:3857");
          });
          return obj;
        });
      }
      console.log(this.polygonArr);

      // 设置地图中心
      this.center = this.nodeArr[0].data;

      if (this.polygonArr.length > 0) {
      this.initPolygonArr();
      }

      const vectorSource = new VectorSource({
        features: this.polyFeature,
      });
@@ -176,9 +201,7 @@
    location() {
      const view = myMap.getView();
      view.setZoom(this.zoom);
      view.setCenter(
        transform([116.06667, 39.66667], "EPSG:4326", "EPSG:3857")
      );
      view.setCenter(transform(this.center, "EPSG:4326", "EPSG:3857"));
    },
    drawPolygon() {
      this.showBtn = true;
@@ -188,10 +211,26 @@
      });
      myDraw = draw;
      draw.on("drawend", (event) => {
        let id =
        let id;

        /* if (this.polygonArr.length > 0) {
          id =
          this.drawStore.length > 0
            ? +this.drawStore[this.drawStore.length - 1].id + 1
            : +this.polygonArr[this.polygonArr.length - 1].id + 1;
        } else {
          id = 1;
        } */

        if (this.drawStore.length > 0) {
          id = +this.drawStore[this.drawStore.length - 1].id + 1;
        } else {
          id =
            this.polygonArr.length > 0
              ? +this.polygonArr[this.polygonArr.length - 1].id + 1
              : "1";
        }

        event.feature.id = id;
        this.drawStore.push({
          id,
@@ -232,7 +271,7 @@
      this.drawStore = [];
      this.modifyStore = [];
    },
    savePoly() {
    async savePoly() {
      myMap.removeInteraction(myDraw);
      myMap.removeInteraction(myModify);
      this.showBtn = false;
@@ -250,12 +289,52 @@
        });
        this.modifyStore = [];
      }
      const arrData = this.polygonArr.map((item) => {
        let name = item.name ? item.name : "";
        console.log(item);
        let data = item.data.map((arr) => {
          arr = transform([arr[0], arr[1]], "EPSG:3857", "EPSG:4326");
          return arr.join(",");
        });
        data = data.join("&");
        return {
          name,
          dots: data,
          id: item.id,
        };
      });
      const res = await createZones({ dots_arr: arrData });
      console.log(res);
    },
  },
  watch: {
    nodeId: {
      handler(val) {
        const arr = this.nodeArr.filter((item) => item.id == val);
      async handler(val) {
        if (!val) {
          if (this.rangeArr.length > 0) {
            this.rangeArr.forEach((item) => {
              myVectorSource.removeFeature(item);
            });
            this.rangeArr = [];
          }

          return;
        }

        const res = await getHelemtData({ sn: val });
        const arr = [];
        if (res.data.items && res.data.items.length > 0) {
          res.data.items.forEach((obj) => {
            this.nodeArr.forEach((item) => {
              if ((item.id = obj.device_sn)) {
                arr.push(item);
              }
            });
          });
        }

        console.log(this.rangeArr);

        if (this.rangeArr.length > 0) {
          this.rangeArr.forEach((item) => {
            myVectorSource.removeFeature(item);