音视频

hd-glasses-app/src/pages/hd_map.vue

@@ -60,7 +60,9 @@ 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 WMTSTileGrid from 'ol/tilegrid/WMTS.js';
+import {get as getProjection} from 'ol/proj.js';
+import {getTopLeft, getWidth} from 'ol/extent.js';
 
 export default {
   data() {
@@ -123,13 +125,15 @@ export default {
       planningVectorLayer: {},
       parentPostMessageData: [],
       isCanDraw: true,
+      from:""
     };
   },
   mounted() {
     console.log(location.href)
 
-    this.page = this.$route.query.page;
-    this.pageType = this.$route.query.type;
+    this.page = getUrlParam("page");
+    this.pageType = getUrlParam("type");
+    this.from = getUrlParam("from");
 
     this.token = getUrlParam("token")
     if (this.token !=null) {
@@ -159,6 +163,11 @@ export default {
         window.addEventListener('message', (event) => {
           this.isCanDraw = false
           if (this.parentPostMessageData.length == 0) {
+            try {
+              console.error(event.data)
+            }catch (e) {
+
+            }
             this.map.removeLayer(this.drawPlanningPathLayer);
             this.parentPostMessageData = event.data;
             this.drawPcPostMessageDataLayer()
@@ -172,9 +181,15 @@ export default {
         window.addEventListener('message', (event) => {
           this.isCanDraw = false
           if (this.parentPostMessageData.length == 0) {
-            this.map.removeLayer(this.drawPlanningPathLayer);
-            this.parentPostMessageData = event.data;
-            this.drawPcPostMessageDataLayer()
+
+            if(event.data instanceof Array){
+              this.map.removeLayer(this.drawPlanningPathLayer);
+              this.parentPostMessageData = event.data;
+              this.drawPcPostMessageDataLayer()
+            }else {
+              this.isCanDraw=true;
+            }
+
           }
         });
         //处理ok
@@ -264,6 +279,62 @@ export default {
         })
       });
 
+
+      // 切片方案（0-18级
+      const projection = getProjection('EPSG:3857');
+      const projectionExtent = projection.getExtent();
+      const size = getWidth(projectionExtent) / 256;
+      const resolutions = new Array(19);
+      const matrixIds = new Array(19);
+      for (let z = 0; z < 19; ++z) {
+        resolutions[z] = size / Math.pow(2, z);
+        matrixIds[z] = "EPSG:3857:" + z;
+      }
+
+
+
+      var style = '';
+      var format = 'image/png';
+      var layerName = 'china:yangjianghedian_dt';
+      let baseParams = ['VERSION', 'LAYER', 'STYLE', 'TILEMATRIX', 'TILEMATRIXSET', 'SERVICE', 'FORMAT'];
+
+      let params = {
+        'VERSION': '1.0.0',
+        'LAYER': layerName,
+        'STYLE': style,
+        'TILEMATRIX': matrixIds,
+        'TILEMATRIXSET': projection,
+        'SERVICE': 'WMTS',
+        'FORMAT': format
+      };
+      var url = process.env.VUE_APP_MAP_URL + "/gwc/service/wmts?authkey=" + process.env.VUE_APP_MAP_AUTHKEY+"&"
+      for (var param in params) {
+        if (baseParams.indexOf(param.toUpperCase()) < 0) {
+          url = url + param + '=' + params[param] + '&';
+        }
+      }
+      url = url.slice(0, -1);
+
+
+      const wmtsLayer_1 = new TileLayer({
+        opacity: 1, //图层透明度
+        source: new WMTS({
+          url: url,
+          layer: "china:yangjianghedian_dt",
+          matrixSet: 'EPSG:3857',
+          format: 'image/png', // 默认：'image/jpeg'
+          projection: projection,
+          tileGrid: new WMTSTileGrid({
+            origin: getTopLeft(projectionExtent),
+            resolutions: resolutions,
+            matrixIds: matrixIds,
+          }),
+          style: '',
+          wrapX: true
+        })
+      });
+
+
       this.map = new Map({
         target: "map",
         layers: [
@@ -272,13 +343,14 @@ export default {
           //     url: "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}",
           //   }),
           // }),
-          wmsLayer_1,
+          wmtsLayer_1,
           wmsLayer_0,
         ],
         view: new View({
-          projection: "EPSG:3857",
+          resolutions: resolutions,
+          projection: projection,
           center: [12497018.585823221, 2476783.2447665134],
-          zoom: 15,
+          zoom: 16,
         }),
       });
       this.map.on('singleclick', e => {
@@ -480,7 +552,14 @@ export default {
       const center = ol.proj.transform(this.selectPoint, 'EPSG:3857', 'EPSG:4326');
       console.log("================center: " + JSON.stringify(center))
       const result = JSON.stringify(center)
-      location.href = "uniwebview://action?function=addAlarmPoint&params1=" + result;
+
+
+      if(this.from=="pc"){
+        window.parent.postMessage(result, "*");
+      }else {
+        location.href = "uniwebview://action?function=addAlarmPoint&params1=" + result;
+      }
+
     },
     pcPlanningPath() {
       //https://blog.csdn.net/Raccon_/article/details/127491268
@@ -552,12 +631,16 @@ export default {
               let pointList = []
 
               featureGeoJson.geometry.coordinates.map(item => {
-                const _item = ol.proj.transform(item, 'EPSG:3857', 'EPSG:4326');
-                pointList.push(_item)
+                console.log(item)
+                item.map(_item => {
+                  const _item1 = ol.proj.transform(_item, 'EPSG:3857', 'EPSG:4326');
+                  pointList.push(_item1)
+                })
+
               })
               console.log(pointList)
 
-              window.parent.postMessage(JSON.stringify(pointList), "*");
+              window.parent.postMessage(JSON.stringify([pointList]), "*");
 
             })
             .catch(() => {
@@ -833,6 +916,8 @@ export default {
     drawPcPostMessageDataLayer() {
       const tempGeometryList = []
 
+      console.log(this.parentPostMessageData)
+
       this.parentPostMessageData.map(item => {
         tempGeometryList.push(ol.proj.transform(item, 'EPSG:4326', 'EPSG:3857'))
       })