feat:缓冲圆半径显示优化

shuishen

2026-02-02 bdb40c598aa43389d0717edd37de390373a6332c

feat:缓冲圆半径显示优化

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

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

export class DrawBufferCircleTool extends ToolBase {
    constructor(viewer) {
@@ -231,28 +236,18 @@
    }

    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())
        return getBufferRadiusPoint(this.centerCartesian, radius)
    }

    createRadiusLabelEntity(getRadius) {
        return this.dataSource.entities.add({
            position: new Cesium.CallbackProperty(() => this.getRadiusPoint(getRadius()), false),
            position: new Cesium.CallbackProperty(
                () => getBufferRadiusPoint(this.centerCartesian, getRadius()),
                false
            ),
            label: {
                ...getBufferRadiusLabelStyle(),
                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,
            },
        })
    }

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

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

const normalizePoints = points =>
    (points || []).map(point => ({
@@ -305,28 +311,18 @@
    }

    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())
        return getBufferRadiusPoint(this.centerCartesian, radius)
    }

    createRadiusLabelEntity(getRadius) {
        return this.dataSource.entities.add({
            position: new Cesium.CallbackProperty(() => this.getRadiusPoint(getRadius()), false),
            position: new Cesium.CallbackProperty(
                () => getBufferRadiusPoint(this.centerCartesian, getRadius()),
                false
            ),
            label: {
                ...getBufferRadiusLabelStyle(),
                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,
            },
        })
    }

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

@@ -9,6 +9,9 @@
    getMetersBetween,
    cartesianToLocal,
    formatBufferRadius,
    getBufferRadiusPoint,
    getBufferRadiusLabelStyle,
    addBufferRadiusLabelEntity,
} from './shapeUtils'
export { DrawPolygonTool } from './draw/DrawPolygonTool'
export { DrawRectangleTool } from './draw/DrawRectangleTool'

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

@@ -93,3 +93,41 @@
    if (meters >= 1000) return `${(meters / 1000).toFixed(2)} km`
    return `${meters.toFixed(2)} m`
}

export const getBufferRadiusPoint = (centerCartesian, radius) => {
    if (!centerCartesian || !Number.isFinite(radius)) return null
    const frame = Cesium.Transforms.eastNorthUpToFixedFrame(centerCartesian)
    const local = new Cesium.Cartesian3(radius, 0, 0)
    return Cesium.Matrix4.multiplyByPoint(frame, local, new Cesium.Cartesian3())
}

export const getBufferRadiusLabelStyle = () => ({
    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,
})

export const addBufferRadiusLabelEntity = (dataSource, centerCartesian, radius, options = {}) => {
    if (!dataSource) return null
    const position = getBufferRadiusPoint(centerCartesian, radius)
    if (!position) return null
    const { name, customData } = options
    return dataSource.entities.add({
        ...(name ? { name } : {}),
        ...(customData ? { customData } : {}),
        position,
        label: {
            ...getBufferRadiusLabelStyle(),
            text: formatBufferRadius(radius),
        },
    })
}

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

@@ -233,7 +233,12 @@
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, formatBufferRadius } from '@/utils/cesium/shapeTools'
import {
    DrawManager,
    EditManager,
    addBufferRadiusLabelEntity,
    buildEllipsePositions,
} from '@/utils/cesium/shapeTools'
import { cartesian3Convert } from '@/utils/cesium/mapUtil'
import {
    createDeviceRangePrimitive,
@@ -609,35 +614,6 @@
    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()
@@ -679,7 +655,10 @@
                            material: style.outline,
                        },
                    })
                    addBufferRadiusLabel(dataSource, centerCartesian, radius)
                    addBufferRadiusLabelEntity(dataSource, centerCartesian, radius, {
                        name: 'shape-display',
                        customData: { drawType: 'buffer', label: 'radius' },
                    })
                })
            }
            return

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

@@ -160,7 +160,10 @@
import CommonCesiumMap from '@/components/map-container/common-cesium-map.vue'
import * as Cesium from 'cesium'
import { fwAreaDivideDetailApi, fwAreaDivideListApi } from '../partition/partitionApi'
import { buildEllipsePositions, formatBufferRadius } from '@/utils/cesium/shapeTools'
import {
    addBufferRadiusLabelEntity,
    buildEllipsePositions,
} from '@/utils/cesium/shapeTools'
import { cartesian3Convert } from '@/utils/cesium/mapUtil'
import { saveOperationLog } from '@ztzf/apis'
import { useRoute } from 'vue-router'
@@ -312,35 +315,6 @@
    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) {
@@ -441,7 +415,10 @@
                            material: style.outline,
                        },
                    })
                    addBufferRadiusLabel(dataSource, centerCartesian, radius)
                    addBufferRadiusLabelEntity(dataSource, centerCartesian, radius, {
                        name: 'scene-area-display',
                        customData: { drawType: 'buffer', label: 'radius' },
                    })
                })
                return
            }

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

@@ -152,7 +152,10 @@
import { saveOperationLog } from '@ztzf/apis'
import { useRoute } from 'vue-router'
import { fwAreaDivideDetailApi, fwAreaDivideListApi } from '../partition/partitionApi'
import { buildEllipsePositions, formatBufferRadius } from '@/utils/cesium/shapeTools'
import {
    addBufferRadiusLabelEntity,
    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 '@ztzf/utils'
@@ -315,35 +318,6 @@
    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
@@ -493,7 +467,10 @@
                            material: style.outline,
                        },
                    })
                    addBufferRadiusLabel(dataSource, centerCartesian, radius)
                    addBufferRadiusLabelEntity(dataSource, centerCartesian, radius, {
                        name: 'scene-manage-area-display',
                        customData: { drawType: 'buffer', label: 'radius' },
                    })
                })
                return
            }