From f685ae67d7c40bbf5994e3fe2e793928a24483df Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=BB=95=E5=B5=A9?= <17854119262@163.com> Date: Tue, 10 Dec 2024 13:35:19 +0800 Subject: [PATCH] =?UTF-8?q?=E5=BD=B1=E5=83=8F=E5=91=A8=E6=95=B0-=E5=88=87?= =?UTF-8?q?=E5=89=B2=E7=BC=A9=E7=95=A5=E5=9B=BE=E6=8F=90=E5=8D=87=E6=B8=85?= =?UTF-8?q?=E6=99=B0=E5=BA=A6=EF=BC=8C=E5=9C=A8=E5=8F=A0=E5=8A=A0=E5=88=B0?= =?UTF-8?q?=E5=9C=B0=E5=9B=BE=E4=B8=8A?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/demo/system.ts | 2 +- .../GeoTiffManager/chooseUpdate.vue | 69 +++++++++++++++ .../achievement/GeoTiffManager/index.vue | 39 ++++++--- .../system/achievement/GeoTiffManager/util.ts | 8 ++ .../clound/mapComponent.vue | 83 ++++++++++--------- 5 files changed, 151 insertions(+), 50 deletions(-) create mode 100644 src/views/demo/system/achievement/GeoTiffManager/chooseUpdate.vue diff --git a/src/api/demo/system.ts b/src/api/demo/system.ts index 336b98ba..50226eca 100644 --- a/src/api/demo/system.ts +++ b/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 + "&num=" + params.num }); // 成果管理-航飞图片 // 添加成果 diff --git a/src/views/demo/system/achievement/GeoTiffManager/chooseUpdate.vue b/src/views/demo/system/achievement/GeoTiffManager/chooseUpdate.vue new file mode 100644 index 00000000..e8298071 --- /dev/null +++ b/src/views/demo/system/achievement/GeoTiffManager/chooseUpdate.vue @@ -0,0 +1,69 @@ + + + diff --git a/src/views/demo/system/achievement/GeoTiffManager/index.vue b/src/views/demo/system/achievement/GeoTiffManager/index.vue index fb910be8..0f792d41 100644 --- a/src/views/demo/system/achievement/GeoTiffManager/index.vue +++ b/src/views/demo/system/achievement/GeoTiffManager/index.vue @@ -69,6 +69,17 @@ > + + + + @@ -85,6 +96,7 @@ import { columns, searchFormSchema } 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, @@ -144,7 +156,6 @@ reload(); } else { failYingxiangData.value = getFailYingxiangData(res); - // console.log(failYingxiangData.value); failOpen.value = true; reload(); } @@ -219,6 +230,14 @@ } // 在本地路径生成缩略图------------------------------------------------------------------------------- + // 选择生成缩略图的影像open + const chooseUpdateOpen = ref(false); + const chooseUpdateData: any = ref([]); + // 选择更新的周数影像弹窗关闭 + function chooseUpdateClose() { + chooseUpdateOpen.value = false; + } + // 在本地路径生成缩略图 async function updateYearWeekThumbnail() { GeoTiffManagerLoadPage({ page: 1, @@ -229,15 +248,14 @@ // 转换时间数组(年份-周数) uniqueKeysArray = [...new Set(uniqueKeysArray.map(convertToYearWeek))]; // 生成对应年份-周数的缩略图 - let layerNames: any = ''; + chooseUpdateData.value = []; uniqueKeysArray.forEach((item, index) => { - if (index == 0) { - layerNames = item; - } else { - layerNames = layerNames.concat(',' + item); - } + chooseUpdateData.value.push({ + yearWeek: item, + }); }); - // 更换全部缩略图 + chooseUpdateOpen.value = true; + // 更换全部影像的缩略图 // res.items.forEach((item, index) => { // if (layerNames === '') { // layerNames = item.layerName; @@ -245,16 +263,15 @@ // layerNames = layerNames.concat(',' + item.layerName); // } // }); - // 生成缩略图 - generateThumbnail(layerNames); }); } // 生成缩略图 async function generateThumbnail(layerNames) { - GeoTiffManagerUpdateLayerGroupThumb({ layerGroups: layerNames }).then((res) => { + GeoTiffManagerUpdateLayerGroupThumb({ layerGroups: layerNames, num: 10 }).then((res) => { if (res) { createMessage.success('生成新的缩略图成功！'); + chooseUpdateOpen.value = false; } else { createMessage.error('生成新的缩略图失败！'); } diff --git a/src/views/demo/system/achievement/GeoTiffManager/util.ts b/src/views/demo/system/achievement/GeoTiffManager/util.ts index b4671e17..6d3befd5 100644 --- a/src/views/demo/system/achievement/GeoTiffManager/util.ts +++ b/src/views/demo/system/achievement/GeoTiffManager/util.ts @@ -73,4 +73,12 @@ export const failColumns = [ dataIndex: 'action', width: 100, } +]; + +export const chooseUpdateColumns = [ + { + title: '年份周数', + dataIndex: 'yearWeek', + width: 200, + }, ]; \ No newline at end of file diff --git a/src/views/demo/system/geoservermanagement/clound/mapComponent.vue b/src/views/demo/system/geoservermanagement/clound/mapComponent.vue index 9d5a1191..a7dc612a 100644 --- a/src/views/demo/system/geoservermanagement/clound/mapComponent.vue +++ b/src/views/demo/system/geoservermanagement/clound/mapComponent.vue @@ -346,34 +346,38 @@ ) { // 周数的 // 提前准备好的缩略图 - 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', - }); - if (map.getLayer('streetLayer')) { - map.moveLayer(chooseRow.layerName + '-image', 'streetLayer'); + const NUM = 10; + const LNG = Number(((119.27763051149853 - 117.34046403513817) / NUM).toFixed(5)); + const LAT = Number(((36.263686454243626 - 34.331716698906675) / NUM).toFixed(5)); + + for (let x = 0; x < NUM; x++) { + for (let y = 0; y < NUM; 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: 0, + maxzoom: 15, + }); + if (map.getLayer('streetLayer')) { + map.moveLayer(chooseRow.layerName + '-image-' + x + '-' + y, 'streetLayer'); + } + } } - setTimeout(() => { - // 等加载好真正的周图层后，删除提前准备好的缩略图 - if (map.getLayer(chooseRow.layerName + '-image')) { - map.removeLayer(chooseRow.layerName + '-image'); - } - if (map.getSource(chooseRow.layerName + '-image')) { - map.removeSource(chooseRow.layerName + '-image'); - } - }, 25000); } // geoserver @@ -386,14 +390,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 +405,7 @@ id: chooseRow.layerName, type: 'raster', source: chooseRow.layerName, - layout: { - visibility: 'visible', - }, + minzoom: 14, }); if (map.getLayer('streetLayer')) { map.moveLayer(chooseRow.layerName, 'streetLayer'); @@ -555,12 +555,17 @@ // 删除图片 map.removeImage('diagonal-stripe'); } - // 删除提前准备好的缩略图 - if (map.getLayer(layerName + '-image')) { - map.removeLayer(layerName + '-image'); - } - if (map.getSource(layerName + '-image')) { - map.removeSource(layerName + '-image'); + // 删除准备好的缩略图 + const NUM = 10; + for (let x = 0; x < NUM; x++) { + for (let y = 0; y < NUM; 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); + } + } } } @@ -602,6 +607,8 @@ handlerDealCountry(null); // map.on('click', function (e) { + // const zoom = map.getZoom(); + // console.log('地图缩放级别更新为:', zoom); // console.log('点击位置的坐标:', e.lngLat.lng, e.lngLat.lat); // }); });