Merge branch 'main' of http://123.132.248.154:10000/HC_YFZX/CaiYuanYiTiHua

src/api/demo/system.ts

@@ -494,7 +494,7 @@ export const GeoTiffManagerDeleteTifStore = (params) =>
   defHttp.post({ url: Api.DeleteTifStore + '?stores=' + params.stores });
 // 删除tiff影像
 export const GeoTiffManagerUpdateLayerGroupThumb = (params) =>
-  defHttp.post({ url: Api.UpdateLayerGroupThumb + '?layerGroups=' + params.layerGroups });
+  defHttp.post({ url: Api.UpdateLayerGroupThumb + '?layerGroups=' + params.layerGroups + "&bbox=" + params.bbox + "&num=" + params.num + "&width=" + params.width + "&height=" + params.height  });
 
 // 成果管理-航飞图片
 // 添加成果

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

@@ -0,0 +1,194 @@
+<template>
+  <div :style="{ height: '750px' }">
+    <a-tabs v-model:activeKey="activeKey" type="card">
+      <a-tab-pane key="1" tab="更新的周数影像">
+        <div :style="{ margin: '16px', marginLeft: '16px', marginBottom: '16px' }">
+          <BasicTable
+            @register="chooseUpdateRegisterTable_yearweeks"
+            :loading="loading_yearweeks"
+          />
+        </div>
+      </a-tab-pane>
+      <a-tab-pane key="2" tab="更新的影像图层">
+        <BasicTable
+          @register="chooseUpdateRegisterTable_layernames"
+          :loading="loading_layernames"
+        />
+      </a-tab-pane>
+      <template #leftExtra>
+        <div :style="{ width: '10px' }" />
+      </template>
+      <template #rightExtra>
+        <a-button type="success" @click="updateGeoTiff" :style="{ marginRight: '10px' }">
+          更新缩略图
+        </a-button>
+      </template>
+    </a-tabs>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { ref, watch, defineProps, defineEmits, defineExpose } from 'vue';
+  import { createVNode } from 'vue';
+  import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+  import { Modal } from 'ant-design-vue';
+  import { BasicTable, useTable } from '@/components/Table';
+  import {
+    chooseUpdateColumns_yearweeks,
+    chooseUpdateColumns_layernames,
+    searchFormSchema_chooseUpdate,
+  } from './util';
+  import { useMessage } from '@/hooks/web/useMessage';
+
+  const { createMessage } = useMessage();
+  const props = defineProps(['chooseUpdateData_yearweeks', 'chooseUpdateData_layernames']);
+  const emit = defineEmits(['generateThumbnail']);
+
+  const activeKey = ref('1');
+
+  // 选择生成缩略图的影像-周数
+  const [
+    chooseUpdateRegisterTable_yearweeks,
+    {
+      getSelectRows: getSelectRows_yearweeks,
+      clearSelectedRowKeys: clearSelectedRowKeys_yearweeks,
+    },
+  ] = useTable({
+    columns: chooseUpdateColumns_yearweeks,
+    dataSource: props.chooseUpdateData_yearweeks,
+    showIndexColumn: true,
+    rowSelection: {
+      type: 'checkbox',
+    },
+    canResize: true,
+    useSearchForm: false,
+    showTableSetting: false,
+    bordered: true,
+    immediate: false,
+    pagination: false,
+    maxHeight: 585,
+  });
+
+  // 选择生成缩略图的影像-图层
+  const serachInfoData = ref(props.chooseUpdateData_layernames);
+  const [
+    chooseUpdateRegisterTable_layernames,
+    {
+      getSelectRows: getSelectRows_layernames,
+      clearSelectedRowKeys: clearSelectedRowKeys_layernames,
+    },
+  ] = useTable({
+    columns: chooseUpdateColumns_layernames,
+    dataSource: serachInfoData,
+    showIndexColumn: true,
+    rowSelection: {
+      type: 'checkbox',
+    },
+    useSearchForm: true,
+    formConfig: {
+      labelWidth: 120,
+      schemas: searchFormSchema_chooseUpdate,
+      autoSubmitOnEnter: true,
+    },
+    handleSearchInfoFn(info) {
+      if (info.rowname) {
+        serachInfoData.value = props.chooseUpdateData_layernames.filter((item) => {
+          return item.rowname.indexOf(info.rowname) != -1;
+        });
+      } else {
+        serachInfoData.value = props.chooseUpdateData_layernames;
+      }
+      return info;
+    },
+    canResize: true,
+    showTableSetting: false,
+    bordered: true,
+    immediate: false,
+    pagination: true,
+    maxHeight: 471,
+  });
+
+  // 选择更新的缩略图
+  const updateGeoTiff = () => {
+    if (activeKey.value == '1') {
+      // 更新的周数影像
+      let rows = getSelectRows_yearweeks();
+      if (rows.length == 0) {
+        return createMessage.warn('请勾选至少一条数据进行更新');
+      }
+      let layerNames: any = '';
+      rows.forEach((row, index) => {
+        if (index == 0) {
+          layerNames = row.rowname;
+        } else {
+          layerNames = layerNames.concat(',' + row.rowname);
+        }
+        if (index + 1 == rows.length) {
+          updateThumbnail_yearweeks(layerNames);
+        }
+      });
+    } else {
+      // 更新的影像图层
+      let rows = getSelectRows_layernames();
+      if (rows.length == 0) {
+        return createMessage.warn('请勾选至少一条数据进行更新');
+      }
+      if (rows.length >= 50) {
+        Modal.confirm({
+          title: '发现更新数量达到50，是否要更新全部?',
+          icon: createVNode(ExclamationCircleOutlined),
+          onCancel() {
+            rows.forEach((row, index) => {
+              updateThumbnail_layernames(row.rowname, row.bbox, rows.length, index + 1);
+            });
+          },
+          onOk() {
+            serachInfoData.value.forEach((row, index) => {
+              updateThumbnail_layernames(row.rowname, row.bbox, rows.length, index + 1);
+            });
+          },
+        });
+      } else {
+        rows.forEach((row, index) => {
+          updateThumbnail_layernames(row.rowname, row.bbox, rows.length, index + 1);
+        });
+      }
+    }
+  };
+
+  // 生成缩略图
+  const loading_yearweeks = ref(false);
+  const loading_layernames = ref(false);
+  function updateThumbnail_yearweeks(layerNames) {
+    loading_yearweeks.value = true;
+    emit('generateThumbnail', layerNames, null, null, null);
+  }
+  // 生成缩略图
+  function updateThumbnail_layernames(rowname, bbox, length, num) {
+    loading_layernames.value = true;
+    emit('generateThumbnail', rowname, bbox, length, num);
+  }
+
+  // 清除旧选项
+  function clearSelect_yearweeks() {
+    clearSelectedRowKeys_yearweeks();
+  }
+  function clearSelect_layernames() {
+    clearSelectedRowKeys_layernames();
+  }
+
+  defineExpose({
+    loading_yearweeks,
+    loading_layernames,
+    clearSelect_yearweeks,
+    clearSelect_layernames,
+  });
+</script>
+<style lang="less">
+  .content-full {
+    white-space: pre-wrap;
+    word-break: break-all;
+    overflow-wrap: break-word;
+    max-width: 100%;
+    display: block;
+  }
+</style>

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

