成果管理、展示-影像按照鼠标拖动缩放；针对todesk的环境加速加载geoserver影像图层

2024-12-18 13:33:44 +08:00 · 2024-12-18 13:33:44 +08:00 · 7e1c870f83
parent 52a44f42bb
commit 7e1c870f83
4 changed files with 312 additions and 72 deletions
--- a/src/api/demo/system.ts
+++ b/src/api/demo/system.ts
@ -493,8 +493,13 @@ export const GeoTiffManagerGet = (params) =>
 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 + "&bbox=" + params.bbox + "&num=" + params.num + "&width=" + params.width + "&height=" + params.height  });
+export const GeoTiffManagerUpdateLayerGroupThumb = ((params) => {
+  if (params.bbox) {
+    return defHttp.post({ url: Api.UpdateLayerGroupThumb + '?layerGroups=' + params.layerGroups + "&num=" + params.num + "&width=" + params.width + "&height=" + params.height + "&bbox=" + params.bbox });
+  } else {
+    return defHttp.post({ url: Api.UpdateLayerGroupThumb + '?layerGroups=' + params.layerGroups + "&num=" + params.num + "&width=" + params.width + "&height=" + params.height  });
+  }
+});

 // 成果管理-航飞图片
 // 添加成果
--- a/src/views/demo/system/achievement/GeoTiffManager/chooseUpdate.vue
+++ b/src/views/demo/system/achievement/GeoTiffManager/chooseUpdate.vue
@ -19,6 +19,33 @@
        <div :style="{ width: '10px' }" />
      </template>
      <template #rightExtra>
+        <a-select
+          v-if="activeKey == '1'"
+          v-model:value="numValue"
+          :options="NumOptions"
+          style="width: 80px; margin-right: 10px"
+          allowClear
+          placeholder="份数"
+        />
+        <a-popover title="提示">
+          <template #content>
+            <p>是否只展示当前无缩略图的影像图层</p>
+          </template>
+          <a-switch
+            v-if="activeKey == '2'"
+            v-model:checked="switchYingxiang"
+            style="margin-right: 15px; margin-bottom: 4px"
+            checked-children="是"
+            un-checked-children="否"
+          />
+        </a-popover>
+        <a-select
+          v-model:value="widthAndHeightValue"
+          :options="widthAndHeightOptions"
+          style="width: 80px; margin-right: 10px"
+          allowClear
+          placeholder="长宽"
+        />
        <a-button type="success" @click="updateGeoTiff" :style="{ marginRight: '10px' }">
          更新缩略图
        </a-button>
@ -44,8 +71,52 @@
  const emit = defineEmits(['generateThumbnail']);

  const activeKey = ref('1');
+  // 图片长宽
+  const widthAndHeightValue = ref(1024);
+  const widthAndHeightOptions = ref([
+    {
+      value: '4096',
+      label: '4096',
+    },
+    {
+      value: '2048',
+      label: '2048',
+    },
+    {
+      value: '1024',
+      label: '1024',
+    },
+    {
+      value: '512',
+      label: '512',
+    },
+    {
+      value: '256',
+      label: '256',
+    },
+  ]);
+  // 切割的份数
+  const numValue = ref(1);
+  const NumOptions = ref([
+    {
+      value: '30',
+      label: '900',
+    },
+    {
+      value: '20',
+      label: '400',
+    },
+    {
+      value: '5',
+      label: '25',
+    },
+    {
+      value: '1',
+      label: '1',
+    },
+  ]);

-  // 选择生成缩略图的影像-周数
+  // 选择生成缩略图的影像-周数----------------------------------------------------------------------------
  const [
    chooseUpdateRegisterTable_yearweeks,
    {
@ -68,7 +139,7 @@
    maxHeight: 585,
  });

-  // 选择生成缩略图的影像-图层
+  // 选择生成缩略图的影像-图层----------------------------------------------------------------------------
  const serachInfoData = ref(props.chooseUpdateData_layernames);
  const [
    chooseUpdateRegisterTable_layernames,
@ -107,7 +178,47 @@
    maxHeight: 471,
  });

