成果管理-成果展示（无时间轴版）
parent
d62b2d02a0
commit
e083d44ff9
|
|
@ -288,11 +288,11 @@
|
|||
type: 'FeatureCollection',
|
||||
features: [],
|
||||
};
|
||||
// let lngList: any = [];
|
||||
// let latList: any = [];
|
||||
let lngList: any = [];
|
||||
let latList: any = [];
|
||||
tasklist?.forEach((item, index) => {
|
||||
// lngList.push(parseFloat(item.gemo.x));
|
||||
// latList.push(parseFloat(item.gemo.y));
|
||||
lngList.push(parseFloat(item.gemo.x));
|
||||
latList.push(parseFloat(item.gemo.y));
|
||||
let feature: any = {
|
||||
type: 'Feature',
|
||||
geometry: {
|
||||
|
|
@ -311,12 +311,11 @@
|
|||
});
|
||||
|
||||
// 确定中心点和zoom等级
|
||||
// let result = calculateCenterAndZoom(lngList, latList);
|
||||
// console.log(result);
|
||||
let result = calculateCenterAndZoom(lngList, latList);
|
||||
// 航飞图片-图层
|
||||
mapboxComponentRef.value.AchievementManageRaster(
|
||||
taskLayerGeoJson,
|
||||
[118.30207505530701, 35.30123435040745],
|
||||
result.center,
|
||||
7.848587811931849,
|
||||
);
|
||||
}
|
||||
|
|
@ -353,7 +352,7 @@
|
|||
const deltaLng = maxLng - minLng;
|
||||
const deltaLat = maxLat - minLat;
|
||||
// 估算合适的缩放级别
|
||||
let zoom = 14 - Math.log2((Math.max(deltaLng, deltaLat) * 360) / 360); // 360度为地球一圈
|
||||
let zoom = 14 - Math.log2(Math.max(deltaLng, deltaLat)); // 直接使用最大偏移量
|
||||
zoom = Math.max(8, Math.min(15, zoom)); // 确保缩放级别在合理范围内
|
||||
return {
|
||||
center: [centerLng, centerLat],
|
||||
|
|
|
|||
|
|
@ -0,0 +1,389 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="case-tree-container">
|
||||
<div class="title"> 图层列表 </div>
|
||||
<div class="case-tree">
|
||||
<a-directory-tree
|
||||
v-model:selectedKeys="selectedKeys"
|
||||
:tree-data="treeData"
|
||||
@select="onSelect"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<MapComponent
|
||||
ref="mapboxComponentRef"
|
||||
:style="{
|
||||
position: 'absolute',
|
||||
height: `calc(100vh - 90px)`,
|
||||
width: `100%`,
|
||||
marginLeft: '6px',
|
||||
top: '0px',
|
||||
left: '0px',
|
||||
zIndex: '0',
|
||||
}"
|
||||
@handleOpen="handleOpen"
|
||||
/>
|
||||
</div>
|
||||
<a-modal :open="modalOpen" :title="modalTitle" :footer="null" @cancel="handleCancel">
|
||||
<a-image style="height: 100%; width: 100%" :src="modalImage" />
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, watch, onMounted } from 'vue';
|
||||
import { BasicTree, TreeItem, TreeActionType } from '@/components/Tree';
|
||||
import type { TreeProps } from 'ant-design-vue';
|
||||
// vben
|
||||
import { useMessage } from '@/hooks/web/useMessage';
|
||||
import MapComponent from '@/views/demo/system/geoservermanagement/clound/mapComponent.vue';
|
||||
import {
|
||||
AchievementManageAddImageexif,
|
||||
AchievementManageIntactById,
|
||||
AchievementManageAddTask,
|
||||
AchievementManageListTask,
|
||||
AchievementManageListDroneShpImageexif,
|
||||
GeoTiffManagerUpdateGeoTiff,
|
||||
GeoTiffManagerLoadPage,
|
||||
GeoTiffManagerGet,
|
||||
getGeomData,
|
||||
getStatisticalList,
|
||||
ShpGeoLayerAdd,
|
||||
ShpGeoLayerLoadPage,
|
||||
ShpGeoLayerGet,
|
||||
ShpGeoLayerUpdateLayer,
|
||||
ShpGeoLayerDelete,
|
||||
ShpGeoLayerParseShpInfo,
|
||||
} from '@/api/demo/system';
|
||||
import { prepareTreeData, prepareTreeData2, prepareTreeData3 } from './util';
|
||||
import dayjs from 'dayjs';
|
||||
// 图片路径拼接
|
||||
import { getAppEnvConfig } from '@/utils/env';
|
||||
const { VITE_GLOB_API_URL } = getAppEnvConfig();
|
||||
const VITE_GLOB_API_URL_VAR = ref<String>(VITE_GLOB_API_URL + '/');
|
||||
|
||||
const { createMessage } = useMessage();
|
||||
|
||||
const selectedKeys = ref<string[]>([]);
|
||||
const treeData: any = ref(prepareTreeData);
|
||||
let tableData1: any = [];
|
||||
let tableData2: any = [];
|
||||
let tableData3: any = [];
|
||||
let tableData3_tupian: any = [];
|
||||
|
||||
// 右边树的数据
|
||||
function fetch() {
|
||||
// 矢量图层
|
||||
ShpGeoLayerLoadPage({
|
||||
page: 1,
|
||||
limit: 100,
|
||||
}).then((res) => {
|
||||
tableData1 = res.items;
|
||||
treeData.value[0].children = [];
|
||||
res.items.forEach((item) => {
|
||||
treeData.value[0].children.push({
|
||||
key: item.id,
|
||||
title: item.serverName,
|
||||
});
|
||||
});
|
||||
});
|
||||
// 历史影像
|
||||
GeoTiffManagerLoadPage({
|
||||
page: 1,
|
||||
limit: 100,
|
||||
}).then((res) => {
|
||||
tableData2 = res.items;
|
||||
treeData.value[1].children = [];
|
||||
res.items.forEach((item) => {
|
||||
treeData.value[1].children.push({
|
||||
key: item.id,
|
||||
title: item.layerName,
|
||||
});
|
||||
});
|
||||
});
|
||||
// 航飞图片
|
||||
AchievementManageListTask({
|
||||
pageIndex: 1,
|
||||
pageSize: 100,
|
||||
}).then((res) => {
|
||||
tableData3 = res.items;
|
||||
tableData3_tupian = [];
|
||||
treeData.value[2].children = [];
|
||||
res.items.forEach((item1) => {
|
||||
if (item1.imageCount > 0) {
|
||||
// 航飞图片-任务
|
||||
let children: any = [];
|
||||
AchievementManageListDroneShpImageexif({
|
||||
pageIndex: 1,
|
||||
pageSize: item1.imageCount,
|
||||
taskId: item1.id,
|
||||
}).then((res2) => {
|
||||
res2.items.forEach((item2) => {
|
||||
tableData3_tupian.push(item2);
|
||||
children.push({
|
||||
key: item2.id,
|
||||
title: item2.uploadTime,
|
||||
});
|
||||
});
|
||||
// 添加进树里
|
||||
treeData.value[2].children.push({
|
||||
key: item1.id,
|
||||
title: item1.taskName + '(' + item1.imageCount + ')',
|
||||
children: children,
|
||||
});
|
||||
});
|
||||
} else {
|
||||
treeData.value[2].children.push({
|
||||
key: item1.id,
|
||||
title: item1.taskName + '(' + item1.imageCount + ')',
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// 航飞图片-任务
|
||||
function DroneShpImageexif(record) {
|
||||
let children: any = [];
|
||||
AchievementManageListDroneShpImageexif({
|
||||
pageIndex: 1,
|
||||
pageSize: record.imageCount,
|
||||
}).then((res) => {
|
||||
res.items.forEach((item) => {
|
||||
children.push({
|
||||
key: item.id,
|
||||
title: item.uploadTime,
|
||||
});
|
||||
});
|
||||
});
|
||||
return children;
|
||||
}
|
||||
|
||||
// 地图ref
|
||||
const mapboxComponentRef = ref();
|
||||
// 树选中
|
||||
const onSelect: TreeProps['onSelect'] = (selectedKeys, info) => {
|
||||
console.log(177, selectedKeys, info);
|
||||
if (!['1', '2', '3'].includes(selectedKeys[selectedKeys.length - 1])) {
|
||||
// 图层管理-图层
|
||||
if (info?.node?.parent?.key == '1') {
|
||||
tableData1.forEach((data) => {
|
||||
if (selectedKeys[0] == data.id) {
|
||||
// // 获取图层中心
|
||||
// getGeomData({ dataTable: data.dataTable }).then((res) => {
|
||||
// if (res == undefined) {
|
||||
// createMessage.error('数据库不存在此图层的数据表');
|
||||
// } else {
|
||||
// let st: any = res.slice(6, -1);
|
||||
// st = st.split(' ');
|
||||
mapboxComponentRef.value.GeoserverManagementRaster(
|
||||
data,
|
||||
[118.30207505530701, 35.30123435040745],
|
||||
7.848587811931849,
|
||||
);
|
||||
// }
|
||||
// });
|
||||
}
|
||||
});
|
||||
}
|
||||
// 影像管理-图层
|
||||
else if (info?.node?.parent?.key == '2') {
|
||||
tableData2.forEach((data) => {
|
||||
if (selectedKeys[0] == data.id) {
|
||||
// let bbox = getBboxFromUrl(data.accessUrl);
|
||||
// let lngLat = getCenterPoint(bbox);
|
||||
mapboxComponentRef.value.GeoTiffManagerRaster(
|
||||
data,
|
||||
[118.30207505530701, 35.30123435040745],
|
||||
7.848587811931849,
|
||||
);
|
||||
}
|
||||
});
|
||||
}
|
||||
// 航飞图片-图层
|
||||
else if (info?.node?.parent?.key == '3') {
|
||||
// console.log('3', selectedKeys, info);
|
||||
tableData3.forEach((data) => {
|
||||
if (selectedKeys[0] == data.id) {
|
||||
AchievementManageListDroneShpImageexif({
|
||||
pageIndex: 1,
|
||||
pageSize: data.imageCount,
|
||||
}).then((res) => {
|
||||
if (res.items.length > 0) {
|
||||
handlerUpdateTaskLayerData(res.items);
|
||||
} else {
|
||||
createMessage.info('当前选中的任务并无航飞图片');
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
// 航飞图片-任务
|
||||
else {
|
||||
let filter = tableData3_tupian.filter((item) => item.id == selectedKeys);
|
||||
handlerUpdateTaskLayerData(filter);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 影像管理-从参数中获取 bbox 的值
|
||||
function getBboxFromUrl(url) {
|
||||
const urlObj = new URL(url);
|
||||
const params = new URLSearchParams(urlObj.search);
|
||||
const bbox = params.get('bbox');
|
||||
return bbox;
|
||||
}
|
||||
|
||||
// 影像管理-计算中心点
|
||||
function getCenterPoint(bbox) {
|
||||
const coords = bbox.split(',').map((coord) => parseFloat(coord));
|
||||
const [minLon, minLat, maxLon, maxLat] = coords;
|
||||
const centerLon = (minLon + maxLon) / 2;
|
||||
const centerLat = (minLat + maxLat) / 2;
|
||||
return [centerLon, centerLat];
|
||||
}
|
||||
|
||||
// 航飞图片-无人机图层
|
||||
function handlerUpdateTaskLayerData(tasklist) {
|
||||
let taskLayerGeoJson = {
|
||||
type: 'FeatureCollection',
|
||||
features: [],
|
||||
};
|
||||
let lngList: any = [];
|
||||
let latList: any = [];
|
||||
tasklist?.forEach((item, index) => {
|
||||
lngList.push(parseFloat(item.gemo.x));
|
||||
latList.push(parseFloat(item.gemo.y));
|
||||
let feature: any = {
|
||||
type: 'Feature',
|
||||
geometry: {
|
||||
type: 'Point',
|
||||
coordinates: [parseFloat(item.gemo.x), parseFloat(item.gemo.y)],
|
||||
},
|
||||
properties: {
|
||||
taskName: getTaskNameBytaskId(item.taskId) + item.uploadTime,
|
||||
path: item.path,
|
||||
// model: item.model,
|
||||
lng: item.gemo.x,
|
||||
lat: item.gemo.y,
|
||||
},
|
||||
};
|
||||
taskLayerGeoJson.features.push(feature);
|
||||
});
|
||||
|
||||
// 确定中心点和zoom等级
|
||||
// let result = calculateCenterAndZoom(lngList, latList);
|
||||
// 航飞图片-图层
|
||||
mapboxComponentRef.value.AchievementManageRaster(
|
||||
taskLayerGeoJson,
|
||||
[118.30207505530701, 35.30123435040745],
|
||||
7.848587811931849,
|
||||
);
|
||||
}
|
||||
|
||||
// 航飞图片-获取任务名称
|
||||
function getTaskNameBytaskId(taskid) {
|
||||
let resultName = '';
|
||||
tableData3.forEach((element) => {
|
||||
if (element.id == taskid) {
|
||||
resultName = element.taskName;
|
||||
}
|
||||
});
|
||||
if (resultName) {
|
||||
return resultName + '\n';
|
||||
} else {
|
||||
return resultName;
|
||||
}
|
||||
}
|
||||
|
||||
// 航飞图片-确定中心点和zoom等级
|
||||
function calculateCenterAndZoom(lngList, latList) {
|
||||
// 检查输入的有效性
|
||||
if (!lngList || !latList || lngList.length !== latList.length) {
|
||||
throw new Error('');
|
||||
}
|
||||
// 计算中心点
|
||||
const centerLng = lngList.reduce((acc, lng) => acc + lng, 0) / lngList.length;
|
||||
const centerLat = latList.reduce((acc, lat) => acc + lat, 0) / latList.length;
|
||||
// 计算经纬度范围
|
||||
const minLng = Math.min(...lngList);
|
||||
const maxLng = Math.max(...lngList);
|
||||
const minLat = Math.min(...latList);
|
||||
const maxLat = Math.max(...latList);
|
||||
const deltaLng = maxLng - minLng;
|
||||
const deltaLat = maxLat - minLat;
|
||||
// 估算合适的缩放级别
|
||||
let zoom = 14 - Math.log2(Math.max(deltaLng, deltaLat)); // 直接使用最大偏移量
|
||||
zoom = Math.max(8, Math.min(15, zoom)); // 确保缩放级别在合理范围内
|
||||
return {
|
||||
center: [centerLng, centerLat],
|
||||
zoomLevel: zoom,
|
||||
};
|
||||
}
|
||||
onMounted(() => {
|
||||
fetch();
|
||||
});
|
||||
|
||||
// 点击地图上的无人机图标后展示图片------------------------------------------------------------
|
||||
// 窗口
|
||||
const modalOpen = ref(false);
|
||||
const modalTitle = ref('');
|
||||
const modalImage = ref('');
|
||||
// 打开窗口
|
||||
const handleOpen = (path) => {
|
||||
modalOpen.value = true;
|
||||
modalTitle.value = '';
|
||||
// 正则表达式验证函数
|
||||
if (isValidUrl(path)) {
|
||||
modalImage.value = path;
|
||||
} else {
|
||||
modalImage.value = VITE_GLOB_API_URL_VAR.value + path;
|
||||
}
|
||||
};
|
||||
// 关闭窗口
|
||||
const handleCancel = () => {
|
||||
modalOpen.value = false;
|
||||
modalTitle.value = '';
|
||||
modalImage.value = '';
|
||||
};
|
||||
// 正则表达式验证函数
|
||||
function isValidUrl(url: string): boolean {
|
||||
const regex =
|
||||
/^(?:http|ftp)s?:\/\/(?:(?:[A-Z0-9](?:[A-Z0-9-]{0,61}[A-Z0-9])?\.)+(?:[A-Z]{2,6}\.?|[A-Z0-9-]{2,}\.?)|localhost|\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}|\[?[A-F0-9]*:[A-F0-9:]+\]?)(?::\d+)?(?:\/?|[\/?]\S+)$/i;
|
||||
return regex.test(url);
|
||||
}
|
||||
</script>
|
||||
<style type="less" scoped>
|
||||
.case-tree-container {
|
||||
width: 300px;
|
||||
height: 720px;
|
||||
background: #041b36;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: 100px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.title {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
background-image: url('/videosupervision/title.png');
|
||||
background-size: 100% 100%;
|
||||
line-height: 40px;
|
||||
text-indent: 18px;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.case-tree {
|
||||
padding: 10px 24px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
::v-deep .case-tree {
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
import type { TreeProps } from 'ant-design-vue';
|
||||
|
||||
export const prepareTreeData: TreeProps['treeData'] = [
|
||||
{
|
||||
title: '矢量图层',
|
||||
key: '1',
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
title: '历史影像',
|
||||
key: '2',
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
title: '航飞图片',
|
||||
key: '3',
|
||||
children: [],
|
||||
},
|
||||
];
|
||||
|
|
@ -6,6 +6,11 @@ export const columns = [
|
|||
dataIndex: 'id',
|
||||
ifShow: false,
|
||||
},
|
||||
{
|
||||
title: '影像名称',
|
||||
dataIndex: 'layerName',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '数据表名',
|
||||
dataIndex: 'dataTable',
|
||||
|
|
|
|||
|
|
@ -9,6 +9,9 @@
|
|||
<a-tab-pane key="3" tab="航飞图片">
|
||||
<AchievementManage ref="AchievementManageRef" />
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="4" tab="成果展示">
|
||||
<Display ref="DisplayRef" />
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
|
|
@ -17,14 +20,17 @@
|
|||
import GeoserverManagement from '@/views/demo/system/geoservermanagement/index.vue';
|
||||
import GeoTiffManager from './GeoTiffManager/index.vue';
|
||||
import AchievementManage from './AchievementManage/index.vue';
|
||||
import Display from './Display/index.vue';
|
||||
|
||||
const activeKey = ref('1');
|
||||
const activeKey = ref('4');
|
||||
// 图层管理
|
||||
const GeoserverManagementRef = ref();
|
||||
// 影像管理
|
||||
const GeoTiffManagerRef = ref();
|
||||
// 航飞图片
|
||||
const AchievementManageRef = ref();
|
||||
// 成果展示
|
||||
const DisplayRef = ref();
|
||||
|
||||
function changeTabs(activeKey) {
|
||||
console.log(activeKey);
|
||||
|
|
@ -34,6 +40,8 @@
|
|||
// 影像管理
|
||||
} else if (activeKey == 3) {
|
||||
// 航飞图片
|
||||
} else if (activeKey == 4) {
|
||||
// 成果展示
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -182,6 +182,7 @@
|
|||
// 县区边界
|
||||
handlerDealStreet('GeoserverManagementRaster');
|
||||
handlerDealCountry('GeoserverManagementRaster');
|
||||
// handlerLocation([118.0676058205292, 35.443435], zoom);
|
||||
handlerLocation(lngLat, zoom);
|
||||
|
||||
let format =
|
||||
|
|
@ -197,6 +198,8 @@
|
|||
'&styles=&bbox={bbox-epsg-3857}&width=256&height=256&srs=' +
|
||||
chooseRow.spatialRef +
|
||||
format,
|
||||
// 'http://60.213.14.14:8060/geoserver/feixian/wms?service=WMS&version=1.1.0&request=GetMap&layers=feixian:yingxiang&styles=&bbox={bbox-epsg-3857}&width=256&height=256&srs=EPSG:3857&format=image/png&TRANSPARENT=TRUE',
|
||||
// 'http://221.2.83.254:9007/geoserver/ksp/wms?service=WMS&version=1.1.0&request=GetMap&layers=ksp:linqubianyaqi&styles=&bbox={bbox-epsg-3857}&width=256&height=256&srs=EPSG:3857&format=image/png&TRANSPARENT=TRUE&cql_filter=is_del%20=0',
|
||||
// 'http://192.168.10.131:8080/geoserver/my_workspace/wms?service=WMS&version=1.1.0&request=GetMap&layers=my_workspace:parse_shpinfo_text3&styles=&bbox=118.32113719388846%2C35.64528587987562%2C118.89333296872105%2C36.17725393199594&width=256&height=256&srs=EPSG:4326&format=image/png&TRANSPARENT=TRUE&exceptions=application%2Fvnd.ogc.se_inimage',
|
||||
// 'http://175.27.168.120:8080/geoserver/yinanxian/wms?SERVICE=WMS&VERSION=1.1.1&REQUEST=GetMap&FORMAT=image%2Fjpeg&TRANSPARENT=true&LAYERS=yinanxian%3Ayingxiang_01&exceptions=application%2Fvnd.ogc.se_inimage&SRS=EPSG%3A4548&STYLES=&WIDTH=529&HEIGHT=769&BBOX=607366.3276808303%2C3919435.438766631%2C612405.5241015075%2C3926765.179014889',
|
||||
],
|
||||
|
|
|
|||
Loading…
Reference in New Issue