HC_YFZX
/
CaiYuanYiTiHua
11
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

影像周数-切割缩略图提升清晰度，在叠加到地图上

dianlixunjian
滕嵩 2024-12-10 13:35:19 +08:00
parent 59694469a0
commit f685ae67d7
5 changed files with 151 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/api/demo/system.ts
View File

@ -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 });
// 成果管理-航飞图片
// 添加成果

69
src/views/demo/system/achievement/GeoTiffManager/chooseUpdate.vue Normal file
View File

@ -0,0 +1,69 @@
<template>
<div>
<BasicTable @register="chooseUpdateRegisterTable">
<template #toolbar>
<a-button type="success" @click="updateGeoTiff">更新缩略图</a-button>
</template>
</BasicTable>
</div>
</template>
<script lang="ts" setup>
import { defineProps, defineEmits } from 'vue';
import { BasicTable, useTable } from '@/components/Table';
import { chooseUpdateColumns } from './util';
import { useMessage } from '@/hooks/web/useMessage';
const { createMessage } = useMessage();
const props = defineProps(['chooseUpdateData']);
const emit = defineEmits(['generateThumbnail']);
// 选择生成缩略图的影像
const [chooseUpdateRegisterTable, { reload, getSelectRows }] = useTable({
columns: chooseUpdateColumns,
dataSource: props.chooseUpdateData,
showIndexColumn: true,
rowSelection: {
type: 'radio',
},
canResize: true,
useSearchForm: false,
showTableSetting: false,
bordered: true,
immediate: false,
pagination: false,
maxHeight: 500,
});
// 选择更新的缩略图
const updateGeoTiff = () => {
let rows = getSelectRows();
if (rows.length == 0) {
return createMessage.warn('请勾选至少一条数据进行更新');
}
let layerNames: any = '';
rows.forEach((row, index) => {
if (index == 0) {
layerNames = row.yearWeek;
} else {
layerNames = layerNames.concat(',' + row.yearWeek);
}
if (index + 1 == rows.length) {
updateThumbnail(layerNames);
}
});
};
// 生成缩略图
function updateThumbnail(layerNames) {
emit('generateThumbnail', 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>

39
src/views/demo/system/achievement/GeoTiffManager/index.vue
View File

@ -69,6 +69,17 @@
>
<FailYingxiang :failYingxiangData="failYingxiangData" />
</a-modal>
<a-modal
title="选择更新的周数影像"
:open="chooseUpdateOpen"
:maskClosable="false"
:width="500"
:footer="null"
@cancel="chooseUpdateClose"
>
<ChooseUpdate :chooseUpdateData="chooseUpdateData" @generateThumbnail="generateThumbnail" />
</a-modal>
</div>
</template>
@ -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('生成新的缩略图失败！');
}

8
src/views/demo/system/achievement/GeoTiffManager/util.ts
View File

@ -73,4 +73,12 @@ export const failColumns = [
dataIndex: 'action',
width: 100,
}
];
export const chooseUpdateColumns = [
{
title: '年份周数',
dataIndex: 'yearWeek',
width: 200,
},
];

83
src/views/demo/system/geoservermanagement/clound/mapComponent.vue
View File

@ -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);
// });
});