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

矢量图层和历史影像各个选项独立、矢量图层图层样式

dianlixunjian
滕嵩 2024-09-29 11:02:11 +08:00
parent bbf100e3bc
commit f3fdde8e4f
3 changed files with 159 additions and 115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

129
src/views/demo/system/achievement/Display/index.vue
View File

@ -105,8 +105,9 @@
let tableData1_id_list: any = [];
let tableData2_id_list: any = [];
let tableData3_id_list: any = [];
// let isTimeMove = false;
let moveKey = null;
let filter_tuceng_old: any = [];
let filter_yingxiang_old: any = [];
let filter_hangfei_old: any = [];
let startTime = dayjs().startOf('year').format('YYYY-MM-DD HH:mm:ss');
let endTime = dayjs().endOf('day').format('YYYY-MM-DD HH:mm:ss');
@ -242,16 +243,18 @@
let filter_tuceng: any = [];
let filter_yingxiang: any = [];
let filter_hangfei: any = [];
moveKey = null;
console.log(243, checkedKeys);
if (!checkedKeys_now || checkedKeys_now.length == 0) {
if (checkedKeys_now.length == 0) {
// 清除全部图层
mapboxComponentRef.value.clearTaskLayer('GeoserverManagementRaster');
tableData1.forEach((data) => {
tableData1?.forEach((data) => {
mapboxComponentRef.value.clearTaskLayer(data.dataTable);
});
mapboxComponentRef.value.clearTaskLayer('GeoTiffManagerRaster');
tableData2?.forEach((data) => {
mapboxComponentRef.value.clearTaskLayer(data.layerName);
});
mapboxComponentRef.value.clearTaskLayer('AchievementManageRaster');
} else {
let checkedKeys_move = checkedKeys_now.filter(
@ -269,9 +272,6 @@
// ) {
filter_tuceng.push(data);
// }
if (index == checkedKeys_move.length - 1) {
moveKey = null;
}
}
});
}
@ -286,9 +286,6 @@
dayjs(endTime).isAfter(dayjs(data.dateDir))
) {
filter_yingxiang.push(data);
if (index == checkedKeys_move.length - 1) {
moveKey = data;
}
}
}
});
@ -307,9 +304,6 @@
// ) {
filter_hangfei.push(tupian);
// }
if (index == checkedKeys_move.length - 1) {
moveKey = tupian;
}
}
});
} else {
@ -318,86 +312,62 @@
}
});
}
// 航飞图片-任务
// else {
// let filter = tableData3_tupian.value.filter((item) => item.id == checkedKey);
// filter?.forEach((f) => {
// if (!filter_hangfei.includes(f)) {
// if (dayjs(startTime).isBefore(f.uploadTime) && dayjs(endTime).isAfter(f.uploadTime)) {
// filter_hangfei.push(f);
// }
// }
// });
// }
});
// 图层管理
if (filter_tuceng.length > 0) {
tableData1.forEach((data) => {
mapboxComponentRef.value.clearTaskLayer(data.dataTable);
});
mapboxComponentRef.value.GeoserverManagementRaster(
filter_tuceng,
// [118.30207505530701, 35.30123435040745],
// 7.848587811931849,
null,
null,
false,
);
console.log(filter_tuceng_old, filter_tuceng);
if (!arraysEqual(filter_tuceng_old, filter_tuceng)) {
let remove = filter_tuceng_old.filter((item) => !filter_tuceng.includes(item));
remove.forEach((data) => {
mapboxComponentRef.value.clearTaskLayer(data.dataTable);
});
let add = filter_tuceng.filter((item) => !filter_tuceng_old.includes(item));
mapboxComponentRef.value.GeoserverManagementRaster(add, null, null, false);
}
} else {
mapboxComponentRef.value.clearTaskLayer('GeoserverManagementRaster');
tableData1.forEach((data) => {
mapboxComponentRef.value.clearTaskLayer(data.dataTable);
});
}
// 影像管理
if (filter_yingxiang.length > 0) {
mapboxComponentRef.value.GeoTiffManagerRaster(
filter_yingxiang,
// [118.30207505530701, 35.30123435040745],
// 7.848587811931849,
null,
null,
false,
);
if (!arraysEqual(filter_yingxiang_old, filter_yingxiang)) {
let remove = filter_yingxiang_old.filter((item) => !filter_yingxiang.includes(item));
remove?.forEach((data) => {
mapboxComponentRef.value.clearTaskLayer(data.dataTable);
});
let add = filter_yingxiang.filter((item) => !filter_yingxiang_old.includes(item));
mapboxComponentRef.value.GeoTiffManagerRaster(add, null, null, false);
}
} else {
mapboxComponentRef.value.clearTaskLayer('GeoTiffManagerRaster');
tableData2.forEach((data) => {
mapboxComponentRef.value.clearTaskLayer(data.layerName);
});
}
// 航飞图片-图层、任务
if (filter_hangfei.length > 0) {
handlerUpdateTaskLayerData(filter_hangfei);
if (!arraysEqual(filter_hangfei_old, filter_hangfei)) {
handlerUpdateTaskLayerData(filter_hangfei);
}
} else {
mapboxComponentRef.value.clearTaskLayer('AchievementManageRaster');
}
// // 最后选中的有效项目，移动
// if (moveKey != null && !isTimeMove) {
// // console.log(358, moveKey);
// if (moveKey.geometry) {
// let lngLat: any = moveKey.geometry.slice(6, -1);
// lngLat = lngLat.split(' ');
// // 检测坐标系
// const result = isProjectedCoordinates(parseFloat(lngLat[0]), parseFloat(lngLat[1]));
// if (result) {
// lngLat[0] = result[0];
// lngLat[1] = result[1];
// }
// mapboxComponentRef.value.handlerLocation([lngLat[0], lngLat[1]], 10);
// }
// if (moveKey.accessUrl) {
// let bbox = getBboxFromUrl(moveKey.accessUrl);
// let lngLat = getCenterPoint(bbox);
// // 检测坐标系
// const result = isProjectedCoordinates(parseFloat(lngLat[0]), parseFloat(lngLat[1]));
// if (result) {
// lngLat[0] = result[0];
// lngLat[1] = result[1];
// }
// mapboxComponentRef.value.handlerLocation([lngLat[0], lngLat[1]], 10);
// }
// }
// isTimeMove = false;
// 记录成旧数据
filter_tuceng_old = filter_tuceng;
filter_yingxiang_old = filter_yingxiang;
filter_hangfei_old = filter_hangfei;
}
};
// 对比数据
function arraysEqual(a, b) {
if (a.length !== b.length) return false;
for (let i = 0; i < a.length; i++) {
if (a[i] !== b[i]) return false;
}
return true;
}
// 航飞图片-无人机图层
function handlerUpdateTaskLayerData(tasklist) {
let taskLayerGeoJson = {
@ -446,14 +416,7 @@
});
// 航飞图片-图层
mapboxComponentRef.value.AchievementManageRaster(
taskLayerGeoJson,
// [118.30207505530701, 35.30123435040745],
// 7.848587811931849,
null,
null,
false,
);
mapboxComponentRef.value.AchievementManageRaster(taskLayerGeoJson, null, null, false);
}
// 投影坐标系=>地理坐标系
function isProjectedCoordinates(x, y) {

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

@ -11,7 +11,7 @@
<a-col :span="12">
<div>
<MapComponent
ref="mapboxComponent"
ref="mapboxComponentRef"
style="
position: absolute;
top: 16px;
@ -50,7 +50,7 @@
const { createMessage } = useMessage();
// 影像管理
const [registerTable, { reload, getSelectRows }] = useTable({
const [registerTable, { reload, getDataSource, getSelectRows }] = useTable({
title: '影像管理',
api: GeoTiffManagerLoadPage,
columns: columns,
@ -83,8 +83,11 @@
};
// 行选中
const mapboxComponent = ref();
const mapboxComponentRef = ref();
function handRowClick(record) {
getDataSource().forEach((data) => {
mapboxComponentRef.value.clearTaskLayer(data.layerName);
});
let bbox = getBboxFromUrl(record.accessUrl);
let lngLat = getCenterPoint(bbox);
console.log(lngLat);
@ -96,7 +99,7 @@
}
let chooseRows: any = [];
chooseRows.push(record);
mapboxComponent.value.GeoTiffManagerRaster(chooseRows, lngLat, 11, true);
mapboxComponentRef.value.GeoTiffManagerRaster(chooseRows, lngLat, 11, true);
}
function isProjectedCoordinates(x, y) {

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

@ -272,13 +272,94 @@
type: 'fill',
source: chooseRow.dataTable,
'source-layer': chooseRow.dataTable,
paint: chooseRow.style
? chooseRow.style
: {
'fill-opacity': 1,
'fill-color': 'red',
'fill-outline-color': 'green',
},
paint: {
'fill-opacity': 1,
'fill-color': [
'case',
['==', ['get', 'dlmc'], '采矿用地'],
'#30123b',
['==', ['get', 'dlmc'], '城镇村道路用地'],
'#38266a',
['==', ['get', 'dlmc'], '城镇住宅用地'],
'#3e3892',
['==', ['get', 'dlmc'], '干渠'],
'#424ab4',
['==', ['get', 'dlmc'], '高教用地'],
'#455dd0',
['==', ['get', 'dlmc'], '工业用地'],
'#476de5',
['==', ['get', 'dlmc'], '公路用地'],
'#448ffe',
['==', ['get', 'dlmc'], '公用设施用地'],
'#3e3892',
['==', ['get', 'dlmc'], '公园与绿地'],
'#3c9ffd',
['==', ['get', 'dlmc'], '沟渠'],
'#31aff5',
['==', ['get', 'dlmc'], '灌木林地'],
'#26bfe8',
['==', ['get', 'dlmc'], '广场用地'],
'#1cced7',
['==', ['get', 'dlmc'], '果园'],
'#18dbc6',
['==', ['get', 'dlmc'], '旱地'],
'#1be5b5',
['==', ['get', 'dlmc'], '河流水面'],
'#27eea4',
['==', ['get', 'dlmc'], '机场用地'],
'#3af490',
['==', ['get', 'dlmc'], '机关团体新闻出版用地'],
'#52fa7a',
['==', ['get', 'dlmc'], '交通服务场站用地'],
'#6bfe64',
['==', ['get', 'dlmc'], '科教文卫用地'],
'#85ff51',
['==', ['get', 'dlmc'], '坑塘水面'],
'#9bfe41',
['==', ['get', 'dlmc'], '裸土地'],
'#adfb38',
['==', ['get', 'dlmc'], '内陆滩涂'],
'#bef434',
['==', ['get', 'dlmc'], '农村道路'],
'#ceeb34',
['==', ['get', 'dlmc'], '农村宅基地'],
'#dde037',
['==', ['get', 'dlmc'], '其他草地'],
'#ead439',
['==', ['get', 'dlmc'], '其他林地'],
'#f4c73a',
['==', ['get', 'dlmc'], '其他园地'],
'#fbb938',
['==', ['get', 'dlmc'], '乔木林地'],
'#fea933',
['==', ['get', 'dlmc'], '商业服务业设施用地'],
'#fe972b',
['==', ['get', 'dlmc'], '设施农用地'],
'#fc8323',
['==', ['get', 'dlmc'], '水工建筑用地'],
'#f76f1a',
['==', ['get', 'dlmc'], '水浇地'],
'#f15c13',
['==', ['get', 'dlmc'], '水库水面'],
'#e84b0c',
['==', ['get', 'dlmc'], '水田'],
'#de3e08',
['==', ['get', 'dlmc'], '特殊用地'],
'#d23105',
['==', ['get', 'dlmc'], '铁路用地'],
'#c42503',
['==', ['get', 'dlmc'], '物流仓储用地'],
'#b31b01',
['==', ['get', 'dlmc'], '养殖坑塘'],
'#a11201',
['==', ['get', 'dlmc'], '竹林地'],
'#8d0a01',
['==', ['get', 'dlmc'], ''],
'#7a0403',
'#7a0403',
],
'fill-outline-color': '#232323',
},
});
map.on('click', chooseRow.dataTable, function (e) {
// 显示弹窗
@ -298,38 +379,35 @@
// 影像管理-图层
function GeoTiffManagerRaster(chooseRows, lngLat, zoom, isMove) {
// 清除图层
clearTaskLayer('GeoTiffManagerRaster');
if (isMove) {
handlerLocation(lngLat, zoom);
}
let tiles: any = [];
chooseRows.forEach((chooseRow, index) => {
// console.log(276, chooseRow);
chooseRows?.forEach((chooseRow, index) => {
let tiles: any = [];
let tile =
'http://192.168.10.131:8080/geoserver/my_workspace/wms?service=WMS&version=1.1.0&request=GetMap&layers=my_workspace:' +
chooseRow.layerName +
'&styles=&bbox={bbox-epsg-3857}&width=256&height=256&srs=EPSG:3857' +
'&format=image/png&TRANSPARENT=TRUE';
tiles.push(tile);
});
map.addSource('GeoTiffManagerRaster', {
type: 'raster',
tiles: tiles,
tileSize: 256,
map.addSource(chooseRow.layerName, {
type: 'raster',
tiles: tiles,
tileSize: 256,
});
map.addLayer({
id: chooseRow.layerName,
type: 'raster',
source: chooseRow.layerName,
layout: {
visibility: 'visible',
},
});
if (map.getLayer('streetLayer')) {
map.moveLayer(chooseRow.layerName, 'streetLayer');
}
});
map.addLayer({
id: 'GeoTiffManagerRaster',
type: 'raster',
source: 'GeoTiffManagerRaster',
layout: {
visibility: 'visible',
},
});
if (map.getLayer('streetLayer')) {
map.moveLayer('GeoTiffManagerRaster', 'streetLayer');
}
}
// 航飞图片-图层