空域名称

ruoyi-ui/src/views/cesiumMap/ContextMenu.vue

@@ -117,6 +117,11 @@
     <!-- 多边形特有选项 -->
     <div class="menu-section" v-if="entityData.type === 'polygon' || entityData.type === 'rectangle' || entityData.type === 'circle' || entityData.type === 'sector' || entityData.type === 'powerZone'">
       <div class="menu-title">填充属性</div>
+      <div class="menu-item" @click="editName" v-if="entityData.type === 'powerZone'">
+        <span class="menu-icon">📝</span>
+        <span>名称</span>
+        <span class="menu-value">{{ entityData.name || '' }}</span>
+      </div>
       <div class="menu-item" @click="toggleColorPicker('color')">
         <span class="menu-icon">🎨</span>
         <span>填充色</span>
@@ -367,6 +372,13 @@ export default {
       this.$emit('toggle-route-label')
     },
 
+    editName() {
+      const newName = prompt('请输入威力区名称：', this.entityData.name || '')
+      if (newName !== null && newName.trim() !== '') {
+        this.$emit('update-property', 'name', newName.trim())
+      }
+    },
+
     toggleColorPicker(property) {
       if (this.showColorPickerFor === property) {
         this.showColorPickerFor = null

ruoyi-ui/src/views/cesiumMap/index.vue

@@ -4101,6 +4101,9 @@ this.viewer.scene.postProcessStages.fxaa.enabled = true
             entity.polyline.material = Cesium.Color.fromCssColorString(data.borderColor || data.color)
             entity.polyline.width = data.width
           }
+          if (data.name && data.centerEntity && data.centerEntity.label) {
+            data.centerEntity.label.text = data.name
+          }
           break
         case 'sector':
           if (entity.polygon) {
@@ -5104,6 +5107,17 @@ this.viewer.scene.postProcessStages.fxaa.enabled = true
             outlineColor: Cesium.Color.WHITE,
             outlineWidth: 2,
             disableDepthTestDistance: Number.POSITIVE_INFINITY
+          },
+          label: {
+            text: '',
+            font: '14px Microsoft YaHei',
+            fillColor: Cesium.Color.WHITE,
+            outlineColor: Cesium.Color.BLACK,
+            outlineWidth: 2,
+            style: Cesium.LabelStyle.FILL_AND_OUTLINE,
+            verticalOrigin: Cesium.VerticalOrigin.TOP,
+            pixelOffset: new Cesium.Cartesian2(0, -20),
+            disableDepthTestDistance: Number.POSITIVE_INFINITY
           }
         });
 
@@ -5144,12 +5158,17 @@ this.viewer.scene.postProcessStages.fxaa.enabled = true
         centerEntity: this.powerZoneCenterEntity,
         center: this.powerZoneCenter,
         radius: radiusInMeters,
+        name: radiusData.name,
         color: '#FF0000',
         opacity: 0,
         borderColor: '#FF0000',
         width: 2
       });
 
+      if (this.powerZoneCenterEntity && this.powerZoneCenterEntity.label) {
+        this.powerZoneCenterEntity.label.text = radiusData.name;
+      }
+
       this.isDrawing = false;
       this.viewer.canvas.style.cursor = 'default';
 

ruoyi-ui/src/views/dialogs/RadiusDialog.vue

@@ -8,6 +8,14 @@
       
       <div class="dialog-body">
         <el-form :model="formData" :rules="rules" ref="formRef" label-width="80px" size="small">
+          <el-form-item label="名称" prop="name">
+            <el-input 
+              v-model="formData.name" 
+              placeholder="请输入威力区名称"
+              style="width: 100%;"
+            ></el-input>
+          </el-form-item>
+          
           <el-form-item label="半径" prop="radius">
             <el-input-number 
               v-model="formData.radius" 
@@ -47,10 +55,14 @@ export default {
   data() {
     return {
       formData: {
+        name: '',
         radius: 50,
         unit: 'km'
       },
       rules: {
+        name: [
+          { required: true, message: '请输入威力区名称', trigger: 'blur' }
+        ],
         radius: [
           { required: true, message: '请输入半径', trigger: 'blur' }
         ]
@@ -65,6 +77,7 @@ export default {
       this.$refs.formRef.validate((valid) => {
         if (valid) {
           this.$emit('confirm', {
+            name: this.formData.name,
             radius: this.formData.radius,
             unit: this.formData.unit
           })