修改了图层级别限制的问题

src/views/lifeline/bigscreen/Map/tiandituMap.vue

@@ -2,108 +2,213 @@
   <div class="map-container" id="mapContainer2"></div>
 </template>
 <script lang="ts" setup>
-  import { onMounted, ref } from 'vue';
-  import { tiandituVecUrl, tiandituKey, textVecUrl } from '/@/views/lifeline/bigscreen/Map/config';
-  import TileLayer from 'ol/layer/Tile';
-  import XYZ from 'ol/source/XYZ';
-  import { Map, View } from 'ol';
-  import { defaults as Control } from 'ol/control';
-  import { defaults as Interaction } from 'ol/interaction';
-  import { mapCenter } from '/@/views/lifeline/bigscreen/Map/config';
-  import { useMapStore } from '/@/store/modules/map';
-  import { tileLoadFunction } from '/@/views/lifeline/bigscreen/Map/utils/translateColor';
-  // import { parseGeoJson } from 'echarts';
-  //注册emit
-  const emit = defineEmits(['mapready']);
-  const map = ref();
-  const mapStore = useMapStore();
+import { onMounted, ref } from 'vue';
+import { tiandituVecUrl, tiandituKey, textVecUrl } from '/@/views/lifeline/bigscreen/Map/config';
+import TileLayer from 'ol/layer/Tile';
+import XYZ from 'ol/source/XYZ';
+import { Map, View } from 'ol';
+import { defaults as Control } from 'ol/control';
+import { defaults as Interaction } from 'ol/interaction';
+import { mapCenter } from '/@/views/lifeline/bigscreen/Map/config';
+import { useMapStore } from '/@/store/modules/map';
+import { tileLoadFunction } from '/@/views/lifeline/bigscreen/Map/utils/translateColor';
+import { getWidth, getTopLeft } from 'ol/extent.js';
+import TileGrid from 'ol/tilegrid/TileGrid';
+import { get as getProjection } from 'ol/proj.js';
+import { WMTS } from 'ol/source';
+import WMTSTileGrid from 'ol/tilegrid/WMTS';
 
