feat:缓冲圆半径显示处理

shuishen

2026-02-02 c987705058e8145e0b0773eb5ce1a69e1f7aa65a

feat:缓冲圆半径显示处理

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

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

export class DrawBufferCircleTool extends ToolBase {
    constructor(viewer) {
@@ -21,6 +21,9 @@
        this.radiusPoint1 = null
        this.radiusPoint2 = null
        this.radiusPoint3 = null
        this.radiusLevel1LabelEntity = null
        this.radiusLevel2LabelEntity = null
        this.radiusLevel3LabelEntity = null
        this.isDrawing = false
        this.drawStep = 0
        this.isCompleted = false
@@ -193,6 +196,10 @@
                material: Cesium.Color.fromBytes(0, 251, 255, 255),
            },
        })

        this.radiusLevel1LabelEntity = this.createRadiusLabelEntity(() => this.radiusLevel1)
        this.radiusLevel2LabelEntity = this.createRadiusLabelEntity(() => this.radiusLevel2)
        this.radiusLevel3LabelEntity = this.createRadiusLabelEntity(() => this.radiusLevel3)
    }

    clearPreviewEntities() {
@@ -204,6 +211,9 @@
        this.circleLevel1OutlineEntity = null
        this.circleLevel2OutlineEntity = null
        this.circleLevel3OutlineEntity = null
        this.radiusLevel1LabelEntity = null
        this.radiusLevel2LabelEntity = null
        this.radiusLevel3LabelEntity = null
    }

    getSurfaceDistance(startCartesian, endCartesian) {
@@ -218,6 +228,33 @@
        const cartesian = scene.pickPosition(screenPosition)
        if (cartesian) return cartesian
        return scene.camera.pickEllipsoid(screenPosition, scene.globe.ellipsoid)
    }

    getRadiusPoint(radius) {
        const frame = Cesium.Transforms.eastNorthUpToFixedFrame(this.centerCartesian)
        const local = new Cesium.Cartesian3(radius, 0, 0)
        return Cesium.Matrix4.multiplyByPoint(frame, local, new Cesium.Cartesian3())
    }

    createRadiusLabelEntity(getRadius) {
        return this.dataSource.entities.add({
            position: new Cesium.CallbackProperty(() => this.getRadiusPoint(getRadius()), false),
            label: {
                text: new Cesium.CallbackProperty(() => formatBufferRadius(getRadius()), false),
                font: '14px Source Han Sans CN',
                fillColor: Cesium.Color.WHITE,
                outlineColor: Cesium.Color.fromBytes(24, 48, 92, 255),
                outlineWidth: 2,
                style: Cesium.LabelStyle.FILL_AND_OUTLINE,
                showBackground: true,
                backgroundColor: Cesium.Color.fromBytes(8, 12, 22, 180),
                heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
                verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
                horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
                pixelOffset: new Cesium.Cartesian2(0, -12),
                disableDepthTestDistance: Number.POSITIVE_INFINITY,
            },
        })
    }

    destroy() {
@@ -241,6 +278,9 @@
        this.radiusPoint1 = null
        this.radiusPoint2 = null
        this.radiusPoint3 = null
        this.radiusLevel1LabelEntity = null
        this.radiusLevel2LabelEntity = null
        this.radiusLevel3LabelEntity = null
        this.isDrawing = false
        this.drawStep = 0
        this.isCompleted = false

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

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

const normalizePoints = points =>
    (points || []).map(point => ({
@@ -49,6 +49,9 @@
        this.radiusLevel1Entity = null
        this.radiusLevel2Entity = null
        this.radiusLevel3Entity = null
        this.radiusLevel1LabelEntity = null
        this.radiusLevel2LabelEntity = null
        this.radiusLevel3LabelEntity = null
    }

    start(data = []) {
@@ -272,6 +275,10 @@
            },
            customType: 'circle-radius-3',
        })

        this.radiusLevel1LabelEntity = this.createRadiusLabelEntity(() => this.radiusLevel1)
        this.radiusLevel2LabelEntity = this.createRadiusLabelEntity(() => this.radiusLevel2)
        this.radiusLevel3LabelEntity = this.createRadiusLabelEntity(() => this.radiusLevel3)
    }

    updateRadiusPoints() {
@@ -301,6 +308,27 @@
        const frame = Cesium.Transforms.eastNorthUpToFixedFrame(this.centerCartesian)
        const local = new Cesium.Cartesian3(radius, 0, 0)
        return Cesium.Matrix4.multiplyByPoint(frame, local, new Cesium.Cartesian3())
    }

    createRadiusLabelEntity(getRadius) {
        return this.dataSource.entities.add({
            position: new Cesium.CallbackProperty(() => this.getRadiusPoint(getRadius()), false),
            label: {
                text: new Cesium.CallbackProperty(() => formatBufferRadius(getRadius()), false),
                font: '14px Source Han Sans CN',
                fillColor: Cesium.Color.WHITE,
                outlineColor: Cesium.Color.fromBytes(24, 48, 92, 255),
                outlineWidth: 2,
                style: Cesium.LabelStyle.FILL_AND_OUTLINE,
                showBackground: true,
                backgroundColor: Cesium.Color.fromBytes(8, 12, 22, 180),
                heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
                verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
                horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
                pixelOffset: new Cesium.Cartesian2(0, -12),
                disableDepthTestDistance: Number.POSITIVE_INFINITY,
            },
        })
    }

    getPositionFromScreen(screenPosition) {
@@ -346,6 +374,9 @@
        this.circleLevel1OutlineEntity = null
        this.circleLevel2OutlineEntity = null
        this.circleLevel3OutlineEntity = null
        this.radiusLevel1LabelEntity = null
        this.radiusLevel2LabelEntity = null
        this.radiusLevel3LabelEntity = null
        this.dragType = null
    }
}

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

