地图优化

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

@@ -65,6 +65,10 @@ import GeoJSON from 'ol/format/GeoJSON'
 import service from "@/utils/service";
 import {appInit, getStatisFileUrl,GetQueryString,getUrlParam} from "../utils/publicFun";
 import dayjs from "dayjs"
+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() {
@@ -172,8 +176,7 @@ export default {
       patrolInstanceId: "",
       moveIndex: 0,
       pointMoveTimer:null,
-      mapZoom:15,
-      busId:""
+      mapZoom:15
     };
   },
   mounted() {
@@ -320,17 +323,60 @@ export default {
       });
 
 
-      const wmsLayer_1 = new TileLayer({
-        source: new TileWMS({
-          // 设置 Geoserver 服务的 URL
-          url: process.env.VUE_APP_MAP_URL + "/wms",
-          params: {
-            LAYERS: "china:yangjianghedian_dt",
-            TILED: true
-          }
+      // 切片方案（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: [
@@ -339,13 +385,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: this.mapZoom,
+          zoom: 16,
         }),
       });
       this.map.on('singleclick', e => {
@@ -1019,7 +1066,6 @@ export default {
               this.map.getView().animate({
                 center:startPoint,
                 duration:1000,
-                zoom:this.mapZoom
               })
             }
             _list.push(record.location.split(","))