粤政图 加载图层优化

src/components/Map/YztMap/index.vue

@@ -81,10 +81,22 @@ watch(
   }
 );
 const mapList = reactive({
-  satellite2: ['YZT1712111943104', 'YZT1695608158269'],
-  satellite3: ['YZT1708679726700', 'YZT1695608158269'],
-  imageMap: ['YZT1640925052482', 'YZT1695608158269'],
-  imageMap2: ['YZT1640925052482', 'YZT1695608158269']
+  satellite2: [
+    { layer: 'map', code: 'YZT1712111943104', zIndex: '-99', visible: true },
+    { layer: 'annotation', code: 'YZT1695608158269', zIndex: '-98', visible: true }
+  ],
+  satellite3: [
+    { layer: 'map', code: 'YZT1708679726700', zIndex: '-99', visible: true },
+    { layer: 'annotation', code: 'YZT1695608158269', zIndex: '-98', visible: true }
+  ],
+  imageMap: [
+    { layer: 'map', code: 'YZT1640925052482', zIndex: '-99' },
+    { layer: 'annotation', code: 'YZT1695608158269', zIndex: '-98', visible: true }
+  ],
+  imageMap2: [
+    { layer: 'map', code: 'YZT1640925052482', zIndex: '-99', visible: true },
+    { layer: 'annotation', code: 'YZT1695608158269', zIndex: '-98', visible: true }
+  ]
 });
 // 监听地图类型变化
 watch(

src/utils/olMap/olMap.ts

@@ -1,7 +1,7 @@
 // 引入OpenLayers的主模块
 import Map from 'ol/Map';
 import View from 'ol/View';
-import TileState from 'ol/TileState'
+import TileState from 'ol/TileState';
 import Feature from 'ol/Feature';
 import Point from 'ol/geom/Point';
 import VectorLayer from 'ol/layer/Vector';
@@ -191,17 +191,12 @@ export class olMap {
     // 添加新的图层
     if (Array.isArray(options.id)) {
       for (const layer of options.id) {
-        if (typeof layer === 'string') {
-          await this.formatXml(layer); // 等待当前 layer 处理完成
-        } else {
-          await this.formatXml(layer.id, layer.minZoom, layer.maxZoom, layer.zIndex, layer.visible); // 等待当前 layer 处理完成
-        }
+        await this.formatXml(layer);
       }
     } else if (options.id === 'tianditu') {
       await this.formatXml2();
     } else if (options.id) {
-      // 如果 options.id 不是数组，但确实是一个图层，则直接处理
-      await this.formatXml(options.id, options.minZoom, options.maxZoom, options.zIndex, options.visible);
+      await this.formatXml(options);
     }
     // 创建Vector层并添加到地图上
     this.vectorLayer = new VectorLayer({
@@ -238,18 +233,18 @@ export class olMap {
     }
     return `${baseUrl}${dataType}_${projType}/wmts?${paramsStr.slice(0, -1)}`;
   }
-  formatXml(code: string, minZoom?: number, maxZoom?: number, zIndex?: number, visible?: boolean) {
+  formatXml(options) {
     const xml = new WMTSCapabilities();
-    return this.getCapabilities(code).then((lists) => {
-      const geojson = xml.read(lists.data);
-      const data = geojson.Contents.Layer[0];
+    return this.getCapabilities(options.code).then((res) => {
+      const geoJson = xml.read(res.data);
+      const data = geoJson.Contents.Layer[0];
       const layerParam = {
         layerName: data.Abstract,
         styleName: data.Identifier,
         tilematrixset: data.TileMatrixSetLink[0].TileMatrixSet,
         format: data.Format[0]
       };
-      this.createWmsLayer(code, layerParam, minZoom, maxZoom, zIndex, visible);
+      this.createWmsLayer(options, layerParam);
     });
   }
 
@@ -261,9 +256,9 @@ export class olMap {
   }
 
   // 请求地图图片加载图层
-  createWmsLayer(code, layerParam, minZoom = 0, maxZoom, zIndex = -1, visible = true) {
+  createWmsLayer(options, layerParam) {
     const source = new WMTS({
-      url: commonUrl + code,
+      url: commonUrl + options.code,
       crossOrigin: 'Anonymous',
       layer: layerParam.layerName,
       style: layerParam.styleName,
@@ -275,13 +270,12 @@ export class olMap {
         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']
       }),
-      // 关键修改：自定义瓦片加载函数
       tileLoadFunction: function (tile, src) {
         const xhr = new XMLHttpRequest();
         xhr.open('GET', src);
 
         // 添加自定义 Headers
-        const headers = globalHeaders()
+        const headers = globalHeaders();
         xhr.setRequestHeader('Authorization', headers.Authorization);
         xhr.setRequestHeader('clientid', headers.clientid);
 
@@ -303,15 +297,12 @@ export class olMap {
       }
     });
     const layer = new TileLayer({
-      name: code,
       source: source,
-      zIndex: zIndex,
-      minZoom: minZoom,
-      maxZoom,
-      visible: visible
+      zIndex: options.zIndex,
+      visible: options.visible
     });
-    layer.set('layerName', code);
-
+    layer.set('layerName', options.layer);
+    layer.set('id', options.code);
     this.map.addLayer(layer);
   }
 
@@ -582,32 +573,26 @@ export class olMap {
   // 切换图层
   async replaceLayers(newLayers, loadendFunc) {
     // 遍历当前的所有图层并移除它们
-    this.map.getLayers().forEach((layer) => {
-      this.map.removeLayer(layer);
+    const layers = this.map.getLayers();
+    const layerArray = layers.getArray().slice();
+    layerArray.forEach((layer) => {
+      // 标注现在都是用同一个暂不移除'annotation'
+      if (!!layer && ['map'].includes(layer.get('layerName'))) {
+        layer.getSource().clear();
+        layer.dispose();
+        this.map.removeLayer(layer);
+      }
     });
 
     if (Array.isArray(newLayers)) {
       for (const layer of newLayers) {
-        if (typeof layer === 'string') {
-          await this.formatXml(layer); // 等待当前 layer 处理完成
-        } else {
-          await this.formatXml(layer.id, layer.minZoom, layer.maxZoom, layer.zIndex, layer.visible); // 等待当前 layer 处理完成
-        }
+        await this.formatXml(layer);
       }
+    } else if (newLayers.id === 'tianditu') {
+      await this.formatXml2();
     } else {
-      // 如果 options.id 不是数组，但确实是一个图层，则直接处理
-      await this.formatXml(newLayers.id, newLayers.minZoom, newLayers.maxZoom, newLayers.zIndex, newLayers.visible);
+      await this.formatXml(newLayers);
     }
-    // 创建Vector层并添加到地图上
-    this.vectorLayer = new VectorLayer({
-      source: new VectorSource({
-        features: []
-      })
-    });
-    this.map.addLayer(this.vectorLayer);
-    const point = JSON.parse(JSON.stringify(this.markers));
-    this.markers = [];
-    this.addMarker(point);
     if (loadendFunc) {
       loadendFunc();
     }
@@ -734,7 +719,7 @@ export class olMap {
     this.map.addOverlay(this.infoWindow);
   }
 
-  hideInfo(flag) {
+  hideInfo(flag?: boolean) {
     this.map.removeOverlay(this.infoWindow);
     this.infoWindow = null;
     if (!!flag && this.select) {
@@ -743,7 +728,7 @@ export class olMap {
   }
   /**
    *
-   * @param {Geojon} chaozhou 根据geojson对象创建Featrue对象
+   * @param {Geojon} chaozhou 根据geoJson对象创建Featrue对象
    * @returns VectorLayer
    */
   createVecByJson(json, options) {
@@ -807,7 +792,7 @@ export class olMap {
             width: 2
           })
         }),
-        zIndex: options.zIndex ? options.zIndex : 99
+        zIndex: options.zIndex ? options.zIndex : -97
       });
       // // 合并区边界
       // const format = new GeoJSON();