@@ -29,7 +29,8 @@
             </template>
             <template v-if="column.key === 'accessUrl'">
               <a-image
-                :src="getUrl(record.accessUrl, record.layerName)"
+                :src="'/geoserver/group/' + record.layerName + '.png'"
+                :fallback="getUrl(record.accessUrl, record.layerName)"
                 :style="{ marginRight: '10px' }"
                 :width="100"
                 :height="100"
@@ -69,6 +70,23 @@
     >
       <FailYingxiang :failYingxiangData="failYingxiangData" />
     </a-modal>
+
+    <a-modal
+      title="选择更新的影像"
+      style="top: 50px"
+      :open="chooseUpdateOpen"
+      :maskClosable="false"
+      :width="600"
+      :footer="null"
+      @cancel="chooseUpdateClose"
+    >
+      <ChooseUpdate
+        ref="chooseUpdateRef"
+        :chooseUpdateData_yearweeks="chooseUpdateData_yearweeks"
+        :chooseUpdateData_layernames="chooseUpdateData_layernames"
+        @generateThumbnail="generateThumbnail"
+      />
+    </a-modal>
   </div>
 </template>
 
@@ -82,9 +100,10 @@
   import dayjs from 'dayjs';
   import { getAppEnvConfig } from '@/utils/env';
   import { BasicTable, useTable } from '@/components/Table';
-  import { columns, searchFormSchema } from './util';
+  import { columns, searchFormSchema, data } from './util';
   import MapComponent from '@/views/demo/system/geoservermanagement/clound/mapComponent.vue';
   import FailYingxiang from './failYingxiang.vue';
