From 497e2fb7d813932b5078137146e501e86f35d56a Mon Sep 17 00:00:00 2001 From: sd <1504629600@qq.com> Date: Sun, 8 Feb 2026 15:56:14 +0800 Subject: [PATCH] =?UTF-8?q?=E5=A8=81=E5=8A=9B=E5=8C=BA=EF=BC=8C=E7=BB=8F?= =?UTF-8?q?=E7=BA=AC=E5=BA=A6=E6=94=B9=E5=8F=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ruoyi-ui/src/views/cesiumMap/ContextMenu.vue | 2 +- ruoyi-ui/src/views/cesiumMap/LocateDialog.vue | 54 ++++++--- ruoyi-ui/src/views/cesiumMap/index.vue | 128 ++++++++++++++++++++- ruoyi-ui/src/views/childRoom/TopHeader.vue | 14 +-- ruoyi-ui/src/views/childRoom/index.vue | 26 ++--- ruoyi-ui/src/views/dialogs/PowerZoneDialog.vue | 32 +++++- ruoyi-ui/src/views/dialogs/RadiusDialog.vue | 153 +++++++++++++++++++++++++ ruoyi-ui/src/views/system/waypoints/index.vue | 54 +++++++-- 8 files changed, 399 insertions(+), 64 deletions(-) create mode 100644 ruoyi-ui/src/views/dialogs/RadiusDialog.vue diff --git a/ruoyi-ui/src/views/cesiumMap/ContextMenu.vue b/ruoyi-ui/src/views/cesiumMap/ContextMenu.vue index 796c828..7a46c4f 100644 --- a/ruoyi-ui/src/views/cesiumMap/ContextMenu.vue +++ b/ruoyi-ui/src/views/cesiumMap/ContextMenu.vue @@ -106,7 +106,7 @@ -
+
填充属性
🎨 diff --git a/ruoyi-ui/src/views/cesiumMap/LocateDialog.vue b/ruoyi-ui/src/views/cesiumMap/LocateDialog.vue index 63419b0..750db97 100644 --- a/ruoyi-ui/src/views/cesiumMap/LocateDialog.vue +++ b/ruoyi-ui/src/views/cesiumMap/LocateDialog.vue @@ -61,7 +61,7 @@ @@ -70,9 +70,7 @@ @@ -80,9 +78,7 @@ @@ -120,8 +116,8 @@ export default { scenarioId: null, routeId: null, waypointId: null, - lng: '116.3974', - lat: '39.9093' + lng: '116°23\'48.64"', + lat: '39°54\'33.48"' }, scenarioList: [], routeList: [], @@ -144,13 +140,29 @@ export default { } }, methods: { + degreesToDMS(decimalDegrees) { + const degrees = Math.floor(decimalDegrees) + const minutesDecimal = (decimalDegrees - degrees) * 60 + const minutes = Math.floor(minutesDecimal) + const seconds = ((minutesDecimal - minutes) * 60).toFixed(2) + return `${degrees}°${minutes}'${seconds}"` + }, + dmsToDegrees(dms) { + const match = dms.match(/^(-?\d+)°(\d+)'([\d.]+)"$/) + if (!match) return null + const degrees = parseFloat(match[1]) + const minutes = parseFloat(match[2]) + const seconds = parseFloat(match[3]) + const sign = degrees < 0 ? -1 : 1 + return sign * (Math.abs(degrees) + minutes / 60 + seconds / 3600) + }, resetForm() { this.formData = { scenarioId: null, routeId: null, waypointId: null, - lng: '116.3974', - lat: '39.9093' + lng: '116°23\'48.64"', + lat: '39°54\'33.48"' } this.routeList = [] this.waypointList = [] @@ -202,8 +214,8 @@ export default { if (value) { const waypoint = this.waypointList.find(w => w.id === value) if (waypoint) { - this.formData.lng = waypoint.lng - this.formData.lat = waypoint.lat + this.formData.lng = this.degreesToDMS(waypoint.lng) + this.formData.lat = this.degreesToDMS(waypoint.lat) } } }, @@ -216,19 +228,27 @@ export default { handleConfirm() { const { lng, lat } = this.formData - if (!lng || !lat || isNaN(parseFloat(lng)) || isNaN(parseFloat(lat))) { + if (!lng || !lat) { this.$message.error('请输入有效的经度和纬度！') return } - if (lng < -180 || lng > 180 || lat < -90 || lat > 90) { + const lngDegrees = this.dmsToDegrees(lng) + const latDegrees = this.dmsToDegrees(lat) + + if (lngDegrees === null || latDegrees === null || isNaN(lngDegrees) || isNaN(latDegrees)) { + this.$message.error('请输入有效的度分秒格式！格式：116°23\'48.64"') + return + } + + if (lngDegrees < -180 || lngDegrees > 180 || latDegrees < -90 || latDegrees > 90) { this.$message.error('经纬度超出有效范围！') return } this.$emit('confirm', { - lng: parseFloat(lng), - lat: parseFloat(lat) + lng: lngDegrees, + lat: latDegrees }) this.$emit('update:visible', false) } diff --git a/ruoyi-ui/src/views/cesiumMap/index.vue b/ruoyi-ui/src/views/cesiumMap/index.vue index 56e973c..2402375 100644 --- a/ruoyi-ui/src/views/cesiumMap/index.vue +++ b/ruoyi-ui/src/views/cesiumMap/index.vue @@ -44,6 +44,13 @@ @cancel="handleLocateCancel" /> + + +
@@ -67,6 +74,7 @@ import MeasurementPanel from './MeasurementPanel.vue' import HoverTooltip from './HoverTooltip.vue' import ContextMenu from './ContextMenu.vue' import LocateDialog from './LocateDialog.vue' +import RadiusDialog from '../dialogs/RadiusDialog.vue' import axios from 'axios' import request from '@/utils/request' import { getToken } from '@/utils/auth' @@ -171,7 +179,12 @@ export default { currentScaleUnit: 'm', isApplyingScale: false, // 定位相关 - locateDialogVisible: false + locateDialogVisible: false, + // 威力区绘制相关 + radiusDialogVisible: false, + powerZoneCenter: null, + powerZoneCircleEntity: null, + powerZoneCenterEntity: null } }, components: { @@ -179,7 +192,8 @@ export default { MeasurementPanel, HoverTooltip, ContextMenu, - LocateDialog + LocateDialog, + RadiusDialog }, mounted() { console.log(this.drawDomClick,999999) @@ -904,6 +918,15 @@ export default { } } } + // 特殊处理：如果点击的是威力区的圆心，找到对应的威力区实体 + if (!entityData) { + for (const powerZoneEntity of this.allEntities) { + if (powerZoneEntity.type === 'powerZone' && powerZoneEntity.centerEntity === pickedEntity) { + entityData = powerZoneEntity + break + } + } + } if (entityData && entityData.type !== 'route') { // 显示上下文菜单 this.contextMenu = { @@ -1090,7 +1113,7 @@ export default { this.viewer.entities.add({ position: Cesium.Cartesian3.fromDegrees(lon, lat), label: { - text: `${lat}°N\n${lon}°E`, + text: `${this.degreesToDMS(lat)}N\n${this.degreesToDMS(lon)}E`, font: '12px sans-serif', fillColor: Cesium.Color.BLACK, outlineColor: Cesium.Color.WHITE, @@ -2865,6 +2888,15 @@ export default { entity.polyline.width = data.width } break + case 'powerZone': + if (entity.ellipse) { + entity.ellipse.material = Cesium.Color.fromCssColorString(data.color).withAlpha(data.opacity) + } + if (entity.polyline) { + entity.polyline.material = Cesium.Color.fromCssColorString(data.borderColor || data.color) + entity.polyline.width = data.width + } + break case 'sector': if (entity.polygon) { entity.polygon.material = Cesium.Color.fromCssColorString(data.color).withAlpha(data.opacity) @@ -2923,7 +2955,7 @@ export default { // 更新实体数据 entityData[property] = value // 当修改填充色时，默认设置透明度为 20% - if (property === 'color' && (entityData.type === 'polygon' || entityData.type === 'rectangle' || entityData.type === 'circle' || entityData.type === 'sector')) { + if (property === 'color' && (entityData.type === 'polygon' || entityData.type === 'rectangle' || entityData.type === 'circle' || entityData.type === 'sector' || entityData.type === 'powerZone')) { entityData.opacity = 0.2 } // 更新实体样式 @@ -2955,6 +2987,10 @@ export default { this.viewer.entities.remove(pointEntity) }) } + // 移除威力区的圆心实体 + if (entity.type === 'powerZone' && entity.centerEntity) { + this.viewer.entities.remove(entity.centerEntity) + } // 从数组中移除 this.allEntities.splice(index, 1) // 如果删除的是选中的实体，清空选中状态 @@ -3019,6 +3055,10 @@ export default { this.viewer.entities.remove(pointEntity); }); } + // 移除威力区的圆心实体 + if (item.type === 'powerZone' && item.centerEntity) { + this.viewer.entities.remove(item.centerEntity); + } } catch (e) { console.warn('删除实体失败:', e); } @@ -3645,6 +3685,86 @@ export default { // 计算鼠标点到投影点的距离 const distanceVec = [mousePosition.x - projection[0], mousePosition.y - projection[1]]; return Math.sqrt(distanceVec[0] * distanceVec[0] + distanceVec[1] * distanceVec[1]); + }, + // 威力区绘制相关方法 + startPowerZoneDrawing() { + this.stopDrawing(); + this.powerZoneCenter = null; + this.powerZoneCircleEntity = null; + this.powerZoneCenterEntity = null; + + this.isDrawing = true; + this.viewer.canvas.style.cursor = 'crosshair'; + this.drawingHandler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas); + + this.drawingHandler.setInputAction((click) => { + const position = this.getClickPosition(click.position); + if (!position) return; + + this.powerZoneCenter = position; + + this.powerZoneCenterEntity = this.viewer.entities.add({ + position: position, + point: { + pixelSize: 10, + color: Cesium.Color.RED, + outlineColor: Cesium.Color.WHITE, + outlineWidth: 2, + disableDepthTestDistance: Number.POSITIVE_INFINITY + } + }); + + this.drawingHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK); + this.drawingHandler.destroy(); + this.drawingHandler = null; + + this.radiusDialogVisible = true; + }, Cesium.ScreenSpaceEventType.LEFT_CLICK); + }, + handleRadiusConfirm(radiusData) { + if (!this.powerZoneCenter) return; + + const radiusInMeters = radiusData.unit === 'km' ? radiusData.radius * 1000 : radiusData.radius; + + const circlePositions = this.generateCirclePositions(this.powerZoneCenter, radiusInMeters); + + this.powerZoneCircleEntity = this.viewer.entities.add({ + position: this.powerZoneCenter, + ellipse: { + semiMinorAxis: radiusInMeters, + semiMajorAxis: radiusInMeters, + material: Cesium.Color.RED.withAlpha(0), + clampToGround: true + }, + polyline: { + positions: circlePositions, + width: 2, + material: Cesium.Color.RED, + clampToGround: true + } + }); + + this.allEntities.push({ + id: ++this.entityCounter, + type: 'powerZone', + entity: this.powerZoneCircleEntity, + centerEntity: this.powerZoneCenterEntity, + center: this.powerZoneCenter, + radius: radiusInMeters, + color: '#FF0000', + opacity: 0, + borderColor: '#FF0000', + width: 2 + }); + + this.isDrawing = false; + this.viewer.canvas.style.cursor = 'default'; + + this.$message.success(`威力区创建成功，半径：${radiusData.radius}${radiusData.unit}`); + + this.powerZoneCenter = null; + this.powerZoneCircleEntity = null; + this.powerZoneCenterEntity = null; } } } diff --git a/ruoyi-ui/src/views/childRoom/TopHeader.vue b/ruoyi-ui/src/views/childRoom/TopHeader.vue index ffcca60..d6ec506 100644 --- a/ruoyi-ui/src/views/childRoom/TopHeader.vue +++ b/ruoyi-ui/src/views/childRoom/TopHeader.vue @@ -270,12 +270,7 @@
- - + + + diff --git a/ruoyi-ui/src/views/system/waypoints/index.vue b/ruoyi-ui/src/views/system/waypoints/index.vue index 73c53fd..c5010f8 100644 --- a/ruoyi-ui/src/views/system/waypoints/index.vue +++ b/ruoyi-ui/src/views/system/waypoints/index.vue @@ -131,8 +131,16 @@ - - + + + + + + @@ -178,10 +186,10 @@ - + - + @@ -278,6 +286,27 @@ export default { this.getList() }, methods: { + degreesToDMS(decimalDegrees) { + if (!decimalDegrees) return '' + const degrees = Math.floor(decimalDegrees) + const minutesDecimal = (decimalDegrees - degrees) * 60 + const minutes = Math.floor(minutesDecimal) + const seconds = ((minutesDecimal - minutes) * 60).toFixed(2) + return `${degrees}°${minutes}'${seconds}"` + }, + dmsToDegrees(dms) { + if (!dms) return null + const match = dms.match(/^(-?\d+)°(\d+)'([\d.]+)"$/) + if (!match) { + const num = parseFloat(dms) + return isNaN(num) ? null : num + } + const degrees = parseFloat(match[1]) + const minutes = parseFloat(match[2]) + const seconds = parseFloat(match[3]) + const sign = degrees < 0 ? -1 : 1 + return sign * (Math.abs(degrees) + minutes / 60 + seconds / 3600) + }, /** 查询航线具体航点明细列表 */ getList() { this.loading = true @@ -336,6 +365,8 @@ export default { const id = row.id || this.ids getWaypoints(id).then(response => { this.form = response.data + this.form.lat = this.degreesToDMS(this.form.lat) + this.form.lng = this.degreesToDMS(this.form.lng) this.open = true this.title = "修改航线具体航点明细" }) @@ -344,14 +375,23 @@ export default { submitForm() { this.$refs["form"].validate(valid => { if (valid) { - if (this.form.id != null) { - updateWaypoints(this.form).then(response => { + const formData = { ...this.form } + formData.lat = this.dmsToDegrees(formData.lat) + formData.lng = this.dmsToDegrees(formData.lng) + + if (formData.lat === null || formData.lng === null) { + this.$modal.msgError("请输入有效的度分秒格式！格式：39°54'33.48\"") + return + } + + if (formData.id != null) { + updateWaypoints(formData).then(response => { this.$modal.msgSuccess("修改成功") this.open = false this.getList() }) } else { - addWaypoints(this.form).then(response => { + addWaypoints(formData).then(response => { this.$modal.msgSuccess("新增成功") this.open = false this.getList()