From 4bae5dab64eb643de6900fbff48a62f8eef01363 Mon Sep 17 00:00:00 2001
From: zhufu <17863654727@163.com>
Date: Tue, 13 May 2025 11:18:59 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A6=96=E9=A1=B5=E5=86=9C=E5=8F=91=E9=A6=96?=
 =?UTF-8?q?=E9=A1=B5=E4=BC=98=E5=8C=96=E7=A7=BB=E6=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/sys/exception/Converge.vue       |  19 +-
 src/views/sys/exception/Converge/config.ts |   2 +-
 src/views/sys/exception/Converge/index.vue | 259 ++++++++++-----------
 3 files changed, 147 insertions(+), 133 deletions(-)

diff --git a/src/views/sys/exception/Converge.vue b/src/views/sys/exception/Converge.vue
index 59d14256..057dd25e 100644
--- a/src/views/sys/exception/Converge.vue
+++ b/src/views/sys/exception/Converge.vue
@@ -1,4 +1,5 @@
 <template>
+<a-spin size="large" tip="图层加载中..." :spinning="spinning" wrapperClassName="solid-spin">
   <div class="statistical" id="bg-pan" ref="container">
     <Map
       @onload="handlerOnMapLoad"
@@ -17,6 +18,7 @@
       @handlerQueryIntersectTif="handlerQueryIntersectTif"
       :layer="layerSettings"
       :defaultColor="defaultColor"
+      @changeLoading="changeLoading"
     />
 
     <div style="position: absolute; left: 60px; bottom: 20px; z-index: 1" v-if="false">
@@ -140,6 +142,7 @@
       />
     </div>
   </div>
+</a-spin>
 </template>
 
 <script lang="ts" setup>
@@ -198,6 +201,7 @@
   const preTransformX = ref(0);
   const preTransformY = ref(0);
   const hiddenInfoMap = ref(false)
