feat: 地图提示挪走

罗广辉

2026-01-31 4cd17f4e640ae22ec64eb170468d1154d9a1eff5

feat: 地图提示挪走

 applications/drone-command/src/utils/cesium/shapeTools/draw/DrawBufferCircleTool.js

@@ -1,5 +1,5 @@
import * as Cesium from 'cesium'
import { MapTooltip } from '../Tooltip'
import { MapTooltip } from '@ztzf/utils'
import { ToolBase } from '../ToolBase'
import { buildEllipsePositions } from '../shapeUtils'


 applications/drone-command/src/utils/cesium/shapeTools/draw/DrawEllipseTool.js

@@ -1,5 +1,5 @@
import * as Cesium from 'cesium'
import { MapTooltip } from '../Tooltip'
import { MapTooltip } from '@ztzf/utils'
import { ToolBase } from '../ToolBase'
import { buildEllipsePositions } from '../shapeUtils'


 applications/drone-command/src/utils/cesium/shapeTools/draw/DrawPolygonTool.js

@@ -1,5 +1,5 @@
import * as Cesium from 'cesium'
import { MapTooltip } from '../Tooltip'
import { MapTooltip } from '@ztzf/utils'
import { ToolBase } from '../ToolBase'

const POINT_ENTITY_NAME = 'draw-polygon-point'
@@ -125,10 +125,7 @@

        this.polygonEntity = this.dataSource.entities.add({
            polygon: {
                hierarchy: new Cesium.CallbackProperty(
                    () => new Cesium.PolygonHierarchy(getPreviewPositions()),
                    false
                ),
                hierarchy: new Cesium.CallbackProperty(() => new Cesium.PolygonHierarchy(getPreviewPositions()), false),
                material: this.style.fill,
                outline: false,
                heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,

 applications/drone-command/src/utils/cesium/shapeTools/draw/DrawRectangleTool.js

@@ -1,5 +1,5 @@
import * as Cesium from 'cesium'
import { MapTooltip } from '../Tooltip'
import { MapTooltip } from '@ztzf/utils'
import { ToolBase } from '../ToolBase'
import { getBoundsFromCartesians, rectanglePositionsFromBounds } from '../shapeUtils'


 applications/drone-command/src/utils/cesium/shapeTools/edit/EditBufferCircleTool.js

@@ -1,5 +1,5 @@
import * as Cesium from 'cesium'
import { MapTooltip } from '../Tooltip'
import { MapTooltip } from '@ztzf/utils'
import { ToolBase } from '../ToolBase'
import { buildEllipsePositions, cartesianToLocal } from '../shapeUtils'


 applications/drone-command/src/utils/cesium/shapeTools/edit/EditEllipseTool.js

@@ -1,5 +1,5 @@
import * as Cesium from 'cesium'
import { MapTooltip } from '../Tooltip'
import { MapTooltip } from '@ztzf/utils'
import { ToolBase } from '../ToolBase'
import {
    getBoundsFromLngLats,
@@ -81,10 +81,8 @@
            const minorFromMeta = Number.isFinite(meta?.semiMinor) ? Number(meta.semiMinor) : 0
            const majorPoint = resolveCartographic(meta?.majorPoint)
            const minorPoint = resolveCartographic(meta?.minorPoint)
            const majorDistance =
                majorFromMeta || (majorPoint ? getMetersBetween(centerCarto, majorPoint) : 0)
            const minorDistance =
                minorFromMeta || (minorPoint ? getMetersBetween(centerCarto, minorPoint) : 0)
            const majorDistance = majorFromMeta || (majorPoint ? getMetersBetween(centerCarto, majorPoint) : 0)
            const minorDistance = minorFromMeta || (minorPoint ? getMetersBetween(centerCarto, minorPoint) : 0)
            if (majorDistance > 0) this.semiMajor = Math.max(1, majorDistance)
            if (minorDistance > 0) this.semiMinor = Math.max(1, minorDistance)
            if (this.semiMinor > this.semiMajor) this.semiMinor = this.semiMajor

 applications/drone-command/src/utils/cesium/shapeTools/edit/EditPolygonTool.js

@@ -1,5 +1,5 @@
import * as Cesium from 'cesium'
import { MapTooltip } from '../Tooltip'
import { MapTooltip } from '@ztzf/utils'
import { ToolBase } from '../ToolBase'

const POINT_ENTITY_NAME = 'edit-polygon-point'
@@ -101,10 +101,7 @@
    createEntities() {
        this.polygonEntity = this.dataSource.entities.add({
            polygon: {
                hierarchy: new Cesium.CallbackProperty(
                    () => new Cesium.PolygonHierarchy(this.positions),
                    false
                ),
                hierarchy: new Cesium.CallbackProperty(() => new Cesium.PolygonHierarchy(this.positions), false),
                material: this.style.fill,
                outline: false,
                heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,

 applications/drone-command/src/utils/cesium/shapeTools/edit/EditRectangleTool.js

@@ -1,5 +1,5 @@
import * as Cesium from 'cesium'
import { MapTooltip } from '../Tooltip'
import { MapTooltip } from '@ztzf/utils'
import { ToolBase } from '../ToolBase'
import { getBoundsFromLngLats, rectanglePositionsFromBounds } from '../shapeUtils'

@@ -139,9 +139,7 @@
    }

    getCornerCartographics() {
        return rectanglePositionsFromBounds(this.bounds).map(position =>
            Cesium.Cartographic.fromCartesian(position)
        )
        return rectanglePositionsFromBounds(this.bounds).map(position => Cesium.Cartographic.fromCartesian(position))
    }

    getPositionFromScreen(screenPosition) {

 applications/drone-command/src/utils/cesium/shapeTools/index.js

@@ -1,6 +1,14 @@
export { DrawManager } from './DrawManager'
export { EditManager } from './EditManager'
export { buildEllipsePositions, getBoundsFromCartesians, getBoundsFromLngLats, rectanglePositionsFromBounds, getCenterFromBounds, getMetersBetween, cartesianToLocal } from './shapeUtils'
export {
    buildEllipsePositions,
    getBoundsFromCartesians,
    getBoundsFromLngLats,
    rectanglePositionsFromBounds,
    getCenterFromBounds,
    getMetersBetween,
    cartesianToLocal,
} from './shapeUtils'
export { DrawPolygonTool } from './draw/DrawPolygonTool'
export { DrawRectangleTool } from './draw/DrawRectangleTool'
export { DrawEllipseTool } from './draw/DrawEllipseTool'
@@ -10,4 +18,4 @@
export { EditEllipseTool } from './edit/EditEllipseTool'
export { EditBufferCircleTool } from './edit/EditBufferCircleTool'
export { ToolBase } from './ToolBase'
export { MapTooltip as Tooltip } from './Tooltip'
export { MapTooltip as Tooltip } from '@ztzf/utils'

 applications/drone-command/src/views/areaManage/precinctInfo/FormDiaLog.vue

@@ -121,7 +121,7 @@
import { saveOperationLog } from '@ztzf/apis'
import { useRoute } from 'vue-router'
import positionIcon from '@/assets/images/areaManage/positionIcon.png'
import { MapTooltip } from '@/utils/cesium/shapeTools/Tooltip'
import { MapTooltip } from '@ztzf/utils'

const initForm = () => ({
    address: '', // 位置

 applications/drone-command/src/views/areaManage/sceneManage/FormDiaLog.vue

@@ -111,12 +111,7 @@
                        />
                    </el-form-item>
                    <el-form-item label="指挥点位置" prop="longitude">
                        <el-input
                            class="command-input"
                            :model-value="commandPointText"
                            disabled
                            placeholder="请选择指挥点位置"
                        >
                        <el-input class="command-input" :model-value="commandPointText" disabled placeholder="请选择指挥点位置">
                            <template #suffix>
                                <span class="suffix-action">地图选点</span>
                            </template>
@@ -160,7 +155,7 @@
import { buildEllipsePositions } from '@/utils/cesium/shapeTools'
import { cartesian3Convert } from '@/utils/cesium/mapUtil'
import { AREA_TYPE_STYLE_MAP, BUFFER_LEVEL_STYLES, DEFAULT_AREA_STYLE } from '@ztzf/constants'
import { MapTooltip } from '@/utils/cesium/shapeTools/Tooltip'
import { MapTooltip } from '@ztzf/utils'

// 初始化表单数据
const initForm = () => ({
@@ -175,12 +170,12 @@
})

const commandPointText = computed(() => {
  // 你也可以改成 `${lng}, ${lat}`
  if (!formData.value.longitude) {
    return ''
  }
  return `${formData.value.longitude}, ${formData.value.latitude}`;
});
    // 你也可以改成 `${lng}, ${lat}`
    if (!formData.value.longitude) {
        return ''
    }
    return `${formData.value.longitude}, ${formData.value.latitude}`
})

const emit = defineEmits(['success'])
const formRef = ref(null) // 表单实例
@@ -396,9 +391,7 @@
                    const resolved = resolveLngLatPoint(point)
                    const normalized = normalizeShapePoint(resolved)
                    if (!normalized) return
                    positions.push(
                        Cesium.Cartesian3.fromDegrees(normalized.lng, normalized.lat, normalized.height)
                    )
                    positions.push(Cesium.Cartesian3.fromDegrees(normalized.lng, normalized.lat, normalized.height))
                })
            }
            if (shape?.drawType === 'buffer' && shape?.meta?.center && Array.isArray(shape?.meta?.bufferRadii)) {
@@ -538,7 +531,6 @@
    sceneConfigList.value = res?.data?.data ?? []
}


// 获取场景配置名称
function getSceneConfigName(id) {
    if (!id) return ''
@@ -669,8 +661,7 @@
    fitViewToSceneAreas()
}

onMounted(() => {
})
onMounted(() => {})

watch(
    () => formData.value.defenseSceneId,
@@ -689,7 +680,6 @@
        }
    }
)


defineExpose({
    open,

 applications/drone-command/src/views/detectionCountermeasure/detectionRange/DetectionRangeDialog.vue

@@ -23,7 +23,7 @@
            <div class="right-container">
                <div class="header">
                    <span>{{ formTitle }}</span>
				

                    <el-icon class="close-btn" @click.stop="visible = false"><Close /></el-icon>
                </div>

@@ -88,34 +88,17 @@
                        </el-select>
                    </el-form-item>
                    <el-form-item label="设备位置" prop="deployLocation">
                        <el-input
                            class="command-input"
                            v-model="formData.deployLocation"
                            disabled
                            placeholder="请选择位置"
                        >
                        <el-input class="command-input" v-model="formData.deployLocation" disabled placeholder="请选择位置">
                            <template #suffix>
                                <span class="suffix-action">地图选点</span>
                            </template>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="设备编号" prop="deviceSn">
                        <el-input
                            class="command-input"
                            v-model="formData.deviceSn"
                            disabled
                            placeholder="请输入"
                            clearable
                        />
                        <el-input class="command-input" v-model="formData.deviceSn" disabled placeholder="请输入" clearable />
                    </el-form-item>
                    <el-form-item label="设备型号" prop="deviceModel">
                        <el-input
                            class="command-input"
                            v-model="formData.deviceModel"
                            disabled
                            placeholder="请输入"
                            clearable
                        />
                        <el-input class="command-input" v-model="formData.deviceModel" disabled placeholder="请输入" clearable />
                    </el-form-item>
                    <el-form-item label="覆盖范围(m)" prop="effectiveRangeKm">
                        <el-input-number
@@ -130,7 +113,9 @@
                    </el-form-item>
                </el-form>
                <div class="footer">
                    <el-button v-if="dialogMode != 'view'" color="#2B2B4C" @click="handleCancel">{{ dialogReadonly ? '关闭' : '取消' }}</el-button>
                    <el-button v-if="dialogMode != 'view'" color="#2B2B4C" @click="handleCancel">
                        {{ dialogReadonly ? '关闭' : '取消' }}
                    </el-button>
                    <el-button
                        color="#284FE3"
                        v-if="!dialogReadonly"
@@ -163,7 +148,7 @@
import * as Cesium from 'cesium'
import { saveOperationLog } from '@ztzf/apis'
import { useRoute } from 'vue-router'
import { MapTooltip } from '@/utils/cesium/shapeTools/Tooltip'
import { MapTooltip } from '@ztzf/utils'

import equipment from '@/assets/images/dataCockpit/legend/equipment.png'

@@ -254,7 +239,7 @@
    if (!isValid) return
    submitting.value = true
    try {
        const {longitude, latitude} = parseDeployLocation(formData.value.deployLocation)
        const { longitude, latitude } = parseDeployLocation(formData.value.deployLocation)
        const normalizedRange = normalizeRange(formData.value.effectiveRangeKm)

        const payload = {
@@ -262,7 +247,7 @@
            effectiveRangeKmIsNotNull: normalizedRange != null ? 1 : 2,
            effectiveRangeKm: normalizedRange,
            longitude,
            latitude
            latitude,
        }
        formData.value.effectiveRangeKm = normalizedRange
        delete payload.deviceId
@@ -272,7 +257,7 @@
        saveOperationLog({
            requestUri: route.path,
            title: `${route.name || '侦测范围管理'}-${actionText}`,
            type: 1
            type: 1,
        })

        ElMessage.success(dialogMode.value === 'add' ? '新增成功' : '更新成功')
@@ -295,7 +280,7 @@
        current: 1,
        size: 200,
        effectiveRangeKmIsNotNull: 2,
        isTrack: 1
        isTrack: 1,
    })
    const records = res?.data?.data?.records ?? []
    deviceOptions.value = records.map(item => ({

 packages/utils/map/MapTooltip.js

File was renamed from applications/drone-command/src/utils/cesium/shapeTools/Tooltip.js
@@ -1,4 +1,4 @@
export class MapTooltip {
export class MapTooltip {
    constructor(viewer, options = {}) {
        this.viewer = viewer
        this.options = options
@@ -40,14 +40,7 @@
        if (!this.tooltipEl || !position) return
        const width = this.container?.clientWidth ?? 0
        const height = this.container?.clientHeight ?? 0
        if (
            !width ||
            !height ||
            position.x < 0 ||
            position.y < 0 ||
            position.x > width ||
            position.y > height
        ) {
        if (!width || !height || position.x < 0 || position.y < 0 || position.x > width || position.y > height) {
            this.hide()
            return
        }

 packages/utils/map/index.js

@@ -1,24 +1,5 @@
import * as Cesium from 'cesium'

// 获取正射影像4至点
export function getOrthoImageBoundaryPoints (data) {
    const arr = JSON.parse(data)

    if (arr.length !== 4) return undefined

    const west = Math.min(arr[0], arr[2])
    const east = Math.max(arr[0], arr[2])
    const south = Math.min(arr[1], arr[3])
    const north = Math.max(arr[1], arr[3])

    return Cesium.Rectangle.fromDegrees(
        west,
        south,
        east,
        north
    )
}

import { MapTooltip } from './MapTooltip'
/**
 * 飞到中心点并且所有点在可视范围
 *  @param positionsData 二维数组，每项为 [lon, lat] 或 三维数组 [lon, lat, height]
@@ -26,7 +7,7 @@
 *  @param multiple 缩放倍数-默认为4
 *  @param pitch 俯仰角-默认为-90
 */
export function flyVisual({ positionsData, viewer, multiple = 4, pitch = -90 }) {
function flyVisual({ positionsData, viewer, multiple = 4, pitch = -90 }) {
    if (!Array.isArray(positionsData) || positionsData.length === 0) return

    // 如果是一个点，加两个点方便后续生成外包围盒
@@ -79,3 +60,5 @@
        },
    })
}

export { MapTooltip, flyVisual }