影像缩略图更新-选择表格弹窗优化、影响先叠加总缩略图、再叠加分割好的

src/views/demo/system/achievement/GeoTiffManager/chooseUpdate.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <BasicTable @register="chooseUpdateRegisterTable">
+    <BasicTable @register="chooseUpdateRegisterTable" :loading="loading">
       <template #toolbar>
         <a-button type="success" @click="updateGeoTiff">更新缩略图</a-button>
       </template>
@@ -8,7 +8,7 @@
   </div>
 </template>
 <script lang="ts" setup>
-  import { defineProps, defineEmits } from 'vue';
+  import { ref, defineProps, defineEmits, defineExpose } from 'vue';
   import { BasicTable, useTable } from '@/components/Table';
   import { chooseUpdateColumns } from './util';
   import { useMessage } from '@/hooks/web/useMessage';
@@ -18,12 +18,12 @@
   const emit = defineEmits(['generateThumbnail']);
 
   // 选择生成缩略图的影像
-  const [chooseUpdateRegisterTable, { reload, getSelectRows }] = useTable({
+  const [chooseUpdateRegisterTable, { reload, getSelectRows, clearSelectedRowKeys }] = useTable({
     columns: chooseUpdateColumns,
     dataSource: props.chooseUpdateData,
     showIndexColumn: true,
     rowSelection: {
-      type: 'radio',
+      type: 'checkbox',
     },
     canResize: true,
     useSearchForm: false,
@@ -54,9 +54,21 @@
   };
 
   // 生成缩略图
+  const loading = ref(false);
   function updateThumbnail(layerNames) {
+    loading.value = true;
     emit('generateThumbnail', layerNames);
   }
+
+  // 清除旧选项
+  function clearSelect() {
+    clearSelectedRowKeys();
+  }
+
+  defineExpose({
+    loading,
+    clearSelect,
+  });
 </script>
 <style lang="less">
   .content-full {

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

@@ -78,7 +78,11 @@
       :footer="null"
       @cancel="chooseUpdateClose"
     >
-      <ChooseUpdate :chooseUpdateData="chooseUpdateData" @generateThumbnail="generateThumbnail" />
+      <ChooseUpdate
+        ref="chooseUpdateRef"
+        :chooseUpdateData="chooseUpdateData"
+        @generateThumbnail="generateThumbnail"
+      />
     </a-modal>
   </div>
 </template>
@@ -230,12 +234,14 @@
   }
 
   // 在本地路径生成缩略图-------------------------------------------------------------------------------
-  // 选择生成缩略图的影像open
+  // 选择生成缩略图的影像ref、open、数据
+  const chooseUpdateRef = ref();
   const chooseUpdateOpen = ref(false);
   const chooseUpdateData: any = ref([]);
   // 选择更新的周数影像弹窗关闭
   function chooseUpdateClose() {
     chooseUpdateOpen.value = false;
+    chooseUpdateRef.value.clearSelect();
   }
   // 在本地路径生成缩略图
   async function updateYearWeekThumbnail() {
@@ -246,7 +252,9 @@
       // 按照时间分类
       let uniqueKeysArray = [...new Set(res.items.map((item) => item.dateDir))];
       // 转换时间数组(年份-周数)
-      uniqueKeysArray = [...new Set(uniqueKeysArray.map(convertToYearWeek))];
+      uniqueKeysArray = [...new Set(uniqueKeysArray.map(convertToYearWeek))].sort(
+        (a, b) => dayjs(a) - dayjs(b),
+      );
       // 生成对应年份-周数的缩略图
       chooseUpdateData.value = [];
       uniqueKeysArray.forEach((item, index) => {
@@ -268,12 +276,18 @@
 
   // 生成缩略图
   async function generateThumbnail(layerNames) {
-    GeoTiffManagerUpdateLayerGroupThumb({ layerGroups: layerNames, num: 10 }).then((res) => {
+    // 分割的生成缩略图
+    GeoTiffManagerUpdateLayerGroupThumb({ layerGroups: layerNames, num: 5 }).then((res) => {
       if (res) {
         createMessage.success('生成新的缩略图成功！');
+        chooseUpdateRef.value.clearSelect();
+        chooseUpdateRef.value.loading = false;
         chooseUpdateOpen.value = false;
+        // 生成总的缩略图
+        GeoTiffManagerUpdateLayerGroupThumb({ layerGroups: layerNames, num: 1 });
       } else {
         createMessage.error('生成新的缩略图失败！');
+        chooseUpdateRef.value.loading = false;
       }
     });
   }

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

@@ -332,26 +332,47 @@
   }
 
   // 影像管理-图层
+  const splitNum = 5;
   function GeoTiffManagerRaster(chooseRows, lngLat, zoom, isMove, fillOpacity = 1) {
     // 清除图层
     if (isMove) {
       handlerLocation(lngLat, zoom);
     }
-
     chooseRows?.forEach((chooseRow, index) => {
       if (
         6 <= chooseRow.layerName.length &&
         chooseRow.layerName.length <= 7 &&
         chooseRow.layerName.charAt(4) == '-'
       ) {
-        // 周数的
-        // 提前准备好的缩略图
-        const NUM = 10;
-        const LNG = Number(((119.27763051149853 - 117.34046403513817) / NUM).toFixed(5));
-        const LAT = Number(((36.263686454243626 - 34.331716698906675) / NUM).toFixed(5));
+        // 总的缩略图
+        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/' + chooseRow.layerName + '.png',
+          coordinates: fourpoint,
+        });
+        map.addLayer({
+          id: chooseRow.layerName + '-image',
+          type: 'raster',
+          source: chooseRow.layerName + '-image',
+          minzoom: 0,
+          maxzoom: 14,
+        });
+        if (map.getLayer('streetLayer')) {
+          map.moveLayer(chooseRow.layerName + '-image', 'streetLayer');
+        }
 
-        for (let x = 0; x < NUM; x++) {
-          for (let y = 0; y < NUM; y++) {
+        // 周数的
+        // 分割的缩略图（精度高些）
+        const LNG = Number(((119.27763051149853 - 117.34046403513817) / splitNum).toFixed(4));
+        const LAT = Number(((36.263686454243626 - 34.331716698906675) / splitNum).toFixed(4));
+        for (let x = 0; x < splitNum; x++) {
+          for (let y = 0; y < splitNum; y++) {
             let fourpoint = [
               [Number(117.34046403513817 + x * LNG), Number(34.331716698906675 + (y + 1) * LAT)],
               [
@@ -371,7 +392,7 @@
               type: 'raster',
               source: chooseRow.layerName + '-image-' + x + '-' + y,
               minzoom: 0,
-              maxzoom: 15,
+              maxzoom: 16,
             });
             if (map.getLayer('streetLayer')) {
               map.moveLayer(chooseRow.layerName + '-image-' + x + '-' + y, 'streetLayer');
@@ -405,7 +426,7 @@
         id: chooseRow.layerName,
         type: 'raster',
         source: chooseRow.layerName,
-        minzoom: 14,
+        minzoom: 13,
       });
       if (map.getLayer('streetLayer')) {
         map.moveLayer(chooseRow.layerName, 'streetLayer');
@@ -556,9 +577,14 @@
       map.removeImage('diagonal-stripe');
     }
     // 删除准备好的缩略图
-    const NUM = 10;
-    for (let x = 0; x < NUM; x++) {
-      for (let y = 0; y < NUM; y++) {
+    if (map.getLayer(layerName + '-image')) {
+      map.removeLayer(layerName + '-image');
+    }
+    if (map.getSource(layerName + '-image')) {
+      map.removeSource(layerName + '-image');
+    }
+    for (let x = 0; x < splitNum; x++) {
+      for (let y = 0; y < splitNum; y++) {
         if (map.getLayer(layerName + '-image-' + x + '-' + y)) {
           map.removeLayer(layerName + '-image-' + x + '-' + y);
         }
@@ -608,8 +634,11 @@
 
       // map.on('click', function (e) {
       //   const zoom = map.getZoom();
+      //   alert('地图缩放级别更新为:' + zoom);
       //   console.log('地图缩放级别更新为:', zoom);
+      //   alert('点击位置的坐标:' + e.lngLat.lng + ',' + e.lngLat.lat);
       //   console.log('点击位置的坐标:', e.lngLat.lng, e.lngLat.lat);
+
       // });
     });
   });