-  // 选择更新的缩略图
+  // 筛选无缩略图的影像or展示全部----------------------------------------------------------------------------
+  const switchYingxiang = ref(false);
+  watch(
+    () => switchYingxiang.value,
+    async () => {
+      if (switchYingxiang.value) {
+        serachInfoData.value = await filterLayersWithImages(props.chooseUpdateData_layernames);
+      } else {
+        serachInfoData.value = props.chooseUpdateData_layernames;
+      }
+    },
+  );
+
+  async function filterLayersWithImages(layerNames) {
+    // 创建一个包含所有检查图片存在的Promise数组
+    const checkPromises = layerNames.map(async (item) => {
+      const exists = await checkImageExists(
+        `/geoserver/group/1/${item.rowname}/${item.rowname}.png`,
+      );
+      return { item, exists };
+    });
+    // 等待所有Promise完成
+    const results = await Promise.all(checkPromises);
+    // 过滤出存在图片的图层
+    return results.filter((result) => !result.exists).map((result) => result.item);
+  }
+
+  async function checkImageExists(url) {
+    try {
+      const response = await fetch(url, { method: 'HEAD' });
+      if (response.ok) {
+        return true;
+      } else {
+        return false;
+      }
+    } catch (error) {
+      return false;
+    }
+  }
+
+  // 选择更新的缩略图----------------------------------------------------------------------------
  const updateGeoTiff = () => {
    if (activeKey.value == '1') {
      // 更新的周数影像
@ -155,17 +266,26 @@
    }
  };

-  // 生成缩略图
+  // 生成缩略图-------------------------------------------------------------------------------------------
+  // 等待
  const loading_yearweeks = ref(false);
  const loading_layernames = ref(false);
  function updateThumbnail_yearweeks(layerNames) {
    loading_yearweeks.value = true;
-    emit('generateThumbnail', layerNames, null, null, null);
+    emit(
+      'generateThumbnail',
+      layerNames,
+      null,
+      null,
+      null,
+      widthAndHeightValue.value,
+      numValue.value,
+    );
  }
  // 生成缩略图
-  function updateThumbnail_layernames(rowname, bbox, length, num) {
+  function updateThumbnail_layernames(rowname, bbox, length, index) {
    loading_layernames.value = true;
-    emit('generateThumbnail', rowname, bbox, length, num);
+    emit('generateThumbnail', rowname, bbox, length, index, widthAndHeightValue.value, 1);
  }

  // 清除旧选项
--- a/src/views/demo/system/achievement/GeoTiffManager/index.vue
+++ b/src/views/demo/system/achievement/GeoTiffManager/index.vue
@ -29,7 +29,7 @@
            </template>
            <template v-if="column.key === 'accessUrl'">
              <a-image
-                :src="'/geoserver/group/' + record.layerName + '.png'"
+                :src="'/geoserver/group/1/' + record.layerName + '/' + record.layerName + '.png'"
                :fallback="getUrl(record.accessUrl, record.layerName)"
                :style="{ marginRight: '10px' }"
                :width="100"
@ -276,27 +276,34 @@
  }

  // 生成缩略图
