diff --git a/ruoyi-ui/src/views/cesiumMap/LocateDialog.vue b/ruoyi-ui/src/views/cesiumMap/LocateDialog.vue new file mode 100644 index 0000000..63419b0 --- /dev/null +++ b/ruoyi-ui/src/views/cesiumMap/LocateDialog.vue @@ -0,0 +1,257 @@ + + + + + \ No newline at end of file diff --git a/ruoyi-ui/src/views/cesiumMap/index.vue b/ruoyi-ui/src/views/cesiumMap/index.vue index 721a567..cf4a945 100644 --- a/ruoyi-ui/src/views/cesiumMap/index.vue +++ b/ruoyi-ui/src/views/cesiumMap/index.vue @@ -35,6 +35,15 @@ @delete="deleteEntityFromContextMenu" @update-property="updateEntityProperty" /> + + + +
@@ -57,6 +66,7 @@ import DrawingToolbar from './DrawingToolbar.vue' import MeasurementPanel from './MeasurementPanel.vue' import HoverTooltip from './HoverTooltip.vue' import ContextMenu from './ContextMenu.vue' +import LocateDialog from './LocateDialog.vue' import axios from 'axios' import request from '@/utils/request' import { getToken } from '@/utils/auth' @@ -138,14 +148,17 @@ export default { coordinatesText: '经度: --, 纬度: --', // 比例尺(高德风格) scaleBarText: '--', - scaleBarWidthPx: 80 + scaleBarWidthPx: 80, + // 定位相关 + locateDialogVisible: false } }, components: { DrawingToolbar, MeasurementPanel, HoverTooltip, - ContextMenu + ContextMenu, + LocateDialog }, mounted() { console.log(this.drawDomClick,999999) @@ -2770,75 +2783,48 @@ export default { } }, handleLocate() { - const h = this.$createElement - this.$msgbox({ - title: '定位', - message: h('div', {style: 'padding: 10px 0;'}, [ - h('div', {style: 'margin-bottom: 15px;'}, [ - h('label', {style: 'display: block; margin-bottom: 5px; color: #606266;'}, '经度:'), - h('input', { - attrs: { - type: 'number', - placeholder: '例如 116.40', - step: '0.000001', - value: '116.3974' - }, - style: 'width: 100%; padding: 8px; border: 1px solid #dcdfe6; border-radius: 4px; box-sizing: border-box;', - ref: 'lngInput' - }) - ]), - h('div', null, [ - h('label', {style: 'display: block; margin-bottom: 5px; color: #606266;'}, '纬度:'), - h('input', { - attrs: { - type: 'number', - placeholder: '例如 39.90', - step: '0.000001', - value: '39.9093' - }, - style: 'width: 100%; padding: 8px; border: 1px solid #dcdfe6; border-radius: 4px; box-sizing: border-box;', - ref: 'latInput' - }) - ]) - ]), - showCancelButton: true, - confirmButtonText: '确定', - cancelButtonText: '取消', - beforeClose: (action, instance, done) => { - if (action === 'confirm') { - const lngInput = instance.$el.querySelector('input[placeholder="例如 116.40"]') - const latInput = instance.$el.querySelector('input[placeholder="例如 39.90"]') - const lng = parseFloat(lngInput.value) - const lat = parseFloat(latInput.value) - if (!lng || !lat || isNaN(lng) || isNaN(lat)) { - this.$message.error('请输入有效的经度和纬度!') - return - } - if (lng < -180 || lng > 180 || lat < -90 || lat > 90) { - this.$message.error('经纬度超出有效范围!') - return - } - if (this.viewer) { - this.viewer.camera.flyTo({ - destination: Cesium.Cartesian3.fromDegrees(lng, lat, 5000), - orientation: { - heading: Cesium.Math.toRadians(0.0), - pitch: Cesium.Math.toRadians(-90.0), - roll: 0.0 - }, - duration: 2 - }) - this.$message.success(`已定位到经度 ${lng.toFixed(4)},纬度 ${lat.toFixed(4)}`) - } - done() - } else { - this.$message.info('已取消定位') - done() - } - } - }).catch(() => { - this.$message.info('已取消定位') + this.locateDialogVisible = true + }, + + handleLocateConfirm(location) { + const { lng, lat } = location + if (this.viewer) { + this.viewer.camera.flyTo({ + destination: Cesium.Cartesian3.fromDegrees(lng, lat, 100000), + orientation: { + heading: Cesium.Math.toRadians(0.0), + pitch: Cesium.Math.toRadians(-90.0), + roll: 0.0 + }, + duration: 2 + }) + this.$message.success(`已定位到经度 ${lng.toFixed(4)},纬度 ${lat.toFixed(4)}`) + } + }, + + handleLocateCancel() { + this.$message.info('已取消定位') + }, + updateSelectOptions(refName, dataList, labelField) { + const select = document.querySelector(`select[ref="${refName}"]`) + if (!select) return + + const currentValue = select.value + select.innerHTML = '' + + const defaultOption = document.createElement('option') + defaultOption.value = '' + defaultOption.textContent = refName === 'routeSelect' ? '请选择航线' : '请选择航点' + select.appendChild(defaultOption) + + dataList.forEach(item => { + const option = document.createElement('option') + option.value = item.id + option.textContent = typeof labelField === 'function' ? labelField(item) : item[labelField] + select.appendChild(option) }) + + select.value = currentValue }, initScaleBar() { const that = this