From c987705058e8145e0b0773eb5ce1a69e1f7aa65a Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Mon, 02 Feb 2026 10:40:46 +0800
Subject: [PATCH] feat:缓冲圆半径显示处理
---
applications/drone-command/src/utils/cesium/shapeTools/shapeUtils.js | 6 +
applications/drone-command/src/views/areaManage/partition/FormDiaLog.vue | 39 ++++++++-
applications/drone-command/src/views/areaManage/sceneManage/FormDiaLog.vue | 32 +++++++
applications/drone-command/src/utils/cesium/shapeTools/index.js | 1
applications/drone-command/src/utils/cesium/shapeTools/edit/EditBufferCircleTool.js | 33 ++++++++
applications/drone-command/src/views/areaManage/sceneConfig/FormDiaLog.vue | 34 +++++++
applications/drone-command/src/utils/cesium/shapeTools/draw/DrawBufferCircleTool.js | 42 ++++++++++
7 files changed, 177 insertions(+), 10 deletions(-)
diff --git a/applications/drone-command/src/utils/cesium/shapeTools/draw/DrawBufferCircleTool.js b/applications/drone-command/src/utils/cesium/shapeTools/draw/DrawBufferCircleTool.js
index 71e04c8..645e5c4 100644
--- a/applications/drone-command/src/utils/cesium/shapeTools/draw/DrawBufferCircleTool.js
+++ b/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
diff --git a/applications/drone-command/src/utils/cesium/shapeTools/edit/EditBufferCircleTool.js b/applications/drone-command/src/utils/cesium/shapeTools/edit/EditBufferCircleTool.js
index a12aaa3..cd55a7f 100644
--- a/applications/drone-command/src/utils/cesium/shapeTools/edit/EditBufferCircleTool.js
+++ b/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
}
}
diff --git a/applications/drone-command/src/utils/cesium/shapeTools/index.js b/applications/drone-command/src/utils/cesium/shapeTools/index.js
index 53fd3a5..0a0dd3c 100644
--- a/applications/drone-command/src/utils/cesium/shapeTools/index.js
+++ b/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'
diff --git a/applications/drone-command/src/utils/cesium/shapeTools/shapeUtils.js b/applications/drone-command/src/utils/cesium/shapeTools/shapeUtils.js
index e9d001f..86d13bd 100644
--- a/applications/drone-command/src/utils/cesium/shapeTools/shapeUtils.js
+++ b/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`
+}
diff --git a/applications/drone-command/src/views/areaManage/partition/FormDiaLog.vue b/applications/drone-command/src/views/areaManage/partition/FormDiaLog.vue
index 9f490c4..7a186c3 100644
--- a/applications/drone-command/src/views/areaManage/partition/FormDiaLog.vue
+++ b/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()
diff --git a/applications/drone-command/src/views/areaManage/sceneConfig/FormDiaLog.vue b/applications/drone-command/src/views/areaManage/sceneConfig/FormDiaLog.vue
index 464fac4..77923f6 100644
--- a/applications/drone-command/src/views/areaManage/sceneConfig/FormDiaLog.vue
+++ b/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()
diff --git a/applications/drone-command/src/views/areaManage/sceneManage/FormDiaLog.vue b/applications/drone-command/src/views/areaManage/sceneManage/FormDiaLog.vue
index 579e0f5..fa8449a 100644
--- a/applications/drone-command/src/views/areaManage/sceneManage/FormDiaLog.vue
+++ b/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
}
--
Gitblit v1.9.3