地图相关

2023-12-01 20:08:43 +08:00
parent 89b0ca6caf
commit 4711b7611a
9 changed files with 102 additions and 455 deletions
--- a/hd-glasses-app/public/index.html
+++ b/hd-glasses-app/public/index.html
@@ -1,9 +1,9 @@
 <!DOCTYPE html>
 <html lang="">
 <head>
-    <script type="text/javascript" src="./vconsole.min.js"></script>
+    <script type="text/javascript" src="https://172.16.3.18/static_file/vconsole.min.js"></script>
    <script>
-        var vConsole = new VConsole();
+        // var vConsole = new VConsole();
        console.log('Hello world');
    </script>
    <meta charset="utf-8">
--- a/hd-glasses-app/src/pages/hd_map_pc_draw_area.vue
+++ b/hd-glasses-app/src/pages/hd_map_pc_draw_area.vue
@@ -18,7 +18,9 @@
      <div class="alarmDetailsOverlayWrapper" @click.stop>
        <div class="alarmDetailsBox">
          <div class="title">{{ alarmDetailsData.title }}</div>
-          <div class="alarmDetailsBoxItem"><span>报警类型:</span><span>{{ alarmDetailsData.alarmCategory_dictText }}</span>
+          <div class="alarmDetailsBoxItem"><span>报警类型:</span><span>{{
+              alarmDetailsData.alarmCategory_dictText
+            }}</span>
          </div>
          <div class="alarmDetailsBoxItem"><span>报警时间:</span><span>{{ alarmDetailsData.createTime }}</span></div>
          <div class="alarmDetailsBoxItem"><span>警情内容:</span><span>{{ alarmDetailsData.msgContent }}</span></div>
@@ -46,9 +48,9 @@ import VectorLayer from "ol/layer/Vector";
 import VectorSource from "ol/source/Vector";
 import XYZ from "ol/source/XYZ";
 import {Map, View, Feature} from "ol";
-import {Icon, Fill, Stroke, Style, Circle,Text} from "ol/style";
+import {Icon, Fill, Stroke, Style, Circle, Text} from "ol/style";
 import Overlay from "ol/Overlay";
-import {Point, LineString,Polygon} from "ol/geom.js";
+import {Point, LineString, Polygon} from "ol/geom.js";
 import {getVectorContext} from "ol/render";
 import axios from "axios";
 import TileWMS from "ol/source/TileWMS"
@@ -59,7 +61,7 @@ import * as interaction from 'ol/interaction'; // 交互
 import {OL as ol} from "plot-ol/plottingol";
 import GeoJSON from 'ol/format/GeoJSON'
 import service from "@/utils/service";