+  import ChooseUpdate from './chooseUpdate.vue';
   // api
   import {
     GeoTiffManagerUpdateGeoTiff,
@@ -93,6 +112,7 @@
     GeoTiffManagerDeleteTifStore,
     GeoTiffManagerUpdateLayerGroupThumb,
   } from '@/api/demo/system';
+  import { RecordList } from '../../geoservermanagement/page';
 
   // 图片路径拼接
   const { VITE_GLOB_API_URL } = getAppEnvConfig();
@@ -144,7 +164,6 @@
           reload();
         } else {
           failYingxiangData.value = getFailYingxiangData(res);
-          // console.log(failYingxiangData.value);
           failOpen.value = true;
           reload();
         }
@@ -219,46 +238,101 @@
   }
 
   // 在本地路径生成缩略图-------------------------------------------------------------------------------
+  // 选择生成缩略图的影像ref、open、数据
+  const chooseUpdateRef = ref();
+  const chooseUpdateOpen = ref(false);
+  const chooseUpdateData_yearweeks: any = ref([]);
+  const chooseUpdateData_layernames: any = ref([]);
+  // 选择更新的周数影像弹窗关闭
+  function chooseUpdateClose() {
+    chooseUpdateOpen.value = false;
+    chooseUpdateRef.value.clearSelect_layernames();
+    chooseUpdateRef.value.clearSelect_yearweeks();
+  }
+  // 在本地路径生成缩略图
   async function updateYearWeekThumbnail() {
-    GeoTiffManagerLoadPage({
-      page: 1,
-      limit: 1000000,
-    }).then((res) => {
-      // 按照时间分类
-      let uniqueKeysArray = [...new Set(res.items.map((item) => item.dateDir))];
-      // 转换时间数组(年份-周数)
-      uniqueKeysArray = [...new Set(uniqueKeysArray.map(convertToYearWeek))];
-      // 生成对应年份-周数的缩略图
-      let layerNames: any = '';
-      uniqueKeysArray.forEach((item, index) => {
-        if (index == 0) {
-          layerNames = item;
-        } else {
-          layerNames = layerNames.concat(',' + item);
-        }
+    // allDataForClearMap = data;
+    // 按照时间分类
+    allDataForClearMap = allDataForClearMap.sort((a, b) => dayjs(b.dateDir) - dayjs(a.dateDir));
+    let uniqueKeysArray = [...new Set(allDataForClearMap.map((item) => item.dateDir))];
+    // 转换时间数组(年份-周数)
+    uniqueKeysArray = [...new Set(uniqueKeysArray.map(convertToYearWeek))];
+    // 生成对应年份-周数的缩略图
+    chooseUpdateData_yearweeks.value = [];
+    uniqueKeysArray.forEach((item, index) => {
+      chooseUpdateData_yearweeks.value.push({
+        rowname: item,
       });
-      // 更换全部缩略图
-      // res.items.forEach((item, index) => {
-      //   if (layerNames === '') {
-      //     layerNames = item.layerName;
-      //   } else {
-      //     layerNames = layerNames.concat(',' + item.layerName);
-      //   }
-      // });
-      // 生成缩略图
-      generateThumbnail(layerNames);
     });
+    // 影像名称更换全部影像的缩略图
+    chooseUpdateData_layernames.value = [];
+    allDataForClearMap.forEach((item, index) => {
+      chooseUpdateData_layernames.value.push({
+        rowname: item.layerName,
+        bbox: getBboxFromUrl(item.accessUrl),
+      });
+    });
+    chooseUpdateOpen.value = true;
   }
 
   // 生成缩略图
-  async function generateThumbnail(layerNames) {
-    GeoTiffManagerUpdateLayerGroupThumb({ layerGroups: layerNames }).then((res) => {
-      if (res) {
-        createMessage.success('生成新的缩略图成功！');
-      } else {
-        createMessage.error('生成新的缩略图失败！');
-      }
-    });
+  async function generateThumbnail(layerNames, bbox, length, num) {
+    if (bbox) {
+      GeoTiffManagerUpdateLayerGroupThumb({
+        layerGroups: layerNames,
+        bbox: bbox,
+        num: 1,
+        width: 1024,
+        height: 1024,
+      })
+        .then((res) => {
+          if (res && length == num) {
+            createMessage.success('生成新的缩略图成功！');
+            chooseUpdateRef.value.clearSelect_layernames();
+            chooseUpdateRef.value.loading_layernames = false;
+          } else if (length == num) {
+            createMessage.error('生成新的缩略图失败！');
+            chooseUpdateRef.value.loading_layernames = false;
+          }
+        })
+        .catch((error) => {
+          if (length == num) {
+            createMessage.error('生成新的缩略图失败！');
+            chooseUpdateRef.value.loading_layernames = false;
+          }
+        });
+    } else {
+      // 分割的生成缩略图
+      GeoTiffManagerUpdateLayerGroupThumb({
+        layerGroups: layerNames,
+        bbox: null,
+        num: 5,
+        width: 4096,
+        height: 4096,
+      })
+        .then((res) => {
+          if (res) {
+            createMessage.success('生成新的缩略图成功！');
+            chooseUpdateRef.value.loading_yearweeks = false;
+            chooseUpdateRef.value.clearSelect_yearweeks();
+            // 生成总的缩略图
+            GeoTiffManagerUpdateLayerGroupThumb({
+              layerGroups: layerNames,
+              bbox: null,
+              num: 1,
+              width: 1024,
+              height: 1024,
+            });
+          } else {
+            createMessage.error('生成新的缩略图失败！');
+            chooseUpdateRef.value.loading_yearweeks = false;
+          }
+        })
+        .catch((error) => {
+          createMessage.error('生成新的缩略图失败！');
+          chooseUpdateRef.value.loading_yearweeks = false;
+        });
+    }
   }
 
   // 获取年份-周数
@@ -286,7 +360,16 @@
     allDataForClearMap.forEach((data) => {
       mapboxComponentRef.value.clearTaskLayer(data.layerName);
     });
-    let bbox = getBboxFromUrl(record.accessUrl);
+    let lngLat = getlngLatByAccessUrl(record.accessUrl);
+    let chooseRows: any = [];
+    record.bbox = getBboxFromUrl(record.accessUrl);
+    chooseRows.push(record);
+    mapboxComponentRef.value.GeoTiffManagerRaster(chooseRows, lngLat, 11, true);
+  }
+
+  // 获取中心点的坐标
+  function getlngLatByAccessUrl(accessUrl) {
+    let bbox = getBboxFromUrl(accessUrl);
     let lngLat = getCenterPoint(bbox);
     // 检测坐标系
     const result = isProjectedCoordinates(parseFloat(lngLat[0]), parseFloat(lngLat[1]));
@@ -294,9 +377,6 @@
       lngLat[0] = result[0];
       lngLat[1] = result[1];
     }
-    let chooseRows: any = [];
-    chooseRows.push(record);
-    mapboxComponentRef.value.GeoTiffManagerRaster(chooseRows, lngLat, 11, true);
     return lngLat;
   }
 

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

@@ -73,4 +73,37 @@ export const failColumns = [
     dataIndex: 'action',
     width: 100,
   }
-];
+];
+
+export const chooseUpdateColumns_yearweeks = [
+  {
+    title: '年份周数',
+    dataIndex: 'rowname',
+    width: 200,
+  },
+];
+
+export const chooseUpdateColumns_layernames = [
+  {
+    title: '影像名称',
+    dataIndex: 'rowname',
+    width: 200,
+  },
+  {
+    title: '地理坐标系',
+    dataIndex: 'bbox',
+    width: 200,
+    ifShow: false,
+  },
+];
+
+export const searchFormSchema_chooseUpdate = [
+  {
+    field: 'rowname',
+    label: '影像名称',
+    component: 'Input',
+    colProps: { span: 16 },
+  },
+];  
+// 测试数据
+export const data = [];

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

@@ -332,20 +332,19 @@
   }
 
   // 影像管理-图层