+  const spinning = ref(false)
 
   watch([x, y], () => {
   if (!startedDrag.value) {
@@ -420,8 +424,12 @@ watchEffect(() => {
 
 
   onMounted(() => {
+    spinning.value = true
     getLayerSettings();
   });
+  const changeLoading = (type: boolean) => {
+    spinning.value = type
+  }
   const goRouter = () => {
     route.push({ path: '/caseoffence/feifacaikuang' })
   }
@@ -527,7 +535,7 @@ watchEffect(() => {
     -ms-user-select: none; /* IE/Edge */
     user-select: none;
     width:100%;
-    height:100vh;
+    height:calc(-80px + 100vh);
     position:relative;
   }
 
@@ -644,7 +652,6 @@ watchEffect(() => {
   .layer-center-container {
     width:285px;
     position: absolute;
-    z-index: 1000;
   }
   .drag-area{
     width:245px;
@@ -692,3 +699,11 @@ watchEffect(() => {
     font-size: 14px;
   }
 </style>
+<style>
+.solid-spin.ant-spin-nested-loading > .ant-spin-blur::after {
+  opacity: 1;
+}
+.solid-spin.ant-spin-nested-loading  .ant-spin{
+  max-height: none;
+}
+</style>
diff --git a/src/views/sys/exception/Converge/config.ts b/src/views/sys/exception/Converge/config.ts
index a6a0f6aa..6e10a59f 100644
--- a/src/views/sys/exception/Converge/config.ts
+++ b/src/views/sys/exception/Converge/config.ts
@@ -1,4 +1,4 @@
-export const MAPBOX_TOKEN = "pk.eyJ1IjoiemhhbmcxMjM4ODk5OSIsImEiOiJja3N5Ync1cXcyMTR2Mm9xempmbGE4MnBtIn0.R-j78CRvbs6JZG-MDSoh8Q";
+export const MAPBOX_TOKEN = "pk.eyJ1IjoibGllYmFvIiwiYSI6ImNsMXg1OHdtcTE3eDEza3FmODBmeXhldmIifQ.CYYMuikQnGHMtTNq60B_xA";
 
 export const TINADITU_TOKEN = "b6585bc41ee16251dbe6b1af64f375d9";
 
diff --git a/src/views/sys/exception/Converge/index.vue b/src/views/sys/exception/Converge/index.vue
index 76a5c101..a0bc49d1 100644
--- a/src/views/sys/exception/Converge/index.vue
+++ b/src/views/sys/exception/Converge/index.vue
@@ -58,6 +58,7 @@
     'handlerGetDetails',
     'showMonitor',
     'handlerQueryIntersectTif',
+    'changeLoading'
   ]);
 
   let isZoomVisible: any = false;
@@ -141,7 +142,6 @@
       //挂载mapbox-gl-utils
       U.init(map);
       mp = new MP(map);
-
       // 添加地形数据
       map.addSource('mapbox-dem', {
         type: 'raster-dem',
@@ -151,41 +151,46 @@
         minzoom: 10,
       });
       map.setTerrain({ source: 'mapbox-dem', exaggeration: 1 });
-
       // 设置2D地图
       map.easeTo({ pitch: 0, bearing: 0, duration: 1000 });
       map.dragRotate.disable(); // 禁用拖动旋转
       map.pitchWithRotate = false; // 禁用旋转时俯仰变化
       mapAngle.value = '2D';
-
       handlerCheckUserOrgs();
       // handlerLoadMaskLayer();
       getMaskData();
       handlerDealStreet();
       handlerDealCountry();
-
       // 视频监控
       addMonitorLayer();
-
       // 叠加遥感影像和高清影像
       try{
-          axios.get(VITE_GLOB_LAN_API_URL+"/api/DroneCloudQuery/IsPublic").then(res=>{
-              if(res.data.result){
-                networkType.value = "WAN";
-              }else{
-                networkType.value = "LAN";
-                // 加载内网影像
-                loadYingXiangLayer()
-              }
+        axios.get(VITE_GLOB_LAN_API_URL+"/api/DroneCloudQuery/IsPublic").then(res=>{
+          if(res.data.result){
+            networkType.value = "WAN";
+          }else{
+            networkType.value = "LAN";
+            // 加载内网影像
+            loadYingXiangLayer()
+          }
         })
       }catch(e){
         networkType.value = "WAN";
-      }finally{
-
-      }
+      }finally{}
+      const sources = map.getStyle().sources;
+      let loadedSources = 0;
+      Object.keys(sources).forEach(sourceId => {
+        map.on('sourcedata', (e) => {
+          if (e.sourceId === sourceId && e.isSourceLoaded) {
+            loadedSources++;
+            if (loadedSources === Object.keys(sources).length) {
+              console.log('所有图层关联的数据源已加载完成');
+              emits('changeLoading',false)
+            }
+          }
+        });
+      });
     });
-
-    
   }
 
   function loadYingXiangLayer(){
@@ -545,64 +550,53 @@
 
   // 获取县区边界数据
   const handlerDealCountry = (countyName: String = '临沂市'): void => {
-    let center = {};
-    let zoom;
-    let filterName = '';
-    if (countyName == '临沂市') {
-      center = { lng: 118.72504868812163, lat: 35.180072027132915 };
-      zoom = 7.848587811931849;
-      handlerLocation([center['lng'], center['lat']], zoom);
-    } else if (countyName) {
-      center = MAP_VIEWER[countyName].center;
-      zoom = MAP_VIEWER[countyName].zoom;
-      handlerLocation([center['lng'], center['lat']], zoom);
-      filterName = countyName;
-    }
-
-    axios({
-      method: 'get',
-      // url:`http://175.27.168.120:8080/geoserver/linyishi/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=linyishi%3Axianjie&maxFeatures=50&outputFormat=application%2Fjson&cql_filter=xzqmc%20like%20%27%25${filterName}%25%27`,
-      url: `http://120.222.154.7:8090/geoserver/linyishi/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=linyishi%3Axianjie&maxFeatures=50&outputFormat=application%2Fjson`,
-    }).then((res) => {
-      handlerLoadPanelLayer(res.data);
-      handlerLoadCountyLayer(res.data);
-    });
-  };
-
-  /**
-   *
-   * 县区边界：countyLayer
-   * 县区面板图层：countyPanelLayer
-   * 乡镇边界：streetLayer
-   * 乡镇名称图层：streetLabelLayer
-   * 遮罩图层：mb-tag
-   * 图斑线：historyLayerLine
-   * 图斑面：historyLayerFill
-   *
-   * */
-  // 渲染县区边界数据
-  const handlerLoadCountyLayer = (geojson) => {
-    // 绘制线
-    if (map.getSource('countySource')) {
-      map.getSource('countySource').setData(geojson);
-    } else {
-      map.addSource('countySource', {
-        type: 'geojson',
-        data: geojson,
-      });
-      map.addLayer({
-        id: 'countyLayer',
-        type: 'line',
-        source: 'countySource',
-        paint: {
-          'line-color': '#6f7ff4', // 设置线的颜色
-          'line-width': 3, // 设置线的宽度
-        },
-      });
-      if (map.getLayer('countyPanelLayer')) {
-        map.moveLayer('countyLayer', 'countyPanelLayer');
+    map.addSource("wmsSource", {
+      "type": "vector",
+      "scheme": "tms",
+      tiles: [
+      "http://175.27.168.120:8080/geoserver/gwc/service/tms/1.0.0/linyishi%3Axianjie@EPSG%3A900913@pbf/{z}/{x}/{y}.pbf"
+      ],
+      tileSize: 512
+    })
+    map.addLayer({
+      id: "xianjie",
+      type: "line",
+      source: "wmsSource",
+      'source-layer': 'xianjie',
+      layout: {
+        visibility: "visible",
+      },
+      paint: {
+        "line-color": "#6f7ff4",
+        "line-width": 4,
       }
-    }
+    })
+    map.addSource("xianjiepoint", {
+      "type": "vector",
+      "scheme": "tms",
+      tiles: [
+      "http://175.27.168.120:8080/geoserver/gwc/service/tms/1.0.0/linyishi%3Alinyishixianjie_point@EPSG%3A900913@pbf/{z}/{x}/{y}.pbf",
+      ],
+      tileSize: 512,
+    })
+    map.addLayer({
+      id: "xianjiepoint",
+      type: "symbol",
+      source: "xianjiepoint",
+      'source-layer': 'linyishixianjie_point',
+      layout: {
+        visibility: "visible",
+          "text-field": "{xzqmc}",
+          "text-size": 18
+      },
+      paint: {
+        'text-color': '#041B36',
+        'text-halo-color': '#fff',
+        'text-halo-width': 2,
+      },
+      minzoom: 8,
+      maxzoom: 10,
+    });
   };
 
   // 渲染县界白板图层
@@ -669,13 +663,19 @@
   };
 
   function getMaskData() {
-    axios({
-      method: 'get',
-      url: `http://120.222.154.7:8090/geoserver/linyishi/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=linyishi%3Ashijie&maxFeatures=50&outputFormat=application%2Fjson`,
-    }).then((res) => {
-      let geojson = { DATA: res.data.features[0].geometry.coordinates[0][0] };
-
-      handlerLoadMaskLayer(geojson);
+    map.addLayer({
+      id: "linyishizhezhao",
+      type: "raster",
+      source: {
+        type: "raster",
+        tiles: [
+          "http://175.27.168.120:8080/geoserver/gwc/service/wms?service=WMS&version=1.1.0&request=GetMap&layers=linyishi%3Alinyishizhezhao&styles=&bbox={bbox-epsg-3857}&width=256&height=256&srs=EPSG:3857&format=image/png&TRANSPARENT=TRUE",
+        ],
+        tileSize: 256,
+      },
+      layout: {
+        visibility: "visible",
+      }
     });
   }
 
@@ -716,56 +716,55 @@
 
   // 获取乡镇数据
   const handlerDealStreet = (countyName: String = '临沂市'): void => {
-    
-    axios({
-      method: 'get',
-      url: `http://175.27.168.120:8080/geoserver/linyishi/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=linyishi%3Azhenjie&maxFeatures=10000&outputFormat=application%2Fjson`,
-    }).then((res) => {
-      handlerLoadStreetLayer(res.data);
+    map.addSource("zhenjie", {
+      "type": "vector",
+      "scheme": "tms",
+      tiles: [
+      "http://175.27.168.120:8080/geoserver/gwc/service/tms/1.0.0/linyishi%3Azhenjie@EPSG%3A900913@pbf/{z}/{x}/{y}.pbf",
+      ],
+      tileSize: 512
+    })
+    map.addLayer({
+      id: "zhenjie",
+      type: "line",
+      source: "zhenjie",
+      'source-layer': 'zhenjie',
+      layout: {
+        visibility: "visible",
+      },
+      paint: {
+        'line-color': '#42befb', // 设置线的颜色
+        'line-width': 1, // 设置线的宽度
+      },
+      minzoom: 10,
+      maxzoom: 24,
+    })
+    map.addSource("zhenjiepoint", {
+      "type": "vector",
+      "scheme": "tms",
+      tiles: [
+      "http://175.27.168.120:8080/geoserver/gwc/service/tms/1.0.0/linyishi%3Azhenjiepoint@EPSG%3A900913@pbf/{z}/{x}/{y}.pbf",
+      ],
+      tileSize: 512,
+    })
+    map.addLayer({
+      id: "zhenjiepoint",
+      type: "symbol",
+      source: "zhenjiepoint",
+      'source-layer': 'zhenjiepoint',
+      layout: {
+        visibility: "visible",
+          "text-field": "{xzqmc}",
+      },
+      paint: {
+        'text-color': '#041B36',
+        'text-halo-color': '#fff',
+        'text-halo-width': 2,
+      },
+      minzoom: 10,
+      maxzoom: 24,
     });
   };
-  // 渲染乡镇边界数据
-  const handlerLoadStreetLayer = (geojson) => {
-    // 绘制线
-    if (map.getSource('streetSource')) {
-      map.getSource('streetSource').setData(geojson);
-    } else {
-      map.addSource('streetSource', {
-        type: 'geojson',
-        data: geojson,
-      });
-      map.addLayer({
-        id: 'streetLayer',
-        type: 'line',
-        source: 'streetSource',
-        paint: {
-          'line-color': '#42befb', // 设置线的颜色
-          'line-width': 2, // 设置线的宽度
-        },
-        minzoom: 10,
-        maxzoom: 24,
-      });
-
-      map.addLayer({
-        id: 'streetLabelLayer',
-        type: 'symbol',
-        source: 'streetSource',
-        layout: {
-          'text-field': ['get', 'xzqmc'],
-          'text-font': ['Open Sans Bold', 'Arial Unicode MS Bold'],
-          'text-size': 12,
-          'text-anchor': 'center',
-        },
-        paint: {
-          'text-color': '#041B36',
-          'text-halo-color': '#fff',
-          'text-halo-width': 2,
-        },
-        minzoom: 10,
-        maxzoom: 24,
-      });
-    }
-  };
 
   let VillageGeojson = {};
   const handlerLoadVillageLayer = () => {