-  async function generateThumbnail(layerNames, bbox, length, num) {
+  async function generateThumbnail(
+    layerNames,
+    bbox,
+    length,
+    index,
+    widthAndHeightValue = 1024,
+    numValue = 1,
+  ) {
    if (bbox) {
      GeoTiffManagerUpdateLayerGroupThumb({
        layerGroups: layerNames,
        bbox: bbox,
        num: 1,
-        width: 1024,
-        height: 1024,
+        width: widthAndHeightValue,
+        height: widthAndHeightValue,
      })
        .then((res) => {
-          if (res && length == num) {
+          if (res && length == index) {
            createMessage.success('生成新的缩略图成功！');
            chooseUpdateRef.value.clearSelect_layernames();
            chooseUpdateRef.value.loading_layernames = false;
-          } else if (length == num) {
+          } else if (length == index) {
            createMessage.error('生成新的缩略图失败！');
            chooseUpdateRef.value.loading_layernames = false;
          }
        })
        .catch((error) => {
-          if (length == num) {
+          if (length == index) {
            createMessage.error('生成新的缩略图失败！');
            chooseUpdateRef.value.loading_layernames = false;
          }
@ -305,24 +312,24 @@
      // 分割的生成缩略图
      GeoTiffManagerUpdateLayerGroupThumb({
        layerGroups: layerNames,
-        bbox: null,
-        num: 5,
-        width: 4096,
-        height: 4096,
+        num: numValue,
+        width: widthAndHeightValue,
+        height: widthAndHeightValue,
      })
        .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,
-            });
+            if (numValue != 1) {
+              // 生成总的缩略图
+              GeoTiffManagerUpdateLayerGroupThumb({
+                layerGroups: layerNames,
+                num: 1,
+                width: widthAndHeightValue,
+                height: widthAndHeightValue,
+              });
+            }
          } else {
            createMessage.error('生成新的缩略图失败！');
            chooseUpdateRef.value.loading_yearweeks = false;
--- a/src/views/demo/system/geoservermanagement/clound/mapComponent.vue
+++ b/src/views/demo/system/geoservermanagement/clound/mapComponent.vue
@ -333,12 +333,14 @@

  // 影像管理-图层
  const splitNum = 5;
+  let chooseNowRowLayerName = '';
  function GeoTiffManagerRaster(chooseRows, lngLat, zoom, isMove, fillOpacity = 1) {
    // 清除图层
    if (isMove) {
      handlerLocation(lngLat, zoom);
    }
    chooseRows?.forEach((chooseRow, index) => {
+      chooseNowRowLayerName = chooseRows[chooseRows.length - 1].layerName;
      if (
        6 <= chooseRow.layerName.length &&
        chooseRow.layerName.length <= 7 &&
@ -353,7 +355,7 @@
        ];
        map.addSource(chooseRow.layerName + '-image', {
          type: 'image',
-          url: '/geoserver/group/' + chooseRow.layerName + '.png',
+          url: '/geoserver/group/1/' + chooseRow.layerName + '/' + chooseRow.layerName + '.png',
          coordinates: fourpoint,
        });
        map.addLayer({
@ -361,44 +363,43 @@
          type: 'raster',
          source: chooseRow.layerName + '-image',
          minzoom: 0,
-          maxzoom: 10,
+          maxzoom: 14,
        });
        if (map.getLayer('streetLayer')) {
          map.moveLayer(chooseRow.layerName + '-image', 'streetLayer');
        }
-
-        // 周数的
-        // 分割的缩略图（精度高些）
-        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');
-            }
-          }
-        }
+        // // 周数的
+        // // 分割的缩略图（精度高些）
+        // 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/5/' + 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: 14,
+        //     });
+        //     if (map.getLayer('streetLayer')) {
+        //       map.moveLayer(chooseRow.layerName + '-image-' + x + '-' + y, 'streetLayer');
+        //     }
+        //   }
+        // }
      } else {
        const [minLon, minLat, maxLon, maxLat] = chooseRow.bbox
          .split(',')
@ -411,7 +412,7 @@
        ];
        map.addSource(chooseRow.layerName + '-image', {
          type: 'image',
-          url: '/geoserver/group/' + chooseRow.layerName + '.png',
+          url: '/geoserver/group/1/' + chooseRow.layerName + '/' + chooseRow.layerName + '.png',
          coordinates: fourpoint,
        });
        map.addLayer({
@ -599,13 +600,14 @@
      // 删除图片
      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)) {
@ -616,6 +618,18 @@
        }
      }
    }
+    // 地图拖动、缩放操作监听
+    if (layerName == chooseNowRowLayerName) {
+      chooseNowRowLayerName = '';
+      alldata.forEach((data) => {
+        if (map.getLayer('moveend' + data.number)) {
+          map.removeLayer('moveend' + data.number);
+        }
+        if (map.getSource('moveend' + data.number)) {
+          map.removeSource('moveend' + data.number);
+        }
+      });
+    }
  }

  // 重新计算地图大小
@ -659,10 +673,30 @@
    }
  }

