Merge remote-tracking branch 'origin/master'

src/components/Map/YztMap/index.vue

@@ -59,10 +59,22 @@ watch(
     }
 );
 const mapList = reactive({
-  satellite2: ['YZT1715739306532', '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,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/';
@@ -189,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({
@@ -236,30 +233,32 @@ 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);
     });
   }
 
   // 请求接口获取地图信息
   getCapabilities(code) {
-    return axios.get(commonUrl + code + '?SERVICE=WMTS&REQUEST=GetCapabilities');
+    return axios.get(commonUrl + code + '?SERVICE=WMTS&REQUEST=GetCapabilities', {
+      headers: globalHeaders()
+    });
   }
 
   // 请求地图图片加载图层
-  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,
@@ -270,18 +269,40 @@ 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,
       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);
   }
 
@@ -552,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();
     }
@@ -704,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) {
@@ -713,7 +728,7 @@ export class olMap {
   }
   /**
    *
-   * @param {Geojon} chaozhou 根据geojson对象创建Featrue对象
+   * @param {Geojon} chaozhou 根据geoJson对象创建Featrue对象
    * @returns VectorLayer
    */
   createVecByJson(json, options) {
@@ -777,7 +792,7 @@ export class olMap {
             width: 2
           })
         }),
-        zIndex: options.zIndex ? options.zIndex : 99
+        zIndex: options.zIndex ? options.zIndex : -97
       });
       // // 合并区边界
       // const format = new GeoJSON();

src/views/event/detail.vue

@@ -49,7 +49,7 @@
               <div class="event-data-item-value">
                 <dict-tag
                   :options="mm_event_level"
-                  :value="eventInfo.event_level || '0'"
+                  :value="eventInfo.event_level"
                 />
               </div>
             </div>

src/views/login.vue

@@ -19,7 +19,7 @@
             <van-field
                 v-model="form.password"
                 class="common-field"
-                type="password" 
+                type="password"
                 label="密码"
                 placeholder="请输入密码"
                 :rules="rules.password"
@@ -64,8 +64,8 @@ const rules = reactive({
 
 // 表单数据
 const form = ref({
-    username: 'admin',
-    password: 'admin123',
+    username: '',
+    password: '',
     code: '',
     uuid: '',
     tenantId: "000000",