@@ -8,6 +8,7 @@
    getCenterFromBounds,
    getMetersBetween,
    cartesianToLocal,
    formatBufferRadius,
} from './shapeUtils'
export { DrawPolygonTool } from './draw/DrawPolygonTool'
export { DrawRectangleTool } from './draw/DrawRectangleTool'

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

@@ -87,3 +87,9 @@
    const inverse = Cesium.Matrix4.inverse(frame, new Cesium.Matrix4())
    return Cesium.Matrix4.multiplyByPoint(inverse, positionCartesian, new Cesium.Cartesian3())
}

export const formatBufferRadius = meters => {
    if (!Number.isFinite(meters)) return ''
    if (meters >= 1000) return `${(meters / 1000).toFixed(2)} km`
    return `${meters.toFixed(2)} m`
}

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

@@ -3,7 +3,7 @@
        <div class="dialog-container">
            <div class="left-container">
                <CommonCesiumMap ref="mapRef" class="leftMap command-cesium" :active="visible" :flat-mode="false"
                    :terrain="true" :layer-mode="4" :boundary="false" />
                    :terrain="true" :layer-mode="4" :boundary="false" :zoom-to-boundary="dialogMode === 'add'" />
                <div v-if="showTypePanel && !readonly" class="shape-type-panel">
                    <div class="panel-header">
                        <span>{{ drawTypeLabelMap[currentShapeType] || '区域' }}</span>
@@ -14,8 +14,8 @@
                    <div class="panel-body">
                        <span class="panel-label">区域类型</span>
                        <el-select class="command-select" popper-class="command-select-popper" v-model="activeAreaType"
                            placeholder="请选择" :disabled="currentShapeType === 'buffer'" collapse-tags :multiple="currentShapeType === 'buffer'"
                            @change="handleAreaTypeChange">
                            placeholder="请选择" :disabled="currentShapeType === 'buffer'" collapse-tags
                            :multiple="currentShapeType === 'buffer'" @change="handleAreaTypeChange">
                            <el-option v-for="item in dictObj.areaType" :key="item.dictKey" :label="item.dictValue"
                                :value="item.dictKey" />
                        </el-select>
@@ -233,7 +233,7 @@
import { useRoute } from 'vue-router'
import { fieldRules, geomAnalysis, getDictLabel } from '@ztzf/utils'
import CommonCesiumMap from '@/components/map-container/common-cesium-map.vue'
import { DrawManager, EditManager, buildEllipsePositions } from '@/utils/cesium/shapeTools'
import { DrawManager, EditManager, buildEllipsePositions, formatBufferRadius } from '@/utils/cesium/shapeTools'
import { cartesian3Convert } from '@/utils/cesium/mapUtil'
import {
    createDeviceRangePrimitive,
@@ -609,6 +609,35 @@
    return AREA_TYPE_STYLE_MAP?.[String(areaType)] || DEFAULT_AREA_STYLE
}

function getBufferRadiusPoint (centerCartesian, radius) {
    const frame = Cesium.Transforms.eastNorthUpToFixedFrame(centerCartesian)
    const local = new Cesium.Cartesian3(radius, 0, 0)
    return Cesium.Matrix4.multiplyByPoint(frame, local, new Cesium.Cartesian3())
}

function addBufferRadiusLabel (dataSource, centerCartesian, radius) {
    dataSource.entities.add({
        name: 'shape-display',
        customData: { drawType: 'buffer', label: 'radius' },
        position: getBufferRadiusPoint(centerCartesian, radius),
        label: {
            text: formatBufferRadius(radius),
            font: '14px Source Han Sans CN',
            fillColor: Cesium.Color.WHITE,
            outlineColor: Cesium.Color.fromBytes(24, 48, 92, 255),
            outlineWidth: 2,
            style: Cesium.LabelStyle.FILL_AND_OUTLINE,
            showBackground: true,
            backgroundColor: Cesium.Color.fromBytes(8, 12, 22, 180),
            heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
            horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
            pixelOffset: new Cesium.Cartesian2(0, -12),
            disableDepthTestDistance: Number.POSITIVE_INFINITY,
        },
    })
}

function renderShapeList () {
    if (!viewer || !visible.value) {
        clearShapeDisplay()
@@ -650,6 +679,7 @@
                            material: style.outline,
                        },
                    })
                    addBufferRadiusLabel(dataSource, centerCartesian, radius)
                })
            }
            return
