WMTS

src/views/gis/layout/index.vue

@@ -35,6 +35,12 @@ import {useRouter, useRoute} from 'vue-router'
 import {ElMessage, ElMessageBox} from "element-plus";
 import RouterViewCom from '@/layout/router-view.vue'
 import store from "@/store";
+import * as source from "ol/source";
+import * as layer from "ol/layer";
+import * as proj from "ol/proj";
+import * as extent from "ol/extent";
+import WMTSTileGrid from "ol/tilegrid/WMTS";
+import WMTSSource from "ol/source/WMTS";
 
 export default defineComponent({
   name: '',
@@ -54,6 +60,46 @@ export default defineComponent({
     const mapLoad = (map, func) => {
       state.map = map
       state.mapFunc = func
+      initWMSElement()
+    }
+    const initWMSElement = () => {
+      // 切片方案（0-18级
+      const projection = proj.get('EPSG:4326');
+      const projectionExtent = projection.getExtent();
+      const size = extent.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:4326:" + z;
+      }
+      const _tileWMS = new WMTSSource({
+        url: 'http://192.168.31.19:8082/poiwmts/color/getTile2', // 这里需要替换成你的 WMTS 服务的 URL
+        layer: 'your_layer_name', // 替换为你的图层名称
+        matrixSet: 'EPSG:4326',
+        format: 'image/png',
+        projection: 'EPSG:4326',
+        tileGrid: new WMTSTileGrid({
+          origin: extent.getTopLeft(projectionExtent),
+          resolutions: resolutions, // 这里填写你的分辨率数组
+          matrixIds: matrixIds, // 这里填写你的矩阵ID数组
+        }),
+        style: 'default', // 样式
+        wrapX: true
+      })
+      const layer_Debug = new layer.Tile({
+        source: new source.TileDebug({
+          projection: projection,
+          tileGrid: _tileWMS.getTileGrid(),
+        }),
+        zIndex: 3
+      })
+      const wmts = new layer.VectorTile({
+        source: _tileWMS,
+        zIndex: 2,
+      })
+      state.map.addLayer(wmts)
+      state.map.addLayer(layer_Debug)
     }
     const menuCpt = computed(() => {
       return router.options.routes.filter(v => v.name === store.state.gis.menuRootName)[0].children