-  /**
-   * 初始化地图服务，初始加载地图为矢量天地图
-   */
-  const initMap = () => {
-    const myMap = new Map({
-      layers: [
-        new TileLayer({
-          className:'blueLayer',//增加className属性
-          source: new XYZ({
-            url: tiandituVecUrl + '&tk=' + tiandituKey,
-          }),
-          zIndex: -1,
-        }),
-        //底图文字
-        new TileLayer({
-            className:'blueLayer',//增加className属性
-          source: new XYZ({
-        url: 'http://t1.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=908404235938aecd5826e630a95c88b0',
-          }),
-          zIndex: -1,
-        }),
-      ],
-      target: 'mapContainer2',
-      interactions: Interaction({
-        doubleClickZoom: false, // 屏蔽双击放大事件
-      }),
-      controls: Control({
-        attribution: false,
-        zoom: false,
-        rotate: false,
-      }), // 隐藏默认的控制器
-      view: new View({
-        zoom: 14,
-        center: mapCenter,
-        projection: 'EPSG:4326',
-        // minResolution: 156543.03392804097,
-        maxZoom: 24,
-        minZoom: 6,
-      }),
-    });
-    const layerOrigin = new TileLayer({
-      preload: 6,
+// import { parseGeoJson } from 'echarts';
+//注册emit
+const emit = defineEmits(['mapready']);
+const map = ref();
+const mapStore = useMapStore();
+
+/**
+ * 初始化地图服务，初始加载地图为矢量天地图
+ */
+
+const projection = getProjection('EPSG:4326'); //坐标系
+const projectionExtent = projection.getExtent();
+const size = getWidth(projectionExtent) / 256;
+const resolutions = new Array(18);
+const matrixIds = new Array(18);
+for (let z = 0; z < 18; ++z) {
+  resolutions[z] = size / Math.pow(2, z);
+  matrixIds[z] = z;
+}
+const tileGrid = new TileGrid({
+  origin: getTopLeft(projection.getExtent()),
+  resolutions: resolutions,
+  matrixIds: matrixIds,
+});
+
+const initMap = () => {
+  const myMap = new Map({
+    // layers: [
+    //   new TileLayer({
+    //     className: 'blueLayer', //增加className属性
+    //     source: new XYZ({
+    //       url: tiandituVecUrl + '&tk=' + tiandituKey,
+    //     }),
+    //     // tileGrid: tileGrid,
+    //     zIndex: -1,
+    //   }),
+    //   //底图文字
+    //   new TileLayer({
+    //     className: 'blueLayer', //增加className属性
+    //     source: new XYZ({
+    //       url: 'http://t1.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=908404235938aecd5826e630a95c88b0',
+    //     }),
+    //     zIndex: -1,
+    //   }),
+    // ],
+    target: 'mapContainer2',
+    interactions: Interaction({
+      doubleClickZoom: false, // 屏蔽双击放大事件
+    }),
+    controls: Control({
+      attribution: false,
+      zoom: false,
+      rotate: false,
+    }), // 隐藏默认的控制器
+    view: new View({
+      zoom: 14,
+      center: mapCenter,
+      projection: 'EPSG:4326',
+      // minResolution: 156543.03392804097,
+      maxZoom: 24,
+      minZoom: 6,
+    }),
+  });
+  const layerOrigin = new TileLayer({
+    preload: 6,
+    source: new XYZ({
+      url: tiandituVecUrl + '&tk=' + tiandituKey,
+      tileLoadFunction: (imageTile, src) => tileLoadFunction(imageTile, src) as any,
+    }),
+    // Opacity: 1,
+    // format: new parseGeoJson(),
+    zIndex: -1,
+    // preload: 4, //预加载
+  });
+  const textLayer = new TileLayer({
+    preload: 6,
+    source: new XYZ({
+      url: textVecUrl + '&tk=' + tiandituKey,
+      tileLoadFunction: (imageTile, src) => tileLoadFunction(imageTile, src) as any,
+    }),
+    // preload: 4, //预加载
+
+    // Opacity: 1,
+    // format: new parseGeoJson(),
+    zIndex: -1,
+  });
+  // const layer = translate(layerOrigin);
+  // myMap.addLayer(layerOrigin);
+  // myMap.addLayer(textLayer); //注记图
+
+  //获取天地图图层
+  const getTDTLayer2 = () => {
+    var url = 'http://t{1-7}.tianditu.gov.cn/vec_w/wmts?';
+    var tk = '&tk=9248d7f5b183142e4f1d5c908fba42e0';
+    var type = 'vec';
+    let tdtLayer = new TileLayer({
       source: new XYZ({
-        url: tiandituVecUrl + '&tk=' + tiandituKey,
-        tileLoadFunction: (imageTile, src) => tileLoadFunction(imageTile, src) as any,
+        crossOrigin: 'anonymous',
+        //url: `http://t{1-7}.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=9248d7f5b183142e4f1d5c908fba42e0`,
+        url:
+          url +
+          tk +
+          '&SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=' +
+          type +
+          '&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILEMATRIX={z}&TILECOL={x}&TILEROW={y}',
+        projection: projection,
+        tileGrid: tileGrid,
       }),
-      // Opacity: 1,
-      // format: new parseGeoJson(),
-      zIndex: -1,
-      // preload: 4, //预加载
     });
-    const textLayer = new TileLayer({
-      preload: 6,
-      source: new XYZ({
-        url: textVecUrl + '&tk=' + tiandituKey,
-        tileLoadFunction: (imageTile, src) => tileLoadFunction(imageTile, src) as any,
-      }),
-      // preload: 4, //预加载
+    return tdtLayer;
+  };
+
+  function getTDTLayer(layerType, idnex) {
+    const TIANDI_KEY = '9248d7f5b183142e4f1d5c908fba42e0';
+    // 对应的值是固定的
+    const layerTypeMap = {
+      SL: ['vec', 'cva'], // [矢量底图, 矢量注记]
+      YX: ['img', 'cia'], // [影像底图, 影像注记]
+      DX: ['ter', 'cta'], // [地形晕渲, 地形注记]
+    };
+    // var layerType = 'SL';
 
-      // Opacity: 1,
-      // format: new parseGeoJson(),
-      zIndex: -1,
+    // c: 经纬度投影 w: 球面墨卡托投影
+    const matrixSet = 'c';
+    return new TileLayer({
+      className: 'blueLayer',
+      source: new WMTS({
+        url: `http://t{0-6}.tianditu.com/${layerTypeMap[layerType][idnex]}_${matrixSet}/wmts?tk=${TIANDI_KEY}`,
+        layer: layerTypeMap[layerType][idnex],
+        matrixSet: matrixSet,
+        style: 'default',
+        crossOrigin: 'anonymous', // 解决跨域问题 如无该需求可不添加
+        format: 'tiles',
+        wrapX: true,
+        tileGrid: new WMTSTileGrid({
+          origin: getTopLeft(projectionExtent),
+          resolutions: resolutions,
+          matrixIds: [
+            '0',
+            '1',
+            '2',
+            '3',
+            '4',
+            '5',
+            '6',
+            '7',
+            '8',
+            '9',
+            '10',
+            '11',
+            '12',
+            '13',
+            '14',
+            '15',
+            '16',
+            '17',
+            '18',
+            '19',
+            '20',
+            '21',
+            '22',
+            '23',
+            '24',
+          ],
+        }),
+      }),
     });
-    // const layer = translate(layerOrigin);
-    // myMap.addLayer(layerOrigin);
-    // myMap.addLayer(textLayer); //注记图
+  }
 
-    map.value = myMap;
-    mapStore.setMap(map.value);
-    emit('mapready', map.value);
-  };
-  onMounted(() => {
-    initMap();
-  });
+  myMap.addLayer(getTDTLayer('SL', 0));
+  myMap.addLayer(getTDTLayer('SL', 1));
+  window.map = myMap;
+  map.value = myMap;
+  mapStore.setMap(map.value);
+  emit('mapready', map.value);
+};
+onMounted(() => {
+  initMap();
+});
 </script>
 <style>
-.blueLayer{
-    filter: grayscale(100%) sepia(11%) invert(100%) saturate(200%);
+.blueLayer {
+  filter: grayscale(100%) sepia(11%) invert(100%) saturate(200%);
 }
 </style>
 <style lang="less" scoped>
-  .map-container {
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    background-color: black;
-    top: -20px;
-  }
+.map-container {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  background-color: black;
+  top: -20px;
+}
 </style>