-import {appInit, getStatisFileUrl,getUrlParam} from "../utils/publicFun";
+import {appInit, getStatisFileUrl, getUrlParam} from "../utils/publicFun";

 export default {
  data() {
@@ -123,14 +125,15 @@ export default {
      parentPostMessageData: [],
      isCanDraw: true,
      pointsList: "",
+      modify: null
    };
  },
  mounted() {
-    this.page = this.$route.query.page||getUrlParam("page");
-    this.pageType = this.$route.query.type||getUrlParam("type");
+    this.page = this.$route.query.page || getUrlParam("page");
+    this.pageType = this.$route.query.type || getUrlParam("type");

-    this.token = this.$route.query.token ||getUrlParam("token");
-    this.pointsList = this.$route.query.pointsList ||getUrlParam("pointsList");
+    this.token = this.$route.query.token || getUrlParam("token");
+    this.pointsList = this.$route.query.pointsList || getUrlParam("pointsList");
    localStorage.setItem("hd_token", this.token)


@@ -146,18 +149,26 @@ export default {
    this.initMap();

    this.pcDrawType = "Polygon"
-    if(this.pageType=="edit"){
+    if (this.pageType == "add") {
+      this.isCanDraw = true
+      this.pcPlanningPath();
+    } else if (this.pageType == "edit") {
      this.pcDrawType = "Polygon"
      window.addEventListener('message', (event) => {
        this.isCanDraw = true
-        if (this.parentPostMessageData.length == 0) {
-          this.map.removeLayer(this.drawPlanningPathLayer);
-          this.parentPostMessageData = event.data;
-          this.drawPcPostMessageDataLayer()
+        if (event.data instanceof Array) {
+          console.log("接收到父页面数据")
+          console.log(event.data)
+          if (this.parentPostMessageData.length == 0) {
+            // this.map.removeLayer(this.drawPlanningPathLayer);
+            this.parentPostMessageData = event.data;
+            this.pcPlanningPath();
+            // this.drawPcPostMessageDataLayer()
+          }
        }
      });
-      this.pcPlanningPath();
-    }else {
+
+    } else {
      this.isCanDraw = false
      this.pcDrawType = "Polygon"
      window.addEventListener('message', (event) => {
@@ -509,14 +520,11 @@ export default {
      // this.map.removeInteraction(interaction);


-
      // 矢量地图源
      let vectorSource = new VectorSource({
-        features: [
-
-        ],
+        features: [],
      });
-      if(this.parentPostMessageData.length>0){
+      if (this.parentPostMessageData.length > 0) {

        const tempGeometryList = []

@@ -534,7 +542,6 @@ export default {
      }


-
      // 矢量地图
      this.drawPlanningPathLayer = new VectorLayer({
        source: vectorSource,
@@ -546,11 +553,11 @@ export default {
        })
      });

-      let modify = new interaction.Modify({
+      this.modify = new interaction.Modify({
        source: vectorSource
      });

-      this.map.addInteraction(modify);
+      this.map.addInteraction(this.modify);

      // 绘制图形类型
      // Point 点
@@ -563,7 +570,9 @@ export default {
        type: this.pcDrawType
      });

-      this.map.addInteraction(this.draw);
+      if(this.pageType=="add"){
+        this.map.addInteraction(this.draw);
+      }

      // 创建一个Snap控件，并加入到Map对象中
      this.snap = new interaction.Snap({
@@ -571,46 +580,69 @@ export default {
      });


-
-
      this.map.addLayer(this.drawPlanningPathLayer);

      this.map.addInteraction(this.snap);

-      this.draw.on('drawend', (e) => {
-        if (!this.isCanDraw) {
-          return;
-        }
+      this.modify.on('modifyend', function (evt) {
+        // get features:
+        var collection = evt.features;
+        // There's only one feature, so get the first and only one:
+        var featureClone = collection.item(0).clone();

-        Dialog.confirm({
-          title: '绘制完成',
-          message: '取消则会重新绘制',
+        console.log(featureClone)
+
+        const featureGeoJson = JSON.parse(new GeoJSON().writeFeature(featureClone))
+
+        let pointList = []
+
+        featureGeoJson.geometry.coordinates.map(item => {
+          pointList.push(ol.proj.transform(item, 'EPSG:3857', 'EPSG:4326'))
        })
-            .then(() => {
+        console.log(pointList)

-              // on confirm
-              const featureGeoJson = JSON.parse(new GeoJSON().writeFeature(e.feature))
+        window.parent.postMessage(JSON.stringify([pointList]), "*");

-              let pointList = []

-              featureGeoJson.geometry.coordinates.map(item => {
-                const _item = ol.proj.transform(item, 'EPSG:3857', 'EPSG:4326');
-                pointList.push(_item)
-              })
-              console.log(pointList)
-
-              window.parent.postMessage(JSON.stringify(pointList), "*");
-
-            })
-            .catch(() => {
-              // on cancel
-              this.drawPlanningPathLayer.getSource().clear();
-              // this.map.removeLayer(this.drawPlanningPathLayer)
-              // this.map.addLayer(this.drawPlanningPathLayer)
-            });
-        // this.map.removeInteraction(draw); // 在此处清除交互会触发地图默认的双击放大
+        // do something after modifying (e.g. saving):
+        // ...
      });

+      if (this.pageType == "add") {
+        this.draw.on('drawend', (e) => {
+
+          Dialog.confirm({
+            title: '绘制完成',
+            message: '取消则会重新绘制',
+          })
+              .then(() => {
+
+                // on confirm
+                const featureGeoJson = JSON.parse(new GeoJSON().writeFeature(e.feature))
+
+                let pointList = []
+
+                featureGeoJson.geometry.coordinates.map(item => {
+                  console.log(item)
+                  item.map(_item => {
+                    pointList.push(ol.proj.transform(_item, 'EPSG:3857', 'EPSG:4326'))
+                  })
+                })
+                console.log(pointList)
+
+                window.parent.postMessage(JSON.stringify([pointList]), "*");
+
+              })
+              .catch(() => {
+                // on cancel
+                this.drawPlanningPathLayer.getSource().clear();
+                // this.map.removeLayer(this.drawPlanningPathLayer)
+                // this.map.addLayer(this.drawPlanningPathLayer)
+              });
+          // this.map.removeInteraction(draw); // 在此处清除交互会触发地图默认的双击放大
+        })
+      }
+
    },
    clearPcPlanningPath() {

@@ -861,23 +893,21 @@ export default {

      this.map.addLayer(this.drawPlanningPathLayer);

-      service.get(`/api/patrol/area/list`, {
-
-      }).then((res) => {
+      service.get(`/api/patrol/area/list`, {}).then((res) => {
        if (res.status == 200) {
          console.log(res.data.result.records)
-          res.data.result.records.map((record) =>{
+          res.data.result.records.map((record) => {
            console.log(record)
-            this.drawAreaLayer(record.areaName,JSON.parse(record.area))
+            this.drawAreaLayer(record.areaName, JSON.parse(record.area))
          })
        }

      })

    },
-    drawAreaLayer(title,areaList) {
+    drawAreaLayer(title, areaList) {
      console.log(title)
-      areaList=areaList[0]
+      areaList = areaList[0]
      console.log(areaList)

      const tempGeometryList = []
@@ -888,7 +918,7 @@ export default {

      tempGeometryList.push(tempGeometryList[0])

-      const _list=[tempGeometryList]
+      const _list = [tempGeometryList]

      console.log(_list)

@@ -898,7 +928,7 @@ export default {

      const polygonFeature = new Feature({
        geometry: polygonGeometry,
-        name:title
+        name: title
      })

      polygonFeature.setStyle(new Style({
@@ -910,10 +940,10 @@ export default {
          color: '#ffffff00'
        }),
        text: new Text({
-          testAlign:'center',
-          text:title,
-          font:'bold 20px 微软雅黑',
-          fill:new Fill({
+          testAlign: 'center',
+          text: title,
+          font: 'bold 20px 微软雅黑',
+          fill: new Fill({
            color: '#ffa502',
          })
        })