首页农发首页优化移植

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>

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";
 

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,22 +151,18 @@
         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=>{
@@ -180,12 +176,21 @@
         })
       }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 = {};
+    map.addSource("wmsSource", {
-    let zoom;
+      "type": "vector",
-    let filterName = '';
+      "scheme": "tms",
-    if (countyName == '临沂市') {
+      tiles: [
-      center = { lng: 118.72504868812163, lat: 35.180072027132915 };
+      "http://175.27.168.120:8080/geoserver/gwc/service/tms/1.0.0/linyishi%3Axianjie@EPSG%3A900913@pbf/{z}/{x}/{y}.pbf"
-      zoom = 7.848587811931849;
+      ],
-      handlerLocation([center['lng'], center['lat']], zoom);
+      tileSize: 512
-    } 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',
+      id: "xianjie",
-        type: 'line',
+      type: "line",
-        source: 'countySource',
+      source: "wmsSource",
-        paint: {
+      'source-layer': 'xianjie',
-          'line-color': '#6f7ff4', // 设置线的颜色
+      layout: {
-          'line-width': 3, // 设置线的宽度
+        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,
     });
-      if (map.getLayer('countyPanelLayer')) {
-        map.moveLayer('countyLayer', 'countyPanelLayer');
-      }
-    }
   };
 
   // 渲染县界白板图层
@@ -669,13 +663,19 @@
   };
 
   function getMaskData() {
-    axios({
+    map.addLayer({
-      method: 'get',
+      id: "linyishizhezhao",
-      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`,
+      type: "raster",
-    }).then((res) => {
+      source: {
-      let geojson = { DATA: res.data.features[0].geometry.coordinates[0][0] };
+        type: "raster",
-
+        tiles: [
-      handlerLoadMaskLayer(geojson);
+          "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,45 +716,45 @@
 
   // 获取乡镇数据
   const handlerDealStreet = (countyName: String = '临沂市'): void => {
-    
+    map.addSource("zhenjie", {
-    axios({
+      "type": "vector",
-      method: 'get',
+      "scheme": "tms",
-      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`,
+      tiles: [
-    }).then((res) => {
+      "http://175.27.168.120:8080/geoserver/gwc/service/tms/1.0.0/linyishi%3Azhenjie@EPSG%3A900913@pbf/{z}/{x}/{y}.pbf",
-      handlerLoadStreetLayer(res.data);
+      ],
-    });
+      tileSize: 512
-  };
+    })
-  // 渲染乡镇边界数据
-  const handlerLoadStreetLayer = (geojson) => {
-    // 绘制线
-    if (map.getSource('streetSource')) {
-      map.getSource('streetSource').setData(geojson);
-    } else {
-      map.addSource('streetSource', {
-        type: 'geojson',
-        data: geojson,
-      });
     map.addLayer({
-        id: 'streetLayer',
+      id: "zhenjie",
-        type: 'line',
+      type: "line",
-        source: 'streetSource',
+      source: "zhenjie",
+      'source-layer': 'zhenjie',
+      layout: {
+        visibility: "visible",
+      },
       paint: {
         'line-color': '#42befb', // 设置线的颜色
-          'line-width': 2, // 设置线的宽度
+        '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: 'streetLabelLayer',
+      id: "zhenjiepoint",
-        type: 'symbol',
+      type: "symbol",
-        source: 'streetSource',
+      source: "zhenjiepoint",
+      'source-layer': 'zhenjiepoint',
       layout: {
-          'text-field': ['get', 'xzqmc'],
+        visibility: "visible",
-          'text-font': ['Open Sans Bold', 'Arial Unicode MS Bold'],
+          "text-field": "{xzqmc}",
-          'text-size': 12,
-          'text-anchor': 'center',
       },
       paint: {
         'text-color': '#041B36',
@@ -764,7 +764,6 @@
       minzoom: 10,
       maxzoom: 24,
     });
-    }
   };
 
   let VillageGeojson = {};