+  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) == '-'
       ) {
-        // 周数的
-        // 提前准备好的缩略图
+        // 总的缩略图
         let fourpoint = [
           [117.34046403513817, 36.263686454243626],
           [119.27763051149853, 36.263686454243626],
@@ -361,19 +360,68 @@
           id: chooseRow.layerName + '-image',
           type: 'raster',
           source: chooseRow.layerName + '-image',
+          minzoom: 0,
+          maxzoom: 10,
         });
         if (map.getLayer('streetLayer')) {
           map.moveLayer(chooseRow.layerName + '-image', 'streetLayer');
         }
-        setTimeout(() => {
-          // 等加载好真正的周图层后，删除提前准备好的缩略图
-          if (map.getLayer(chooseRow.layerName + '-image')) {
-            map.removeLayer(chooseRow.layerName + '-image');
-          }
-          if (map.getSource(chooseRow.layerName + '-image')) {
-            map.removeSource(chooseRow.layerName + '-image');
+
+        // 周数的
+        // 分割的缩略图（精度高些）
+        const LNG = (119.27763051149853 - 117.34046403513817) / splitNum;
+        const LAT = (36.263686454243626 - 34.331716698906675) / splitNum;
+        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)],
+              [
+                Number(117.34046403513817 + (x + 1) * LNG),
+                Number(34.331716698906675 + (y + 1) * LAT),
+              ],
+              [Number(117.34046403513817 + (x + 1) * LNG), Number(34.331716698906675 + y * LAT)],
+              [Number(117.34046403513817 + x * LNG), Number(34.331716698906675 + y * LAT)],
+            ];
+            map.addSource(chooseRow.layerName + '-image-' + x + '-' + y, {
+              type: 'image',
+              url: '/geoserver/group/' + chooseRow.layerName + '-' + x + '-' + y + '.png',
+              coordinates: fourpoint,
+            });
+            map.addLayer({
+              id: chooseRow.layerName + '-image-' + x + '-' + y,
+              type: 'raster',
+              source: chooseRow.layerName + '-image-' + x + '-' + y,
+              minzoom: 10,
+              maxzoom: 16,
+            });
+            if (map.getLayer('streetLayer')) {
+              map.moveLayer(chooseRow.layerName + '-image-' + x + '-' + y, 'streetLayer');
+            }
           }
