影像加载速度优化

src/views/demo/system/achievement/Display/index.vue

@@ -146,7 +146,7 @@
     getDataTableRecord,
   } from '@/api/demo/system';
   import { getLoad } from '@/api/sys/sysDataItemDetail';
-  import { prepareTreeData } from './util';
+  import { prepareTreeData, yingxiangdata } from './util';
   import dayjs from 'dayjs';
   import proj4 from 'proj4';
   // 图片路径拼接
@@ -231,6 +231,7 @@
       limit: 10000,
     }).then((res) => {
       // 初始化
+      // res.items = yingxiangdata;
       res.items = res.items.sort((a, b) => dayjs(b.dateDir) - dayjs(a.dateDir));
       tableData2 = res.items;
       res.items.forEach((item) => {

src/views/demo/system/achievement/Display/util.ts

@@ -16,4 +16,7 @@ export const prepareTreeData: TreeProps['treeData'] = [
     key: '3',
     children: [],
   },
-];
+];
+// 测试用
+export const yingxiangdata = [];
+

src/views/demo/system/geoservermanagement/clound/mapComponent.vue

@@ -337,7 +337,37 @@
     if (isMove) {
       handlerLocation(lngLat, zoom);
     }
+
     chooseRows?.forEach((chooseRow, index) => {
+      if (
+        6 <= chooseRow.layerName.length &&
+        chooseRow.layerName.length <= 7 &&
+        chooseRow.layerName.charAt(4) == '-'
+      ) {
+        // 周数的
+        // 提前准备好的缩略图
+        let fourpoint = [
+          [117.34046403513817, 36.263686454243626],
+          [119.27763051149853, 36.263686454243626],
+          [119.27763051149853, 34.331716698906675],
+          [117.34046403513817, 34.331716698906675],
+        ];
+        map.addSource(chooseRow.layerName + '-image', {
+          type: 'image',
+          url: '/geoserver/group/my_workspace-' + chooseRow.layerName + '.png',
+          coordinates: fourpoint,
+        });
+        map.addLayer({
+          id: chooseRow.layerName + '-image',
+          type: 'raster',
+          source: chooseRow.layerName + '-image',
+        });
+        if (map.getLayer('streetLayer')) {
+          map.moveLayer(chooseRow.layerName + '-image', 'streetLayer');
+        }
+      }
+
+      // geoserver
       let tiles: any = [];
       let titeUrl: any = null;
       if (new URL(VITE_GLOB_API_URL).hostname == 'localhost') {
@@ -516,6 +546,13 @@
       // 删除图片
       map.removeImage('diagonal-stripe');
     }
+    // 删除提前准备好的缩略图
+    if (map.getLayer(layerName + '-image')) {
+      map.removeLayer(layerName + '-image');
+    }
+    if (map.getSource(layerName + '-image')) {
+      map.removeSource(layerName + '-image');
+    }
   }
 
   // 重新计算地图大小
@@ -554,6 +591,10 @@
       // 县区边界
       handlerDealStreet(null);
       handlerDealCountry(null);
+
+      // map.on('click', function (e) {
+      //   console.log('点击位置的坐标:', e.lngLat.lng, e.lngLat.lat);
+      // });
     });
   });