From 1d59aaf86179a6f4e53288a4203861d164f20fc3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=BB=95=E5=B5=A9?= <17854119262@163.com> Date: Wed, 18 Sep 2024 17:37:21 +0800 Subject: [PATCH 1/5] =?UTF-8?q?=E6=88=90=E6=9E=9C=E5=B1=95=E7=A4=BA?= =?UTF-8?q?=E4=BF=AE=E6=94=B9=E7=89=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../achievement/AchievementManage/index.vue | 29 +- .../system/achievement/Display/TimeLine.vue | 213 ++++++++-- .../demo/system/achievement/Display/index.vue | 386 +++++++++++++----- .../achievement/GeoTiffManager/index.vue | 25 ++ .../clound/mapComponent.vue | 125 +++--- 5 files changed, 586 insertions(+), 192 deletions(-) diff --git a/src/views/demo/system/achievement/AchievementManage/index.vue b/src/views/demo/system/achievement/AchievementManage/index.vue index 6bb0bfb9..7183a059 100644 --- a/src/views/demo/system/achievement/AchievementManage/index.vue +++ b/src/views/demo/system/achievement/AchievementManage/index.vue @@ -89,10 +89,10 @@ const { createMessage } = useMessage(); // 全屏------------------------------------------------------------ - const isFullScreen = ref(true); + const isFullScreen = ref(false); const searchFormSchema = ref(searchFormSchema_map); - const tableSpan = ref(0); - const mapSpan = ref(24); + const tableSpan = ref(12); + const mapSpan = ref(12); // 全屏 function fullScreen() { @@ -318,11 +318,22 @@ coordinates: [parseFloat(st[0]), parseFloat(st[1])], }, properties: { - taskName: getTaskNameBytaskId(item.taskId) + item.uploadTime, + id: item.id, path: item.path, - // model: item.model, lng: parseFloat(st[0]), lat: parseFloat(st[1]), + uploadTime: item.uploadTime, + remark: item.remark, + intact: item.intact, + userId: item.userId, + name: item.name, + taskId: item.taskId, + workPosition: item.workPosition, + flyer: item.flyer, + flyTime: item.flyTime, + // taskName: taskName, + taskName: getTaskNameBytaskId(item.taskId), + // model: item.model, }, }; taskLayerGeoJson.features.push(feature); @@ -403,15 +414,15 @@ const modalImage = ref(''); const visible = ref(false); // 打开窗口 - const handleOpen = (path) => { + const handleOpen = (properties) => { // modalOpen.value = true; setVisible(true); modalTitle.value = ''; // 正则表达式验证函数 - if (isValidUrl(path)) { - modalImage.value = path; + if (isValidUrl(properties.path)) { + modalImage.value = properties.path; } else { - modalImage.value = VITE_GLOB_API_URL_VAR.value + path; + modalImage.value = VITE_GLOB_API_URL_VAR.value + properties.path; } }; // 关闭窗口 diff --git a/src/views/demo/system/achievement/Display/TimeLine.vue b/src/views/demo/system/achievement/Display/TimeLine.vue index cfd359f6..a9c891f6 100644 --- a/src/views/demo/system/achievement/Display/TimeLine.vue +++ b/src/views/demo/system/achievement/Display/TimeLine.vue @@ -48,25 +48,41 @@ - +
@@ -80,49 +96,145 @@ import { ref, watch, computed, onBeforeMount, onMounted, onBeforeUpdate, onUpdated } from 'vue'; import Icon from '@/components/Icon/Icon.vue'; import dayjs from 'dayjs'; + import { GeoTiffManagerLoadPage } from '@/api/demo/system'; + import { cloneDeep } from 'lodash-es'; const emit = defineEmits(['handleNowValueChange']); - const nowValue = ref(parseInt(dayjs().dayOfYear())); - const marks = ref>(); - const maxDays = ref(365); + const nowValue = ref(0); + const maxCount = ref(365); + const marks: any = ref>(); + const allDays: any = ref>(); + let allDaysValue: any = {}; + const sliderValue: any = ref({}); + let allSliderValue: any = {}; + const topPoint = ref([]); + const bottomPoint = ref([]); - const calculateDayOfYearAndDates = (time) => { - const startDate = dayjs(time).startOf('year'); - const endDate = dayjs(time).endOf('year'); - // 初始化 marks 为空对象 - marks.value = {}; - maxDays.value = parseInt(endDate.dayOfYear()); - for ( - let currentDate = startDate; - currentDate.isBefore(endDate); - currentDate = currentDate.add(1, 'day') - ) { - const dayOfYear = parseInt(currentDate.dayOfYear()); - const dateString = currentDate.format('YYYYMMDD'); - marks.value[dayOfYear] = dateString; + watch( + () => allDays.value, + () => { + marks.value = {}; + topPoint.value = []; + bottomPoint.value = []; + + if (allDays.value) { + for (const key in allDays.value) { + if (allDays.value.hasOwnProperty(key)) { + const dateString = allDays.value[key]; + // 是否是月底 + if (isLastDayOfMonth(dateString)) { + marks.value[parseInt(key)] = allDays.value[parseInt(key)]; + bottomPoint.value.push(parseInt(key)); + } + } + } + } + if (sliderValue.value) { + sliderValue.value.forEach((item) => { + // console.log(item); + // const key = getKeyByDate(dayjs(item.createTime).format('YYYYMMDD')); + const key = getKeyByDate(item.dateDir); + if (key) { + if (marks.value[key] == undefined) { + marks.value[key] = item.layerName; + } else { + marks.value[key] = marks.value[key] + '\n' + item.layerName; + } + topPoint.value.push(parseInt(key)); + } + }); + } + }, + { + deep: true, + // immediate: true, + }, + ); + + // 是否是月底 + function isLastDayOfMonth(dateStr) { + const date = dayjs(dateStr, 'YYYYMMDD'); + const lastDayOfMonth = date.endOf('month'); // 获取当月最后一天 + return date.isSame(lastDayOfMonth, 'day'); + } + + function getKeyByDate(dateString) { + for (const key in allDays.value) { + if (allDays.value.hasOwnProperty(key)) { + if (allDays.value[key] === dateString) { + return key; + } + } } - }; + return null; // 如果找不到对应的日期字符串，则返回 null + } + + function countLines(str) { + // 使用 \n 作为换行符 + const lines = str.split('\n'); + return lines.length; + } const getValue = (key: number) => { if (marks.value) { return marks.value[key]; - } else { - return key; + // } else if (allDays.value.hasOwnProperty(key)) { + // return allDays.value[key]; + // } else { + // return key; } }; // 发生改变 const sliderChange = (key: number) => { - emit('handleNowValueChange', [dayjs(getValue(1)), dayjs(getValue(nowValue.value))]); - playSwitch.value = false; + // emit('handleNowValueChange', [getValue(0), getValue(nowValue.value)]); + }; + + // 鼠标滚动 + const handleScroll = (event) => { + event.preventDefault(); // 阻止默认行为 + // console.log('滚动事件触发:', event.deltaY); + // 上滚 + if (event.deltaY < 0) { + // 进度条数据keys + const keys = Object.keys(allDays.value); + // console.log(parseInt(keys)); + // console.log(Object.keys(allDaysValue).length); + if (parseInt(keys) + 2 <= Object.keys(allDaysValue).length) { + for (const index in allDays.value) { + const item = allDays.value[index]; + if (allDays.value[keys[0]] == item && allDaysValue[parseInt(index) - 1]) { + allDays.value[parseInt(index) - 1] = allDaysValue[parseInt(index) - 1]; + maxCount.value = maxCount.value + 1; + } + if (allDays.value[keys[keys.length - 1]] == item && allDaysValue[parseInt(index) + 1]) { + allDays.value[parseInt(index) + 1] = allDaysValue[parseInt(index) + 1]; + maxCount.value = maxCount.value + 1; + } + } + } + } + // 下滚 + if (event.deltaY > 0) { + const keys = Object.keys(allDays.value); + if (keys.length > 2) { + // 删除最后一个键值对 + // const lastKey = keys[keys.length - 1]; + // delete allDays.value[lastKey]; + // 删除第一个键值对 + const firstKey = keys[0]; + delete allDays.value[firstKey]; + maxCount.value = maxCount.value - 2; + } + } }; // 播放/暂停 const playSwitch = ref(false); const handlePlay = () => { playSwitch.value = !playSwitch.value; - if (playSwitch.value && nowValue.value < maxDays.value) { + if (playSwitch.value && nowValue.value < maxCount.value) { addValue(); } }; @@ -131,8 +243,8 @@ // console.log(playSwitch.value); if (playSwitch.value) { setTimeout(() => { - nowValue.value = parseInt(dayjs(getValue(nowValue.value)).add(15, 'day').dayOfYear()); - emit('handleNowValueChange', [dayjs(getValue(1)), dayjs(getValue(nowValue.value))]); + nowValue.value += 1; + emit('handleNowValueChange', [getValue(0), getValue(nowValue.value)]); addValue(); }, 3000); } @@ -193,14 +305,43 @@ return (y % 4 === 0 && y % 100 !== 0) || y % 400 === 0; } + async function fetch() { + // 历史影像 + GeoTiffManagerLoadPage({ + page: 1, + limit: 1000000, + }).then((res) => { + console.log(res.items); + allSliderValue = res.items; + sliderValue.value = res.items; + + const startDate = dayjs().startOf('year'); + const endDate = dayjs().endOf('year'); + // 初始化 marks 为空对象 + allDaysValue = {}; + allDays.value = {}; + maxCount.value = parseInt(endDate.dayOfYear()); + for ( + let currentDate = startDate; + currentDate.isBefore(endDate); + currentDate = currentDate.add(1, 'day') + ) { + const dayOfYear = parseInt(currentDate.dayOfYear()); + const dateString = currentDate.format('YYYYMMDD'); + allDaysValue[dayOfYear] = dateString; + } + allDays.value = cloneDeep(allDaysValue); + }); + } + onMounted(() => { - calculateDayOfYearAndDates(dayjs()); + fetch(); }); diff --git a/src/views/demo/system/achievement/GeoTiffManager/index.vue b/src/views/demo/system/achievement/GeoTiffManager/index.vue index 3b353891..6b9b6c7d 100644 --- a/src/views/demo/system/achievement/GeoTiffManager/index.vue +++ b/src/views/demo/system/achievement/GeoTiffManager/index.vue @@ -40,6 +40,7 @@ GeoTiffManagerLoadPage, GeoTiffManagerGet, } from '@/api/demo/system'; + import proj4 from 'proj4'; const { createMessage } = useMessage(); @@ -81,11 +82,35 @@ function handRowClick(record) { let bbox = getBboxFromUrl(record.accessUrl); let lngLat = getCenterPoint(bbox); + console.log(lngLat); + // 检测坐标系 + const result = isProjectedCoordinates(parseFloat(lngLat[0]), parseFloat(lngLat[1])); + if (result) { + lngLat[0] = result[0]; + lngLat[1] = result[1]; + } let chooseRows: any = []; chooseRows.push(record); mapboxComponent.value.GeoTiffManagerRaster(chooseRows, lngLat, 11); } + function isProjectedCoordinates(x, y) { + // 检查是否在地理坐标系的范围内 + const isGeoXInRange = -180 <= x && x <= 180; + const isGeoYInRange = -90 <= y && y <= 90; + // 定义坐标系 + const fromCrs = 'EPSG:3857'; // 假设输入坐标是 Web Mercator + const toCrs = 'EPSG:4326'; // 目标坐标系是地理坐标系 + // 如果不在地理坐标系范围内，则认为是投影坐标系 + if (!isGeoXInRange || !isGeoYInRange) { + // 转换坐标 + const transformer = Transformer.fromCrs(fromCrs, toCrs); + return transformer.transform([x, y]); + } else { + return false; + } + } + // 从参数中获取 bbox 的值 function getBboxFromUrl(url) { const urlObj = new URL(url); diff --git a/src/views/demo/system/geoservermanagement/clound/mapComponent.vue b/src/views/demo/system/geoservermanagement/clound/mapComponent.vue index b3757cf3..013a147b 100644 --- a/src/views/demo/system/geoservermanagement/clound/mapComponent.vue +++ b/src/views/demo/system/geoservermanagement/clound/mapComponent.vue @@ -119,6 +119,11 @@ } if (layerName && map.getLayer(layerName)) { map.moveLayer(layerName, ''); + if (layerName == 'GeoserverManagementRaster') { + if (map.getLayer('countyLayer')) { + map.moveLayer('countyLayer', 'GeoserverManagementRaster'); + } + } if (layerName == 'AchievementManageRaster') { if (map.getLayer('clusters')) { map.moveLayer('AchievementManageRaster', 'clusters'); @@ -186,6 +191,11 @@ } if (layerName && map.getLayer(layerName)) { map.moveLayer(layerName, ''); + if (layerName == 'GeoserverManagementRaster') { + if (map.getLayer('streetLayer')) { + map.moveLayer('streetLayer', 'GeoserverManagementRaster'); + } + } if (layerName == 'AchievementManageRaster') { if (map.getLayer('clusters')) { map.moveLayer('AchievementManageRaster', 'clusters'); @@ -202,9 +212,9 @@ }; // 图层管理-图层 - function GeoserverManagementRaster(chooseRows, lngLat, zoom) { + function GeoserverManagementRaster(chooseRows, lngLat, zoom, epsg) { // 清除图层 - // clearTaskLayer('GeoserverManagementRaster'); + clearTaskLayer('GeoserverManagementRaster'); // 县区边界 if (!map.getLayer('streetLayer')) { handlerDealStreet('GeoserverManagementRaster'); @@ -212,41 +222,38 @@ if (!map.getLayer('countyLayer')) { handlerDealCountry('GeoserverManagementRaster'); } - handlerLocation(lngLat, zoom); + if (lngLat && zoom) { + handlerLocation(lngLat, zoom); + } let tiles: any = []; chooseRows.forEach((chooseRow) => { - let format = - chooseRow.dataType == '点' || chooseRow.dataType == '面' - ? '&format=application/openlayers' - : '&format=image/png&TRANSPARENT=TRUE'; let tile = 'http://192.168.10.131:8080/geoserver/my_workspace/wms?service=WMS&version=1.1.0&request=GetMap&layers=my_workspace:' + chooseRow.dataTable + - '&styles=&bbox={bbox-epsg-3857}&width=768&height=619&srs=' + - chooseRow.spatialRef + - format; - // let tile = - // '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'; + '&styles=&bbox={bbox-epsg-3857}&width=256&height=256&srs=EPSG:3857' + + '&format=image/png&TRANSPARENT=TRUE'; tiles.push(tile); }); - if (map.getSource('GeoserverManagementRaster' + 'wmsSource')) { - map.getSource('GeoserverManagementRaster' + 'wmsSource').setData(tiles); - } else { - map.addSource('GeoserverManagementRaster' + 'wmsSource', { - type: 'raster', - tiles: tiles, - tileSize: 256, - }); - map.addLayer({ - id: 'GeoserverManagementRaster', - type: 'raster', - source: 'GeoserverManagementRaster' + 'wmsSource', - layout: { - visibility: 'visible', - }, - }); + map.addSource('GeoserverManagementRaster' + 'wmsSource', { + type: 'raster', + tiles: tiles, + tileSize: 256, + }); + map.addLayer({ + id: 'GeoserverManagementRaster', + type: 'raster', + source: 'GeoserverManagementRaster' + 'wmsSource', + layout: { + visibility: 'visible', + }, + }); + if (map.getLayer('streetLayer')) { + map.moveLayer('streetLayer', 'GeoserverManagementRaster'); + } + if (map.getLayer('countyLayer')) { + map.moveLayer('countyLayer', 'GeoserverManagementRaster'); } } @@ -265,13 +272,10 @@ let tiles: any = []; chooseRows.forEach((chooseRow) => { - // tiles.push( - // chooseRow.accessUrl.replace( - // '&format=application/openlayers', - // '&format=image/png&TRANSPARENT=TRUE', - // ), - // ); - tiles.push(chooseRow.accessUrl); + let row = chooseRow.accessUrl + .replace('&srs=', '&srs=EPSG:4326') + .replace('&format=application/openlayers', '&format=image/png&TRANSPARENT=TRUE'); + tiles.push(row); }); if (map.getSource('GeoTiffManagerRaster' + 'wmsSource')) { @@ -305,7 +309,10 @@ if (!map.getLayer('countyLayer')) { handlerDealCountry('AchievementManageRaster'); } - handlerLocation(lngLat, zoom); + console.log(lngLat, zoom); + if (lngLat && zoom) { + // handlerLocation(lngLat, zoom); + } if (map.getSource('AchievementManageRaster' + 'wmsSource')) { map.getSource('AchievementManageRaster' + 'wmsSource').setData(taskLayerGeoJson); @@ -347,18 +354,18 @@ 'text-size': 12, }, }); - // map.addLayer({ - // id: 'unclustered-point', - // type: 'circle', - // source: 'AchievementManageRaster' + 'wmsSource', - // filter: ['any', ['!', ['has', 'point_count']], ['==', 'point_count', 1]], - // paint: { - // 'circle-color': '#11b4da', - // 'circle-radius': 4, - // 'circle-stroke-width': 2, - // 'circle-stroke-color': '#fff', - // }, - // }); + map.addLayer({ + id: 'unclustered-point', + type: 'circle', + source: 'AchievementManageRaster' + 'wmsSource', + filter: ['any', ['!', ['has', 'point_count']], ['==', 'point_count', 1]], + paint: { + 'circle-color': '#11b4da', + 'circle-radius': 4, + 'circle-stroke-width': 2, + 'circle-stroke-color': '#fff', + }, + }); // 无人机图标 map.loadImage('/map/AchievementManage.png', function (error, image) { if (error) throw error; @@ -372,8 +379,8 @@ source: 'AchievementManageRaster' + 'wmsSource', layout: { 'icon-image': 'taskIcon', - 'icon-size': 1, - 'text-field': ['get', 'taskName'], + 'icon-size': 0.8, + // 'text-field': ['get', 'taskName'], 'text-size': 10, 'text-font': ['Open Sans Semibold', 'Arial Unicode MS Bold'], 'text-offset': [0, 1.8], @@ -388,7 +395,6 @@ 'text-halo-width': 1, }, }); - map.on('click', 'AchievementManageRaster', (e) => { console.log(e); // 显示弹窗 @@ -396,12 +402,21 @@ // 获取第一个（也是唯一的）被点击的特征 const feature = e.features[0]; // 从特征的属性中获取 'path' 值 - const path = feature.properties.path; - emits('handleOpen', path); - } else { - console.log('No feature was clicked.'); + // const path = feature.properties.path; + // console.log(400, feature.properties); + emits('handleOpen', feature.properties); } }); + if (map.getLayer('streetLayer')) { + map.moveLayer('streetLayer', 'clusters'); + map.moveLayer('streetLayer', 'cluster-count'); + map.moveLayer('streetLayer', 'AchievementManageRaster'); + } + if (map.getLayer('countyLayer')) { + map.moveLayer('countyLayer', 'clusters'); + map.moveLayer('countyLayer', 'cluster-count'); + map.moveLayer('countyLayer', 'AchievementManageRaster'); + } if (map.getLayer('AchievementManageRaster')) { if (map.getLayer('clusters')) { map.moveLayer('AchievementManageRaster', 'clusters'); From 699ce5667acda55f22da80b3442711ed61177e20 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=88=98=E5=A6=8D?= <1455167345@qq.com> Date: Thu, 19 Sep 2024 14:08:29 +0800 Subject: [PATCH 2/5] =?UTF-8?q?=E5=90=84=E4=B8=AA=E6=A8=A1=E5=9D=97?= =?UTF-8?q?=E5=9B=BE=E6=96=91=E8=AF=A6=E6=83=85=E5=86=85=E5=AE=B9=E4=BC=98?= =?UTF-8?q?=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../MapList/ShowInfoModal/index.vue | 477 ++++++++--------- .../MapList/ShowInfoModal/index.vue | 480 ++++++++--------- .../MapList/ShowInfoModal/index.vue | 493 ++++++++---------- .../MapList/ShowInfoModal/index.vue | 447 +++++++--------- .../MapList/ShowInfoModal/index.vue | 454 +++++++--------- .../minerals/patchsummary/detail/index.vue | 10 +- 6 files changed, 992 insertions(+), 1369 deletions(-) diff --git a/src/views/demo/degraining/curbspotcity/MapList/ShowInfoModal/index.vue b/src/views/demo/degraining/curbspotcity/MapList/ShowInfoModal/index.vue index 0b573a42..83b4e413 100644 --- a/src/views/demo/degraining/curbspotcity/MapList/ShowInfoModal/index.vue +++ b/src/views/demo/degraining/curbspotcity/MapList/ShowInfoModal/index.vue @@ -22,41 +22,55 @@ 'word-break': 'break-all', }" > - {{ case_no }} - {{ typename }} - {{ countyname }} - {{ streetname }} - {{ communityname }} + {{ + props.showInfoData.case_no + }} + {{ + props.showInfoData.typename + }} + {{ + props.showInfoData.countyname + }} + {{ + props.showInfoData.streetname + }} + {{ + props.showInfoData.communityname + }} {{ - dataProcessing(area) + dataProcessing(props.showInfoData.area) }} {{ - dataProcessing(gengdi_area) + dataProcessing(props.showInfoData.gengdi_area) }} {{ - dataProcessing(yongjiujibennongtian_area) + dataProcessing(props.showInfoData.yongjiujibennongtian_area) }} - {{ case_description }} + {{ + props.showInfoData.case_description + }} - {{ remark }} - {{ lng }} - {{ lat }} - {{ synchronoustime }} + {{ props.showInfoData.remark }} + {{ props.showInfoData.lng }} + {{ props.showInfoData.lat }} + {{ + props.showInfoData.synchronoustime + }}
+ >