feat:缓冲圆半径显示处理

shuishen

2026-02-02 c987705058e8145e0b0773eb5ce1a69e1f7aa65a

 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()