-        }, 25000);
+        }
+      } else {
+        const [minLon, minLat, maxLon, maxLat] = chooseRow.bbox
+          .split(',')
+          .map((coord) => parseFloat(coord));
+        let fourpoint = [
+          [minLon, maxLat],
+          [maxLon, maxLat],
+          [maxLon, minLat],
+          [minLon, minLat],
+        ];
+        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',
+        });
+        if (map.getLayer('streetLayer')) {
+          map.moveLayer(chooseRow.layerName + '-image', 'streetLayer');
+        }
       }
 
       // geoserver
@@ -386,14 +434,12 @@
         titeUrl =
           'http://192.168.10.141:8080/geoserver/my_workspace/wms?service=WMS&version=1.1.0&request=GetMap&layers=my_workspace:';
       }
-
       let tile =
         titeUrl +
         chooseRow.layerName +
         '&styles=&bbox={bbox-epsg-3857}&width=256&height=256&srs=EPSG:3857' +
         '&format=image/png&TRANSPARENT=TRUE';
       tiles.push(tile);
-
       map.addSource(chooseRow.layerName, {
         type: 'raster',
         tiles: tiles,
@@ -403,9 +449,7 @@
         id: chooseRow.layerName,
         type: 'raster',
         source: chooseRow.layerName,
-        layout: {
-          visibility: 'visible',
-        },
+        minzoom: 13,
       });
       if (map.getLayer('streetLayer')) {
         map.moveLayer(chooseRow.layerName, 'streetLayer');
@@ -555,13 +599,23 @@
       // 删除图片
       map.removeImage('diagonal-stripe');
     }
-    // 删除提前准备好的缩略图
+    // 删除准备好的缩略图
     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);
+        }
+        if (map.getSource(layerName + '-image-' + x + '-' + y)) {
+          map.removeSource(layerName + '-image-' + x + '-' + y);
+        }
+      }
+    }
   }
 
   // 重新计算地图大小
@@ -580,7 +634,27 @@
     }
     if (layerType == 'GeoTiffManagerRaster') {
       filter?.forEach((tuceng) => {
-        map.setPaintProperty(tuceng.layerName, 'raster-opacity', parseFloat(newOpacity));
+        if (map.getLayer(tuceng.layerName)) {
+          map.setPaintProperty(tuceng.layerName, 'raster-opacity', parseFloat(newOpacity));
+        }
+        if (map.getLayer(tuceng.layerName + '-image')) {
+          map.setPaintProperty(
+            tuceng.layerName + '-image',
+            'raster-opacity',
+            parseFloat(newOpacity),
+          );
+        }
+        for (let x = 0; x < splitNum; x++) {
+          for (let y = 0; y < splitNum; y++) {
+            if (map.getLayer(tuceng.layerName + '-image-' + x + '-' + y)) {
+              map.setPaintProperty(
+                tuceng.layerName + '-image-' + x + '-' + y,
+                'raster-opacity',
+                parseFloat(newOpacity),
+              );
+            }
+          }
+        }
       });
     }
   }
@@ -602,7 +676,12 @@
       handlerDealCountry(null);
 
       // 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);
+
       // });
     });
   });