粤政图图层加载逻辑修改

src/utils/olMap/olMap.ts

@@ -1,6 +1,7 @@
 // 引入OpenLayers的主模块
 import Map from 'ol/Map';
 import View from 'ol/View';
+import TileState from 'ol/TileState'
 import Feature from 'ol/Feature';
 import Point from 'ol/geom/Point';
 import VectorLayer from 'ol/layer/Vector';
@@ -38,6 +39,7 @@ import { createBox } from 'ol/interaction/Draw';
 import * as turf from '@turf/turf';
 import { nanoid } from 'nanoid';
 import carImg from '@/assets/images/car.png';
+import { globalHeaders } from '@/utils/request';
 
 const tk = 'a8df87f1695d224d2679aa805c1268d9';
 const commonUrl = import.meta.env.VITE_APP_BASE_API2 + 'api/oneShare/proxyHandler/gd/';
@@ -253,7 +255,9 @@ export class olMap {
 
   // 请求接口获取地图信息
   getCapabilities(code) {
-    return axios.get(commonUrl + code + '?SERVICE=WMTS&REQUEST=GetCapabilities');
+    return axios.get(commonUrl + code + '?SERVICE=WMTS&REQUEST=GetCapabilities', {
+      headers: globalHeaders()
+    });
   }
 
   // 请求地图图片加载图层
@@ -270,7 +274,33 @@ export class olMap {
         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']
-      })
+      }),
+      // 关键修改：自定义瓦片加载函数
+      tileLoadFunction: function (tile, src) {
+        const xhr = new XMLHttpRequest();
+        xhr.open('GET', src);
+
+        // 添加自定义 Headers
+        const headers = globalHeaders()
+        xhr.setRequestHeader('Authorization', headers.Authorization);
+        xhr.setRequestHeader('clientid', headers.clientid);
+
+        xhr.responseType = 'arraybuffer'; // 确保支持图片二进制数据
+        xhr.onload = function () {
+          if (xhr.status === 200) {
+            const type = xhr.getResponseHeader('Content-Type');
+            const blob = new Blob([xhr.response], { type: type });
+            const url = window.URL.createObjectURL(blob);
+            tile.getImage().src = url; // 将图像数据绑定到瓦片
+          } else {
+            tile.setState(TileState.ERROR); // 处理请求失败
+          }
+        };
+        xhr.onerror = function () {
+          tile.setState(TileState.ERROR);
+        };
+        xhr.send();
+      }
     });
     const layer = new TileLayer({
       name: code,