@@ -1142,6 +1172,7 @@
    clearActiveTool()
    await getDeviceList()
    if (dialogMode.value === 'add') {
        mapRef.value?.zoomToAdminBoundary?.()
        // default no draw mode
    } else if (dialogMode.value === 'edit') {
        await loadDetail()

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

@@ -160,7 +160,7 @@
import CommonCesiumMap from '@/components/map-container/common-cesium-map.vue'
import * as Cesium from 'cesium'
import { fwAreaDivideDetailApi, fwAreaDivideListApi } from '../partition/partitionApi'
import { buildEllipsePositions } from '@/utils/cesium/shapeTools'
import { buildEllipsePositions, formatBufferRadius } from '@/utils/cesium/shapeTools'
import { cartesian3Convert } from '@/utils/cesium/mapUtil'
import { saveOperationLog } from '@ztzf/apis'
import { useRoute } from 'vue-router'
@@ -312,6 +312,35 @@
    return AREA_TYPE_STYLE_MAP?.[String(areaType)] || DEFAULT_AREA_STYLE
}

function getBufferRadiusPoint(centerCartesian, radius) {
    const frame = Cesium.Transforms.eastNorthUpToFixedFrame(centerCartesian)
    const local = new Cesium.Cartesian3(radius, 0, 0)
    return Cesium.Matrix4.multiplyByPoint(frame, local, new Cesium.Cartesian3())
}

function addBufferRadiusLabel(dataSource, centerCartesian, radius) {
    dataSource.entities.add({
        name: 'scene-area-display',
        customData: { drawType: 'buffer', label: 'radius' },
        position: getBufferRadiusPoint(centerCartesian, radius),
        label: {
            text: formatBufferRadius(radius),
            font: '14px Source Han Sans CN',
            fillColor: Cesium.Color.WHITE,
            outlineColor: Cesium.Color.fromBytes(24, 48, 92, 255),
            outlineWidth: 2,
            style: Cesium.LabelStyle.FILL_AND_OUTLINE,
            showBackground: true,
            backgroundColor: Cesium.Color.fromBytes(8, 12, 22, 180),
            heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
            horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
            pixelOffset: new Cesium.Cartesian2(0, -12),
            disableDepthTestDistance: Number.POSITIVE_INFINITY,
        },
    })
}

function resolveControlPoints(meta, drawType) {
    if (!meta) return []
    if (Array.isArray(meta.controlPoints) && meta.controlPoints.length) {
@@ -412,6 +441,7 @@
                            material: style.outline,
                        },
                    })
                    addBufferRadiusLabel(dataSource, centerCartesian, radius)
                })
                return
            }
@@ -575,8 +605,6 @@
    initMap()
    await getAreaList()
    if (dialogMode.value === 'add') {
        console.log(111)

        mapRef.value?.zoomToAdminBoundary?.()
    } else {
        await loadDetail()

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

@@ -152,7 +152,7 @@
import { saveOperationLog } from '@ztzf/apis'
import { useRoute } from 'vue-router'
import { fwAreaDivideDetailApi, fwAreaDivideListApi } from '../partition/partitionApi'
import { buildEllipsePositions } from '@/utils/cesium/shapeTools'
import { buildEllipsePositions, formatBufferRadius } 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 '@ztzf/utils'
@@ -315,6 +315,35 @@
    return AREA_TYPE_STYLE_MAP?.[String(areaType)] || DEFAULT_AREA_STYLE
}

function getBufferRadiusPoint(centerCartesian, radius) {
    const frame = Cesium.Transforms.eastNorthUpToFixedFrame(centerCartesian)
    const local = new Cesium.Cartesian3(radius, 0, 0)
    return Cesium.Matrix4.multiplyByPoint(frame, local, new Cesium.Cartesian3())
}

function addBufferRadiusLabel(dataSource, centerCartesian, radius) {
    dataSource.entities.add({
        name: 'scene-manage-area-display',
        customData: { drawType: 'buffer', label: 'radius' },
        position: getBufferRadiusPoint(centerCartesian, radius),
        label: {
            text: formatBufferRadius(radius),
            font: '14px Source Han Sans CN',
            fillColor: Cesium.Color.WHITE,
            outlineColor: Cesium.Color.fromBytes(24, 48, 92, 255),
            outlineWidth: 2,
            style: Cesium.LabelStyle.FILL_AND_OUTLINE,
            showBackground: true,
            backgroundColor: Cesium.Color.fromBytes(8, 12, 22, 180),
            heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
            horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
            pixelOffset: new Cesium.Cartesian2(0, -12),
            disableDepthTestDistance: Number.POSITIVE_INFINITY,
        },
    })
}

function parseGeomJson(geomJson) {
    if (!geomJson) return null
    if (typeof geomJson === 'object') return geomJson
@@ -464,6 +493,7 @@
                            material: style.outline,
                        },
                    })
                    addBufferRadiusLabel(dataSource, centerCartesian, radius)
                })
                return
            }