diff --git a/ruoyi-ui/src/views/cesiumMap/ContextMenu.vue b/ruoyi-ui/src/views/cesiumMap/ContextMenu.vue index 6c50534..377d39b 100644 --- a/ruoyi-ui/src/views/cesiumMap/ContextMenu.vue +++ b/ruoyi-ui/src/views/cesiumMap/ContextMenu.vue @@ -126,6 +126,11 @@
填充属性
+
+ 📝 + 名称 + {{ entityData.name || '' }} +
🎨 填充色 @@ -384,6 +389,13 @@ export default { this.$emit('toggle-route-label') }, + editName() { + const newName = prompt('请输入威力区名称：', this.entityData.name || '') + if (newName !== null && newName.trim() !== '') { + this.$emit('update-property', 'name', newName.trim()) + } + }, + handleToggleRouteLock() { this.$emit('toggle-route-lock') }, diff --git a/ruoyi-ui/src/views/cesiumMap/LocateDialog.vue b/ruoyi-ui/src/views/cesiumMap/LocateDialog.vue index 750db97..9a9861e 100644 --- a/ruoyi-ui/src/views/cesiumMap/LocateDialog.vue +++ b/ruoyi-ui/src/views/cesiumMap/LocateDialog.vue @@ -61,7 +61,7 @@ @@ -70,7 +70,7 @@ @@ -78,7 +78,7 @@ @@ -107,6 +107,10 @@ export default { visible: { type: Boolean, default: false + }, + coordinateFormat: { + type: String, + default: 'dms' // 'decimal' 或 'dms' } }, data() { @@ -137,9 +141,44 @@ export default { this.loadScenarios() } this.$emit('update:visible', newVal) + }, + coordinateFormat: { + handler(newVal) { + this.updateCoordinateFormat(newVal) + } } - }, + }, methods: { + updateCoordinateFormat(newFormat) { + if (!this.formData.lng || !this.formData.lat) return + + let lngDegrees, latDegrees + + if (this.coordinateFormat === 'dms') { + lngDegrees = this.dmsToDegrees(this.formData.lng) + latDegrees = this.dmsToDegrees(this.formData.lat) + } else { + lngDegrees = parseFloat(this.formData.lng) + latDegrees = parseFloat(this.formData.lat) + } + + if (lngDegrees !== null && latDegrees !== null && !isNaN(lngDegrees) && !isNaN(latDegrees)) { + if (newFormat === 'dms') { + this.formData.lng = this.degreesToDMS(lngDegrees) + this.formData.lat = this.degreesToDMS(latDegrees) + } else { + this.formData.lng = lngDegrees.toFixed(6) + this.formData.lat = latDegrees.toFixed(6) + } + } + }, + formatCoordinate(value) { + if (this.coordinateFormat === 'dms') { + return this.degreesToDMS(value) + } else { + return value.toFixed(6) + } + }, degreesToDMS(decimalDegrees) { const degrees = Math.floor(decimalDegrees) const minutesDecimal = (decimalDegrees - degrees) * 60 @@ -157,12 +196,22 @@ export default { return sign * (Math.abs(degrees) + minutes / 60 + seconds / 3600) }, resetForm() { - this.formData = { - scenarioId: null, - routeId: null, - waypointId: null, - lng: '116°23\'48.64"', - lat: '39°54\'33.48"' + if (this.coordinateFormat === 'dms') { + this.formData = { + scenarioId: null, + routeId: null, + waypointId: null, + lng: '116°23\'48.64"', + lat: '39°54\'33.48"' + } + } else { + this.formData = { + scenarioId: null, + routeId: null, + waypointId: null, + lng: '116.396844', + lat: '39.909289' + } } this.routeList = [] this.waypointList = [] @@ -214,8 +263,8 @@ export default { if (value) { const waypoint = this.waypointList.find(w => w.id === value) if (waypoint) { - this.formData.lng = this.degreesToDMS(waypoint.lng) - this.formData.lat = this.degreesToDMS(waypoint.lat) + this.formData.lng = this.formatCoordinate(waypoint.lng) + this.formData.lat = this.formatCoordinate(waypoint.lat) } } }, @@ -233,12 +282,24 @@ export default { return } - const lngDegrees = this.dmsToDegrees(lng) - const latDegrees = this.dmsToDegrees(lat) + let lngDegrees, latDegrees - if (lngDegrees === null || latDegrees === null || isNaN(lngDegrees) || isNaN(latDegrees)) { - this.$message.error('请输入有效的度分秒格式！格式：116°23\'48.64"') - return + if (this.coordinateFormat === 'dms') { + lngDegrees = this.dmsToDegrees(lng) + latDegrees = this.dmsToDegrees(lat) + + if (lngDegrees === null || latDegrees === null || isNaN(lngDegrees) || isNaN(latDegrees)) { + this.$message.error('请输入有效的度分秒格式！格式：116°23\'48.64"') + return + } + } else { + lngDegrees = parseFloat(lng) + latDegrees = parseFloat(lat) + + if (isNaN(lngDegrees) || isNaN(latDegrees)) { + this.$message.error('请输入有效的十进制格式！') + return + } } if (lngDegrees < -180 || lngDegrees > 180 || latDegrees < -90 || latDegrees > 90) { diff --git a/ruoyi-ui/src/views/cesiumMap/index.vue b/ruoyi-ui/src/views/cesiumMap/index.vue index 55593ca..7d6b376 100644 --- a/ruoyi-ui/src/views/cesiumMap/index.vue +++ b/ruoyi-ui/src/views/cesiumMap/index.vue @@ -45,6 +45,7 @@ { // 隐藏右键菜单 @@ -2279,10 +2293,18 @@ export default { addCoordinateLabels() { for (let lon = -180; lon <= 180; lon += 30) { for (let lat = -90; lat <= 90; lat += 30) { + let latText, lonText + if (this.coordinateFormat === 'dms') { + latText = `${this.degreesToDMS(lat)}N` + lonText = `${this.degreesToDMS(lon)}E` + } else { + latText = `${lat.toFixed(2)}°N` + lonText = `${lon.toFixed(2)}°E` + } this.viewer.entities.add({ position: Cesium.Cartesian3.fromDegrees(lon, lat), label: { - text: `${this.degreesToDMS(lat)}N\n${this.degreesToDMS(lon)}E`, + text: `${latText}\n${lonText}`, font: '12px sans-serif', fillColor: Cesium.Color.BLACK, outlineColor: Cesium.Color.WHITE, @@ -2540,7 +2562,10 @@ export default { return this.drawingPoints.length > 0 ? [this.drawingPoints[this.drawingPoints.length - 1]] : []; }, false), width: this.defaultStyles.line.width, - material: this.getPolylineSolidMaterial(this.defaultStyles.line.color), + material: new Cesium.PolylineDashMaterialProperty({ + color: Cesium.Color.fromCssColorString(this.defaultStyles.line.color), + dashLength: 16 + }), clampToGround: true } }); @@ -3792,113 +3817,6 @@ export default { return entity }, // ================== 工具方法 ================== - /** 生成普通纯色折线材质（无轮廓/发光） */ - getPolylineSolidMaterial(cssColor) { - const color = Cesium.Color.fromCssColorString(cssColor) - return new Cesium.ColorMaterialProperty(color) - }, - /** 根据浏览器缩放比例设置渲染分辨率，减轻 80% 等缩放下线条锯齿 */ - applyResolutionScale() { - if (!this.viewer || !this.viewer.cesiumWidget) return - const vv = window.visualViewport - const scale = (vv && typeof vv.scale === 'number') ? vv.scale : 1 - // 始终使用至少 2.0 倍超采样，80% 缩放下再按比例提高（上限 2.5），显著减轻锯齿 - let resolutionScale = 2.0 - if (scale > 0 && scale < 1) { - resolutionScale = Math.min(2.5, 1 / scale) - if (resolutionScale < 2.0) resolutionScale = 2.0 - } - this.viewer.resolutionScale = resolutionScale - try { - if (typeof this.viewer.cesiumWidget.resize === 'function') { - this.viewer.cesiumWidget.resize() - } - } catch (e) { /* 忽略 resize 异常 */ } - if (this.viewer.scene.requestRenderMode) this.viewer.scene.requestRender() - }, - /** 监听浏览器缩放/窗口变化，更新 resolutionScale；返回取消监听的函数 */ - setupResolutionScaleListener() { - const onResize = () => { - this.applyResolutionScale() - } - if (window.visualViewport) { - window.visualViewport.addEventListener('resize', onResize) - window.visualViewport.addEventListener('scroll', onResize) - } - window.addEventListener('resize', onResize) - return () => { - if (window.visualViewport) { - window.visualViewport.removeEventListener('resize', onResize) - window.visualViewport.removeEventListener('scroll', onResize) - } - window.removeEventListener('resize', onResize) - } - }, - /** 按等经度/等纬度采样矩形边框，使在 2D 地图缩小时仍显示为直线（避免测地线弯弧） */ - getRectangleBorderPositions(rect, segmentsPerEdge = 48) { - const west = rect.west - const south = rect.south - const east = rect.east - const north = rect.north - const positions = [] - const n = Math.max(2, segmentsPerEdge) - for (let i = 0; i <= n; i++) { - const lon = west + (east - west) * (i / n) - positions.push(Cesium.Cartesian3.fromRadians(lon, south)) - } - for (let i = 1; i <= n; i++) { - const lat = south + (north - south) * (i / n) - positions.push(Cesium.Cartesian3.fromRadians(east, lat)) - } - for (let i = 1; i <= n; i++) { - const lon = east - (east - west) * (i / n) - positions.push(Cesium.Cartesian3.fromRadians(lon, north)) - } - for (let i = 1; i < n; i++) { - const lat = north - (north - south) * (i / n) - positions.push(Cesium.Cartesian3.fromRadians(west, lat)) - } - return positions - }, - /** 在 2D 墨卡托下将一段线采样为“直线”（避免测地线弯弧）；返回 Cartesian3 数组含起点到终点 */ - sampleSegmentStraightIn2D(cartesianA, cartesianB, numSegments = 32) { - const cgA = Cesium.Cartographic.fromCartesian(cartesianA) - const cgB = Cesium.Cartographic.fromCartesian(cartesianB) - const lonA = cgA.longitude - const latA = cgA.latitude - const lonB = cgB.longitude - const latB = cgB.latitude - const yA = Math.log(Math.tan(Math.PI / 4 + latA / 2)) - const yB = Math.log(Math.tan(Math.PI / 4 + latB / 2)) - const n = Math.max(1, numSegments) - const positions = [] - for (let i = 0; i <= n; i++) { - const t = i / n - const x = lonA + t * (lonB - lonA) - const y = yA + t * (yB - yA) - const lat = 2 * Math.atan(Math.exp(y)) - Math.PI / 2 - positions.push(Cesium.Cartesian3.fromRadians(x, lat)) - } - return positions - }, - /** 将折线/多边形顶点按 2D 墨卡托“直线”采样，使缩放小时仍显示为直；closed 为 true 表示多边形闭合 */ - getPolylinePositionsStraightIn2D(positions, closed = false, segmentsPerEdge = 32) { - if (!positions || positions.length < 2) return positions - const n = positions.length - const result = [] - const segs = closed ? n : n - 1 - for (let seg = 0; seg < segs; seg++) { - const i = seg - const j = closed ? (seg + 1) % n : seg + 1 - const sampled = this.sampleSegmentStraightIn2D(positions[i], positions[j], segmentsPerEdge) - if (seg === 0) { - result.push(...sampled) - } else { - for (let k = 1; k < sampled.length; k++) result.push(sampled[k]) - } - } - return result - }, getClickPosition(pixelPosition) { const cartesian = this.viewer.camera.pickEllipsoid(pixelPosition, this.viewer.scene.globe.ellipsoid) return cartesian @@ -4160,6 +4078,9 @@ export default { entity.polyline.material = this.getPolylineSolidMaterial(data.borderColor || data.color) entity.polyline.width = data.width } + if (data.name && data.centerEntity && data.centerEntity.label) { + data.centerEntity.label.text = data.name + } break case 'sector': if (entity.polygon) { @@ -4747,7 +4668,13 @@ export default { }, duration: 2 }) - this.$message.success(`已定位到经度 ${this.degreesToDMS(lng)}，纬度 ${this.degreesToDMS(lat)}`) + let coordinateText + if (this.coordinateFormat === 'dms') { + coordinateText = `${this.degreesToDMS(lng)}，${this.degreesToDMS(lat)}` + } else { + coordinateText = `${lng.toFixed(6)}，${lat.toFixed(6)}` + } + this.$message.success(`已定位到经度 ${coordinateText}`) } }, @@ -5018,12 +4945,26 @@ export default { const cartographic = Cesium.Cartographic.fromCartesian(cartesian) const longitude = Cesium.Math.toDegrees(cartographic.longitude) const latitude = Cesium.Math.toDegrees(cartographic.latitude) - this.coordinatesText = `经度: ${this.degreesToDMS(longitude)}, 纬度: ${this.degreesToDMS(latitude)}` + this.currentCoordinates = { longitude, latitude } + this.updateCoordinatesDisplay() } else { this.coordinatesText = '经度: --, 纬度: --' } }, Cesium.ScreenSpaceEventType.MOUSE_MOVE) }, + // 更新坐标显示 + updateCoordinatesDisplay() { + if (!this.currentCoordinates) { + this.coordinatesText = '经度: --, 纬度: --' + return + } + const { longitude, latitude } = this.currentCoordinates + if (this.coordinateFormat === 'dms') { + this.coordinatesText = `经度: ${this.degreesToDMS(longitude)}, 纬度: ${this.degreesToDMS(latitude)}` + } else { + this.coordinatesText = `经度: ${longitude.toFixed(6)}, 纬度: ${latitude.toFixed(6)}` + } + }, destroyViewer() { this.stopDrawing() this.clearAll(false) @@ -5162,6 +5103,17 @@ export default { outlineColor: Cesium.Color.WHITE, outlineWidth: 2, disableDepthTestDistance: Number.POSITIVE_INFINITY + }, + label: { + text: '', + font: '14px Microsoft YaHei', + fillColor: Cesium.Color.WHITE, + outlineColor: Cesium.Color.BLACK, + outlineWidth: 2, + style: Cesium.LabelStyle.FILL_AND_OUTLINE, + verticalOrigin: Cesium.VerticalOrigin.TOP, + pixelOffset: new Cesium.Cartesian2(0, -20), + disableDepthTestDistance: Number.POSITIVE_INFINITY } }); @@ -5202,12 +5154,17 @@ export default { centerEntity: this.powerZoneCenterEntity, center: this.powerZoneCenter, radius: radiusInMeters, + name: radiusData.name, color: '#FF0000', opacity: 0, borderColor: '#FF0000', width: 2 }); + if (this.powerZoneCenterEntity && this.powerZoneCenterEntity.label) { + this.powerZoneCenterEntity.label.text = radiusData.name; + } + this.isDrawing = false; this.viewer.canvas.style.cursor = 'default'; diff --git a/ruoyi-ui/src/views/childRoom/index.vue b/ruoyi-ui/src/views/childRoom/index.vue index 9d1aacf..418e33e 100644 --- a/ruoyi-ui/src/views/childRoom/index.vue +++ b/ruoyi-ui/src/views/childRoom/index.vue @@ -12,6 +12,7 @@ + + + + { if (valid) { this.$emit('confirm', { + name: this.formData.name, radius: this.formData.radius, unit: this.formData.unit })