+  let alldata: any = [];
+  function getAllData() {
+    const splitnum = 20;
+    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++) {
+        alldata.push({
+          number: '-' + x + '-' + y,
+          point: [
+            Number(117.34046403513817 + x * LNG),
+            Number(34.331716698906675 + y * LAT),
+            Number(117.34046403513817 + (x + 1) * LNG),
+            Number(34.331716698906675 + (y + 1) * LAT),
+          ],
+        });
+      }
+    }
+  }
+
  onMounted(() => {
+    getAllData();
    mapboxgl.accessToken = MAPBOX_TOKEN;
    map = initMap();
-
    // handlerLocation([118.30207505530701, 35.30123435040745], 7.848587811931849);
    map.on('load', () => {
      // 地图跳转
@ -676,13 +710,87 @@
      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);
-
+      // const zoom = map.getZoom();
+      // const bounds = map.getBounds();
+      // const sw = bounds.getSouthWest(); // 西南角
+      // const ne = bounds.getNorthEast(); // 东北角
+      // console.log('zoom:', zoom);
+      // console.log('bounds:', bounds);
+      // console.log('西南角:', sw);
+      // console.log('东北角:', ne);
+      // console.log('坐标:', e.lngLat.lng, e.lngLat.lat);
      // });
+
+      // 地图拖动、缩放操作监听
+      map.on('moveend', function (e) {
+        const zoom = map.getZoom();
+
+        if (zoom > 12.5 && chooseNowRowLayerName != '') {
+          const bounds = map.getBounds();
+          const sw = bounds.getSouthWest(); // 西南角
+          const ne = bounds.getNorthEast(); // 东北角
+
+          if (
+            6 <= chooseNowRowLayerName.length &&
+            chooseNowRowLayerName.length <= 7 &&
+            chooseNowRowLayerName.charAt(4) == '-'
+          ) {
+            let addLayers: any = [];
+
+            // 筛选在地图展示部分的图片
+            alldata.forEach((data) => {
+              if (
+                (((sw.lng <= data.point[0] && data.point[0] <= ne.lng) ||
+                  (sw.lng <= data.point[2] && data.point[2] <= ne.lng)) &&
+                  ((sw.lat <= data.point[1] && data.point[1] <= ne.lat) ||
+                    (sw.lat <= data.point[3] && data.point[3] <= ne.lat))) ||
+                (((data.point[0] <= sw.lng && sw.lng <= data.point[2]) ||
+                  (data.point[0] <= ne.lng && ne.lng <= data.point[2])) &&
+                  ((data.point[1] <= sw.lat && sw.lat <= data.point[3]) ||
+                    (data.point[1] <= ne.lat && ne.lat <= data.point[3])))
+              ) {
+                addLayers.push(data);
+              }
+            });
+
+            // 叠加图片图层资源
+            addLayers?.forEach((add) => {
+              let fourpoint = [
+                [add.point[0], add.point[3]],
+                [add.point[2], add.point[3]],
+                [add.point[2], add.point[1]],
+                [add.point[0], add.point[1]],
+              ];
+              if (!map.getSource('moveend' + add.number)) {
+                map.addSource('moveend' + add.number, {
+                  type: 'image',
+                  url:
+                    '/geoserver/group/30/' +
+                    chooseNowRowLayerName +
+                    +'/' +
+                    chooseNowRowLayerName +
+                    add.number +
+                    '.png',
+                  coordinates: fourpoint,
+                });
+              }
+              if (!map.getLayer('moveend' + add.number)) {
+                map.addLayer({
+                  id: 'moveend' + add.number,
+                  type: 'raster',
+                  source: 'moveend' + add.number,
+                });
+                if (map.getLayer('streetLayer')) {
+                  map.moveLayer('moveend' + add.number, 'streetLayer');
+                }
+                if (map.getLayer('streetLayer')) {
+                  map.moveLayer('moveend' + add.number, chooseNowRowLayerName);
+                }
+              }
+            });
+          }
+        }
+      });
    });
  });