Browse Source

坐标转换

lbj
sd 2 months ago
parent
commit
2227d367fd
  1. 75
      ruoyi-ui/src/views/cesiumMap/LocateDialog.vue
  2. 49
      ruoyi-ui/src/views/cesiumMap/index.vue
  3. 8
      ruoyi-ui/src/views/childRoom/index.vue

75
ruoyi-ui/src/views/cesiumMap/LocateDialog.vue

@ -61,7 +61,7 @@
<el-option
v-for="item in waypointList"
:key="item.id"
:label="`${item.name} (${degreesToDMS(item.lng)}, ${degreesToDMS(item.lat)})`"
:label="`${item.name} (${formatCoordinate(item.lng)}, ${formatCoordinate(item.lat)})`"
:value="item.id"
/>
</el-select>
@ -70,7 +70,7 @@
<el-form-item label="经度:">
<el-input
v-model="formData.lng"
placeholder="例如 116°23'48.64""
:placeholder="coordinateFormat === 'dms' ? '例如 116°23\'48.64&quot;' : '例如 116.396844'"
clearable
/>
</el-form-item>
@ -78,7 +78,7 @@
<el-form-item label="纬度:">
<el-input
v-model="formData.lat"
placeholder="例如 39°54'33.48""
:placeholder="coordinateFormat === 'dms' ? '例如 39°54\'33.48&quot;' : '例如 39.909289'"
clearable
/>
</el-form-item>
@ -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,6 +196,7 @@ export default {
return sign * (Math.abs(degrees) + minutes / 60 + seconds / 3600)
},
resetForm() {
if (this.coordinateFormat === 'dms') {
this.formData = {
scenarioId: null,
routeId: null,
@ -164,6 +204,15 @@ export default {
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,13 +282,25 @@ export default {
return
}
const lngDegrees = this.dmsToDegrees(lng)
const latDegrees = this.dmsToDegrees(lat)
let lngDegrees, latDegrees
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) {
this.$message.error('经纬度超出有效范围!')

49
ruoyi-ui/src/views/cesiumMap/index.vue

@ -43,6 +43,7 @@
<!-- 定位弹窗 -->
<locate-dialog
:visible="locateDialogVisible"
:coordinateFormat="coordinateFormat"
@update:visible="locateDialogVisible = $event"
@confirm="handleLocateConfirm"
@cancel="handleLocateCancel"
@ -114,6 +115,10 @@ export default {
unit: 'km',
position: 'bottom-right'
})
},
coordinateFormat: {
type: String,
default: 'dms' // 'decimal' 'dms'
}
},
watch: {
@ -133,6 +138,11 @@ export default {
this.updateScaleFromConfig(newVal)
}
}
},
coordinateFormat: {
handler(newVal) {
this.updateCoordinatesDisplay()
}
}
},
data() {
@ -185,6 +195,7 @@ export default {
},
//
coordinatesText: '经度: --, 纬度: --',
currentCoordinates: null,
//
scaleBarText: '--',
scaleBarWidthPx: 80,
@ -1695,7 +1706,7 @@ export default {
webgl: {
antialias: true,
msaa: true,
msaaSamples: 8
msaaSamples: 4
}
}
})
@ -2259,10 +2270,18 @@ this.viewer.scene.postProcessStages.fxaa.enabled = true
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,
@ -2524,7 +2543,7 @@ this.viewer.scene.postProcessStages.fxaa.enabled = true
color: Cesium.Color.fromCssColorString(this.defaultStyles.line.color),
dashLength: 16
}),
arcType: Cesium.ArcType.NONE
clampToGround: true
}
});
}
@ -4653,7 +4672,13 @@ this.viewer.scene.postProcessStages.fxaa.enabled = true
},
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}`)
}
},
@ -4925,12 +4950,26 @@ this.viewer.scene.postProcessStages.fxaa.enabled = true
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)

8
ruoyi-ui/src/views/childRoom/index.vue

@ -12,6 +12,7 @@
<cesiumMap ref="cesiumMap" :drawDomClick="drawDom || airspaceDrawDom"
:tool-mode="drawDom ? 'ranging' : (airspaceDrawDom ? 'airspace' : 'airspace')"
:scaleConfig="scaleConfig"
:coordinateFormat="coordinateFormat"
@draw-complete="handleMapDrawComplete"
@drawing-points-update="missionDrawingPointsCount = $event"
@open-waypoint-dialog="handleOpenWaypointEdit"
@ -563,6 +564,9 @@ export default {
showLandmark: true,
showRoute: true,
//
coordinateFormat: 'dms', // 'decimal' 'dms'
menuItems: [],
//
@ -1794,8 +1798,8 @@ export default {
},
coordinateConversion() {
this.$message.success('坐标换算');
//
this.coordinateFormat = this.coordinateFormat === 'decimal' ? 'dms' : 'decimal'
this.$message.success(`坐标格式已切换为:${this.coordinateFormat === 'decimal' ? '十进制' : '度分秒'}`)
},
//

Loading…
Cancel
Save