Merge branch 'lbj' of http://124.70.32.114:3100/woka/cesium-map-object into mh

# Conflicts:
#	ruoyi-ui/src/views/cesiumMap/index.vue

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

@@ -148,7 +148,7 @@
       <div class="menu-item" @click="toggleColorPicker('borderColor')">
         <span class="menu-icon">🖌️</span>
         <span>边框色</span>
-        <span class="menu-preview" :style="{backgroundColor: entityData.color}"></span>
+        <span class="menu-preview" :style="{backgroundColor: entityData.borderColor || entityData.color}"></span>
       </div>
       <!-- 边框颜色选择器 -->
       <div class="color-picker-container" v-if="showColorPickerFor === 'borderColor'">
@@ -307,7 +307,7 @@ export default {
       ],
       presetWidths: [1, 2, 3, 4, 5, 6, 8, 10, 12],
       presetSizes: [6, 8, 10, 12, 14, 16, 18, 20, 24],
-      presetOpacities: [0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.0],
+      presetOpacities: [0.0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.0],
       presetFontSizes: [8, 10, 12, 14, 16, 18, 20, 24, 28, 32]
     }
   },

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

@@ -8,7 +8,7 @@
       </div>
       <div class="measurement-item" v-if="result.area">
         <span>面积：</span>
-        <strong>{{ result.area.toFixed(2) }} 平方米</strong>
+        <strong>{{ (result.area / 1000000).toFixed(2) }} 平方千米</strong>
       </div>
       <div class="measurement-item" v-if="result.radius">
         <span>半径：</span>

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

@@ -153,10 +153,10 @@ export default {
       defaultStyles: {
         point: { color: '#FF0000', size: 12 },
         line: { color: '#00FF00', width: 3 },
-        polygon: { color: '#0000FF', opacity: 0.5, width: 2 },
+        polygon: { color: '#0000FF', opacity: 0, width: 4 },
-        rectangle: { color: '#FFA500', opacity: 0.3, width: 2 },
+        rectangle: { color: '#FFA500', opacity: 0, width: 4 },
-        circle: { color: '#800080', opacity: 0.4, width: 2 },
+        circle: { color: '#800080', opacity: 0, width: 4 },
-        sector: { color: '#FF6347', opacity: 0.5, width: 2 },
+        sector: { color: '#FF6347', opacity: 0, width: 3 },
         arrow: { color: '#FF0000', width: 6 },
         text: { color: '#000000', font: '48px Microsoft YaHei, PingFang SC, sans-serif', backgroundColor: 'rgba(255, 255, 255, 0.8)' },
         image: { width: 150, height: 150 }
@@ -197,60 +197,60 @@ export default {
   methods: {
     updateScaleFromConfig(config) {
       if (!config || !this.viewer) return
-      
+
       const { scaleNumerator, scaleDenominator, unit } = config
       if (!scaleDenominator || scaleDenominator <= 0) return
-      
+
       let displayValue = ''
       let metersPerPixel = 0
-      
+
       const standardDPI = 96
       const pixelsPerCm = standardDPI * 0.393701
-      
+
       const scaleFactor = scaleDenominator / scaleNumerator
-      
+
       switch (unit) {
         case 'm':
-          displayValue = `1:${scaleDenominator}`
+          displayValue = `${scaleDenominator}`
           metersPerPixel = scaleFactor / pixelsPerCm
           break
         case 'km':
-          displayValue = `1:${scaleDenominator}`
+          displayValue = `${scaleDenominator}`
           metersPerPixel = (scaleFactor * 1000) / pixelsPerCm
           break
         default:
-          displayValue = `1:${scaleDenominator}`
+          displayValue = `${scaleDenominator}`
           metersPerPixel = scaleFactor / pixelsPerCm
       }
-      
+
       console.log('比例尺设置:', displayValue, '每像素米数:', metersPerPixel.toFixed(4))
-      
+
       this.isApplyingScale = true
       this.useCustomScale = true
       this.customScaleText = displayValue
       this.currentScaleUnit = unit
-      
+
       this.applyScaleToCamera(metersPerPixel)
       this.updateScaleBar()
       this.$forceUpdate()
-      
+
       setTimeout(() => {
         this.isApplyingScale = false
       }, 1000)
     },
-    
+
     applyScaleToCamera(metersPerPixel) {
       if (!this.viewer || !this.viewer.camera) return
-      
+
       const canvas = this.viewer.scene.canvas
       const width = canvas.clientWidth
       const height = canvas.clientHeight
-      
+
       if (width <= 0 || height <= 0) return
-      
+
       const camera = this.viewer.camera
       const scene = this.viewer.scene
-      
+
       if (scene.mode === Cesium.SceneMode.SCENE2D) {
         const frustumWidth = width * metersPerPixel
         camera.frustum.right = frustumWidth / 2
@@ -261,19 +261,19 @@ export default {
       } else {
         const cameraPosition = camera.positionCartographic
         const groundWidth = width * metersPerPixel
-        
+
         const fov = camera.frustum.fov || Cesium.Math.PI_OVER_THREE
         const aspectRatio = width / height
         const verticalFov = fov / aspectRatio
-        
+
         const targetHeight = (groundWidth / 2) / Math.tan(fov / 2)
-        
+
         const destination = Cesium.Cartesian3.fromRadians(
           cameraPosition.longitude,
           cameraPosition.latitude,
           targetHeight
         )
-        
+
         camera.flyTo({
           destination: destination,
           duration: 0.5,
@@ -948,36 +948,21 @@ export default {
           }
           // 如果是线实体，显示长度信息
           if (entityData && entityData.type === 'line') {
-            // 找到鼠标悬停在线段的哪一段
+            const length = this.calculateLineLength(entityData.positions)
-            const segmentIndex = this.findClosestSegment(entityData.positions, movement.endPosition);
+            // 根据当前方位角类型计算方位角
-            if (segmentIndex !== -1) {
+            const bearingType = entityData.bearingType || 'true';
-              // 计算累计长度（前segmentIndex+1段的长度）
+            const bearing = bearingType === 'magnetic'
-              let cumulativeLength = 0;
+              ? this.calculateMagneticBearing(entityData.positions)
-              for (let i = 0; i < segmentIndex + 1; i++) {
+              : this.calculateTrueBearing(entityData.positions);
-                if (i < entityData.positions.length - 1) {
+            // 显示小框提示
-                  cumulativeLength += Cesium.Cartesian3.distance(entityData.positions[i], entityData.positions[i + 1]);
+            this.hoverTooltip = {
-                }
+              visible: true,
+              content: `${(length / 1000).toFixed(1)}km ，${bearingType === 'magnetic' ? '磁' : '真'}：${bearing.toFixed(1)}°`,
+              position: {
+                x: movement.endPosition.x + 10,
+                y: movement.endPosition.y - 10
               }
-              // 计算当前段的方位角
+            };
-              const currentSegmentPositions = [entityData.positions[segmentIndex], entityData.positions[segmentIndex + 1]];
-              // 根据当前方位角类型计算方位角
-              const bearingType = entityData.bearingType || 'true';
-              const bearing = bearingType === 'magnetic'
-                ? this.calculateMagneticBearing(currentSegmentPositions)
-                : this.calculateTrueBearing(currentSegmentPositions);
-              // 显示小框提示
-              this.hoverTooltip = {
-                visible: true,
-                content: `累计长度：${cumulativeLength.toFixed(2)} 米\n${bearingType === 'magnetic' ? '磁方位' : '真方位'}：${bearing.toFixed(2)}°`,
-                position: {
-                  x: movement.endPosition.x + 10,
-                  y: movement.endPosition.y - 10
-                }
-              };
-            } else {
-              // 如果没有找到对应的段，隐藏信息
-              this.hoverTooltip.visible = false;
-            }
           } else {
             // 如果不是线实体，隐藏信息
             this.hoverTooltip.visible = false;
@@ -1416,8 +1401,8 @@ export default {
                   }
                   return new Cesium.PolygonHierarchy(this.drawingPoints);
                 }, false),
-                // 使用半透明颜色，方便看到地图底图
+                // 不填充颜色
-                material: Cesium.Color.fromCssColorString(this.defaultStyles.polygon.color).withAlpha(0.5),
+                material: Cesium.Color.TRANSPARENT,
                 // 确保贴地
                 perPositionHeight: false
               },
@@ -1431,12 +1416,9 @@ export default {
                   }
                   return this.drawingPoints;
                 }, false),
-                width: this.defaultStyles.line.width,
+                width: this.defaultStyles.polygon.width,
-                // 边框使用虚线，表示正在编辑中
+                // 边框使用实线，表示正在编辑中
-                material: new Cesium.PolylineDashMaterialProperty({
+                material: Cesium.Color.fromCssColorString(this.defaultStyles.polygon.color),
-                  color: Cesium.Color.fromCssColorString(this.defaultStyles.line.color),
-                  dashLength: 16
-                }),
                 clampToGround: true
               }
             });
@@ -1495,6 +1477,7 @@ export default {
             this.activeCursorPosition = position; // 初始化鼠标位置
             // 创建动态预览矩形
             this.tempEntity = this.viewer.entities.add({
+              // 填充部分
               rectangle: {
                 // 关键：使用 CallbackProperty 动态计算矩形范围
                 coordinates: new Cesium.CallbackProperty(() => {
@@ -1504,11 +1487,35 @@ export default {
                   }
                   return Cesium.Rectangle.fromDegrees(0, 0, 0, 0);
                 }, false),
-                // 样式：半透明填充 + 边框
+                // 设置填充颜色
-                material: Cesium.Color.fromCssColorString(this.defaultStyles.polygon.color).withAlpha(0.5),
+                material: Cesium.Color.fromCssColorString(this.defaultStyles.rectangle.color).withAlpha(this.defaultStyles.rectangle.opacity),
-                outline: true,
+                clampToGround: true // 贴地
-                outlineColor: Cesium.Color.fromCssColorString(this.defaultStyles.line.color),
+              },
-                outlineWidth: 2,
+              // 边框部分
+              polyline: {
+                // 关键：使用 CallbackProperty 动态计算矩形边框线
+                positions: new Cesium.CallbackProperty(() => {
+                  if (this.drawingPoints.length > 0 && this.activeCursorPosition) {
+                    // 计算矩形的四个角点
+                    const rect = Cesium.Rectangle.fromCartesianArray([this.drawingPoints[0], this.activeCursorPosition]);
+                    const west = rect.west;
+                    const south = rect.south;
+                    const east = rect.east;
+                    const north = rect.north;
+
+                    // 创建四个角点的笛卡尔坐标
+                    const southwest = Cesium.Cartesian3.fromRadians(west, south);
+                    const southeast = Cesium.Cartesian3.fromRadians(east, south);
+                    const northeast = Cesium.Cartesian3.fromRadians(east, north);
+                    const northwest = Cesium.Cartesian3.fromRadians(west, north);
+
+                    // 返回闭合的边框线位置数组
+                    return [southwest, southeast, northeast, northwest, southwest];
+                  }
+                  return [];
+                }, false),
+                width: this.defaultStyles.rectangle.width,
+                material: Cesium.Color.fromCssColorString(this.defaultStyles.rectangle.color),
                 clampToGround: true // 贴地
               }
             });
@@ -1539,14 +1546,36 @@ export default {
       // 3. 创建最终显示的静态实体
       this.entityCounter++;
       const id = `rectangle_${this.entityCounter}`;
+
+      // 计算矩形的四个角点
+      const west = rect.west;
+      const south = rect.south;
+      const east = rect.east;
+      const north = rect.north;
+
+      // 创建四个角点的笛卡尔坐标
+      const southwest = Cesium.Cartesian3.fromRadians(west, south);
+      const southeast = Cesium.Cartesian3.fromRadians(east, south);
+      const northeast = Cesium.Cartesian3.fromRadians(east, north);
+      const northwest = Cesium.Cartesian3.fromRadians(west, north);
+
+      // 创建边框线的位置数组（闭合）
+      const borderPositions = [southwest, southeast, northeast, northwest, southwest];
+
+      // 创建一个复合实体，包含填充和边框
       const finalEntity = this.viewer.entities.add({
         id: id,
+        // 填充部分
         rectangle: {
           coordinates: rect,
-          material: Cesium.Color.fromCssColorString(this.defaultStyles.polygon.color).withAlpha(this.defaultStyles.polygon.opacity),
+          material: Cesium.Color.fromCssColorString(this.defaultStyles.rectangle.color).withAlpha(this.defaultStyles.rectangle.opacity),
-          outline: true,
+          clampToGround: true
-          outlineColor: Cesium.Color.fromCssColorString(this.defaultStyles.polygon.color),
+        },
-          outlineWidth: this.defaultStyles.polygon.width,
+        // 边框部分
+        polyline: {
+          positions: borderPositions,
+          width: this.defaultStyles.rectangle.width,
+          material: Cesium.Color.fromCssColorString(this.defaultStyles.rectangle.color),
           clampToGround: true
         }
       });
@@ -1557,9 +1586,10 @@ export default {
         points: this.drawingPoints.map(p => this.cartesianToLatLng(p)),
         positions: this.drawingPoints,
         entity: finalEntity,
-        color: this.defaultStyles.polygon.color,
+        color: this.defaultStyles.rectangle.color, // 填充颜色
-        opacity: this.defaultStyles.polygon.opacity,
+        borderColor: this.defaultStyles.rectangle.color, // 边框颜色
-        width: this.defaultStyles.polygon.width,
+        opacity: this.defaultStyles.rectangle.opacity,
+        width: this.defaultStyles.rectangle.width,
         label: `矩形 ${this.entityCounter}`
       };
       this.allEntities.push(entityData);
@@ -1691,12 +1721,33 @@ export default {
                         return initialRadius;
                       }
                     }, false),
-                    // 样式设置
+                    // 设置填充颜色
-                    material: Cesium.Color.fromCssColorString(this.defaultStyles.polygon.color).withAlpha(0.5),
+                    material: Cesium.Color.fromCssColorString(this.defaultStyles.circle.color).withAlpha(this.defaultStyles.circle.opacity),
-                    outline: true,
+                    // 移除 outline 属性，改用 polyline 绘制边框
-                    outlineColor: Cesium.Color.fromCssColorString(this.defaultStyles.line.color),
+                    clampToGround: true
-                    outlineWidth: 2,
+                  },
-                    // height: 0, // 如果需要贴地可开启或使用 heightReference
+                  // 边框部分
+                  polyline: {
+                    // 关键：使用 CallbackProperty 动态计算圆形边框线
+                    positions: new Cesium.CallbackProperty(() => {
+                      try {
+                        if (this.activeCursorPosition && this.drawingPoints.length > 0 && this.drawingPoints[0]) {
+                          const center = this.drawingPoints[0];
+                          const edge = this.activeCursorPosition;
+                          if (center && edge && typeof center.x === 'number' && typeof edge.x === 'number') {
+                            const radius = Cesium.Cartesian3.distance(center, edge);
+                            const validRadius = isFinite(radius) && radius > 0 ? radius : initialRadius;
+                            return this.generateCirclePositions(center, validRadius);
+                          }
+                        }
+                        return [];
+                      } catch (e) {
+                        return [];
+                      }
+                    }, false),
+                    width: this.defaultStyles.circle.width,
+                    material: Cesium.Color.fromCssColorString(this.defaultStyles.circle.color),
+                    clampToGround: true
                   }
                 });
               }
@@ -1735,16 +1786,28 @@ export default {
       // 3. 创建最终显示的静态实体
       this.entityCounter++;
       const id = `circle_${this.entityCounter}`;
+
+      // 生成圆形的点，用于绘制边框线
+      const circlePositions = this.generateCirclePositions(centerPoint, radius);
+
+      // 创建一个复合实体，包含填充和边框
       const finalEntity = this.viewer.entities.add({
         id: id,
         position: centerPoint,
+        // 填充部分
         ellipse: {
           semiMajorAxis: radius,
           semiMinorAxis: radius,
-          material: Cesium.Color.fromCssColorString(this.defaultStyles.polygon.color).withAlpha(this.defaultStyles.polygon.opacity),
+          // 设置填充颜色
-          outline: true,
+          material: Cesium.Color.fromCssColorString(this.defaultStyles.circle.color).withAlpha(this.defaultStyles.circle.opacity),
-          outlineColor: Cesium.Color.fromCssColorString(this.defaultStyles.polygon.color),
+          clampToGround: true
-          outlineWidth: this.defaultStyles.polygon.width
+        },
+        // 边框部分
+        polyline: {
+          positions: circlePositions,
+          width: this.defaultStyles.circle.width,
+          material: Cesium.Color.fromCssColorString(this.defaultStyles.circle.color),
+          clampToGround: true
         }
       });
       // 4. 记录实体
@@ -1754,9 +1817,10 @@ export default {
         points: [centerPoint, edgePosition].map(p => this.cartesianToLatLng(p)),
         positions: [centerPoint, edgePosition],
         entity: finalEntity,
-        color: this.defaultStyles.polygon.color,
+        color: this.defaultStyles.circle.color, // 填充颜色
-        opacity: this.defaultStyles.polygon.opacity,
+        borderColor: this.defaultStyles.circle.color, // 边框颜色
-        width: this.defaultStyles.polygon.width,
+        opacity: this.defaultStyles.circle.opacity,
+        width: this.defaultStyles.circle.width,
         radius: radius,
         label: `圆形 ${this.entityCounter}`
       };
@@ -1829,6 +1893,7 @@ export default {
             }
             // 创建动态预览扇形
             this.tempEntity = this.viewer.entities.add({
+              // 填充部分
               polygon: {
                 hierarchy: new Cesium.CallbackProperty(() => {
                   if (this.drawingPoints.length > 1 && this.activeCursorPosition) {
@@ -1844,10 +1909,29 @@ export default {
                   }
                   return new Cesium.PolygonHierarchy([]);
                 }, false),
-                material: Cesium.Color.fromCssColorString(this.defaultStyles.sector.color).withAlpha(0.5),
+                // 设置填充颜色
-                outline: true,
+                material: Cesium.Color.fromCssColorString(this.defaultStyles.sector.color).withAlpha(this.defaultStyles.sector.opacity),
-                outlineColor: Cesium.Color.fromCssColorString(this.defaultStyles.sector.color),
+                clampToGround: true
-                outlineWidth: this.defaultStyles.sector.width
+              },
+              // 边框部分
+              polyline: {
+                positions: new Cesium.CallbackProperty(() => {
+                  if (this.drawingPoints.length > 1 && this.activeCursorPosition) {
+                    const centerPoint = this.drawingPoints[0];
+                    const radiusPoint = this.drawingPoints[1];
+                    if (!isFinite(fixedRadius) || fixedRadius === 0) {
+                      return [];
+                    }
+                    const startAngle = this.calculatePointAngle(centerPoint, radiusPoint);
+                    const endAngle = this.calculatePointAngle(centerPoint, this.activeCursorPosition);
+                    const positions = this.generateSectorPositions(centerPoint, fixedRadius, startAngle, endAngle);
+                    return positions;
+                  }
+                  return [];
+                }, false),
+                width: this.defaultStyles.sector.width,
+                material: Cesium.Color.fromCssColorString(this.defaultStyles.sector.color),
+                clampToGround: true
               }
             });
           }
@@ -1881,13 +1965,19 @@ export default {
       const finalEntity = this.viewer.entities.add({
         id: 'sector-' + new Date().getTime(),
         name: `扇形 ${this.entityCounter}`,
+        // 填充部分
         polygon: {
           hierarchy: new Cesium.PolygonHierarchy(positions),
-          material: Cesium.Color.fromCssColorString(this.defaultStyles.sector.color).withAlpha(0.5),
+          // 设置填充颜色
-          outline: true,
+          material: Cesium.Color.fromCssColorString(this.defaultStyles.sector.color).withAlpha(this.defaultStyles.sector.opacity),
-          outlineColor: Cesium.Color.fromCssColorString(this.defaultStyles.sector.color),
+          clampToGround: true
-          outlineWidth: this.defaultStyles.sector.width,
+        },
-          perPositionHeight: false
+        // 边框部分
+        polyline: {
+          positions: positions,
+          width: this.defaultStyles.sector.width,
+          material: Cesium.Color.fromCssColorString(this.defaultStyles.sector.color),
+          clampToGround: true
         }
       });
       // 4. 记录实体
@@ -1901,7 +1991,8 @@ export default {
         endAngle: endAngle,
         positions: positions,
         entity: finalEntity,
-        color: this.defaultStyles.sector.color,
+        color: this.defaultStyles.sector.color, // 填充颜色
+        borderColor: this.defaultStyles.sector.color, // 边框颜色
         opacity: 0.5,
         width: this.defaultStyles.sector.width,
         label: `扇形 ${this.entityCounter}`
@@ -1910,6 +2001,35 @@ export default {
       // 5. 重置状态，保持绘制状态以继续绘制
       this.drawingPoints = [];
     },
+    // 生成圆形的点，用于绘制边框线
+    generateCirclePositions(center, radius, numPoints = 128) {
+      const positions = [];
+      const ellipsoid = this.viewer.scene.globe.ellipsoid;
+
+      // 计算圆心的经纬度
+      const centerCartographic = Cesium.Cartographic.fromCartesian(center);
+      const centerLatitude = centerCartographic.latitude;
+      const centerLongitude = centerCartographic.longitude;
+
+      // 生成圆形的点
+      for (let i = 0; i <= numPoints; i++) {
+        const angle = (i / numPoints) * Math.PI * 2;
+
+        // 计算点的经纬度
+        // 注意：这里使用简单的方法计算，实际应该考虑地球曲率
+        const deltaLatitude = (radius / ellipsoid.maximumRadius) * Math.sin(angle);
+        const deltaLongitude = (radius / ellipsoid.maximumRadius) * Math.cos(angle) / Math.cos(centerLatitude);
+
+        const latitude = centerLatitude + deltaLatitude;
+        const longitude = centerLongitude + deltaLongitude;
+
+        // 转换为笛卡尔坐标
+        const position = Cesium.Cartesian3.fromRadians(longitude, latitude);
+        positions.push(position);
+      }
+
+      return positions;
+    },
     // 计算角度
     calculateAngle(center, start, end) {
       const startLL = Cesium.Cartographic.fromCartesian(start);
@@ -1959,7 +2079,7 @@ export default {
       // 确保角度差不为零
       angleDiff = Math.max(0.01, angleDiff);
       // 计算扇形的顶点数（根据角度差确定，确保平滑）
-      const numPoints = Math.max(5, Math.ceil(angleDiff * 180 / Math.PI / 10));
+      const numPoints = Math.max(10, Math.ceil(angleDiff * 180 / Math.PI / 5));
       const angleStep = angleDiff / (numPoints - 1);
       // 生成扇形的顶点（顺时针方向）
       for (let i = 0; i < numPoints; i++) {
@@ -2384,16 +2504,23 @@ export default {
       const id = `polygon_${this.entityCounter}`
       // 闭合多边形
       const polygonPositions = [...positions, positions[0]]
+      // 创建一个复合实体，包含填充和边框
       const entity = this.viewer.entities.add({
         id: id,
         name: `面 ${this.entityCounter}`,
+        // 填充部分
         polygon: {
           hierarchy: new Cesium.PolygonHierarchy(polygonPositions),
-          material: Cesium.Color.fromCssColorString(this.defaultStyles.polygon.color)
+          // 初始无填充
-            .withAlpha(this.defaultStyles.polygon.opacity),
+          material: Cesium.Color.TRANSPARENT,
-          outline: true,
+          clampToGround: true
-          outlineColor: Cesium.Color.fromCssColorString(this.defaultStyles.polygon.color),
+        },
-          outlineWidth: this.defaultStyles.polygon.width
+        // 边框部分
+        polyline: {
+          positions: polygonPositions,
+          width: this.defaultStyles.polygon.width,
+          material: Cesium.Color.fromCssColorString(this.defaultStyles.polygon.color),
+          clampToGround: true
         }
       })
       const entityData = {
@@ -2403,7 +2530,8 @@ export default {
         positions: polygonPositions,
         entity: entity,
         color: this.defaultStyles.polygon.color,
-        opacity: this.defaultStyles.polygon.opacity,
+        borderColor: this.defaultStyles.polygon.color,
+        opacity: 0,
         width: this.defaultStyles.polygon.width,
         label: `面 ${this.entityCounter}`
       }
@@ -2422,8 +2550,8 @@ export default {
         name: `矩形 ${this.entityCounter}`,
         rectangle: {
           coordinates: coordinates,
-          material: Cesium.Color.fromCssColorString(this.defaultStyles.rectangle.color)
+          // 移除填充颜色，只显示边框
-            .withAlpha(this.defaultStyles.rectangle.opacity),
+          material: Cesium.Color.TRANSPARENT,
           outline: true,
           outlineColor: Cesium.Color.fromCssColorString(this.defaultStyles.rectangle.color),
           outlineWidth: this.defaultStyles.rectangle.width
@@ -2446,8 +2574,8 @@ export default {
         ellipse: {
           semiMinorAxis: validRadius, // 半短轴 = 半径
           semiMajorAxis: validRadius, // 半长轴 = 半径
-          material: Cesium.Color.fromCssColorString(this.defaultStyles.circle.color)
+          // 移除填充颜色，只显示边框
-            .withAlpha(this.defaultStyles.circle.opacity),
+          material: Cesium.Color.TRANSPARENT,
           outline: true,
           outlineColor: Cesium.Color.fromCssColorString(this.defaultStyles.circle.color),
           outlineWidth: this.defaultStyles.circle.width
@@ -2469,6 +2597,13 @@ export default {
         lng: Cesium.Math.toDegrees(cartographic.longitude)
       }
     },
+    degreesToDMS(decimalDegrees) {
+      const degrees = Math.floor(decimalDegrees)
+      const minutesDecimal = (decimalDegrees - degrees) * 60
+      const minutes = Math.floor(minutesDecimal)
+      const seconds = ((minutesDecimal - minutes) * 60).toFixed(2)
+      return `${degrees}°${minutes}'${seconds}"`
+    },
     calculateRectangle(start, end) {
       const startLL = this.cartesianToLatLng(start)
       const endLL = this.cartesianToLatLng(end)
@@ -2640,29 +2775,37 @@ export default {
         case 'polygon':
           if (entity.polygon) {
             entity.polygon.material = Cesium.Color.fromCssColorString(data.color).withAlpha(data.opacity)
-            entity.polygon.outlineColor = Cesium.Color.fromCssColorString(data.color)
+          }
-            entity.polygon.outlineWidth = data.width
+          if (entity.polyline) {
+            entity.polyline.material = Cesium.Color.fromCssColorString(data.borderColor || data.color)
+            entity.polyline.width = data.width
           }
           break
         case 'rectangle':
           if (entity.rectangle) {
             entity.rectangle.material = Cesium.Color.fromCssColorString(data.color).withAlpha(data.opacity)
-            entity.rectangle.outlineColor = Cesium.Color.fromCssColorString(data.color)
+          }
-            entity.rectangle.outlineWidth = data.width
+          if (entity.polyline) {
+            entity.polyline.material = Cesium.Color.fromCssColorString(data.borderColor || data.color)
+            entity.polyline.width = data.width
           }
           break
         case 'circle':
           if (entity.ellipse) {
             entity.ellipse.material = Cesium.Color.fromCssColorString(data.color).withAlpha(data.opacity)
-            entity.ellipse.outlineColor = Cesium.Color.fromCssColorString(data.color)
+          }
-            entity.ellipse.outlineWidth = data.width
+          if (entity.polyline) {
+            entity.polyline.material = Cesium.Color.fromCssColorString(data.borderColor || data.color)
+            entity.polyline.width = data.width
           }
           break
         case 'sector':
           if (entity.polygon) {
             entity.polygon.material = Cesium.Color.fromCssColorString(data.color).withAlpha(data.opacity)
-            entity.polygon.outlineColor = Cesium.Color.fromCssColorString(data.color)
+          }
-            entity.polygon.outlineWidth = data.width
+          if (entity.polyline) {
+            entity.polyline.material = Cesium.Color.fromCssColorString(data.borderColor || data.color)
+            entity.polyline.width = data.width
           }
           break
         case 'arrow':
@@ -2713,6 +2856,10 @@ export default {
         const entityData = this.contextMenu.entityData
         // 更新实体数据
         entityData[property] = value
+        // 当修改填充色时，默认设置透明度为 20%
+        if (property === 'color' && (entityData.type === 'polygon' || entityData.type === 'rectangle' || entityData.type === 'circle' || entityData.type === 'sector')) {
+          entityData.opacity = 0.2
+        }
         // 更新实体样式
         this.updateEntityStyle(entityData)
         // 隐藏右键菜单
@@ -2750,49 +2897,102 @@ export default {
         }
       }
     },
-    clearAll() {
+    clearAll(showConfirm = true) {
-      // 1. 检查数组是否有内容
+      if (showConfirm) {
-      if (this.allEntities && this.allEntities.length > 0) {
+        this.$confirm('是否清除所有编辑内容？', '提示', {
-        // 2. 遍历每一个对象进行删除
+          confirmButtonText: '确定',
-        this.allEntities.forEach(item => {
+          cancelButtonText: '取消',
-          try {
+          type: 'warning'
-            // 情况 A: 数组里存的是原生的 Cesium Entity (点、线通常是这种情况)
+        }).then(() => {
-            if (item instanceof Cesium.Entity) {
+          this.executeClearAll();
-              this.viewer.entities.remove(item);
+        }).catch(() => {
-            }
+          // 用户点击取消，不做任何操作
-            // 情况 B: 数组里存的是包装对象 (你的矩形、圆可能是这种 { entity: ... })
+        });
-            else if (item.entity && item.entity instanceof Cesium.Entity) {
+      } else {
-              this.viewer.entities.remove(item.entity);
+        this.executeClearAll();
-            }
+      }
-            // 情况 C: 兜底方案，尝试通过 ID 删除
+    },
-            else if (item.id) {
+    executeClearAll() {
-              this.viewer.entities.removeById(item.id);
+        // 1. 检查数组是否有内容
-            }
+        if (this.allEntities && this.allEntities.length > 0) {
-            // 移除线实体相关的点实体
+          // 2. 遍历每一个对象进行删除
-            if (item.type === 'line' && item.pointEntities) {
+          this.allEntities.forEach(item => {
-              item.pointEntities.forEach(pointEntity => {
+            try {
-                this.viewer.entities.remove(pointEntity);
+              let entity = null;
-              });
+
+              // 情况 A: 数组里存的是原生的 Cesium Entity (点、线通常是这种情况)
+              if (item instanceof Cesium.Entity) {
+                entity = item;
+              }
+              // 情况 B: 数组里存的是包装对象 (你的矩形、圆可能是这种 { entity: ... })
+              else if (item.entity && item.entity instanceof Cesium.Entity) {
+                entity = item.entity;
+              }
+              // 情况 C: 兜底方案，尝试通过 ID 删除
+              else if (item.id) {
+                entity = this.viewer.entities.getById(item.id);
+              }
+
+              // 检查是否是航线实体，如果是则跳过删除
+              if (entity && entity.properties) {
+                const isMissionWaypoint = entity.properties.isMissionWaypoint;
+                const isMissionRouteLine = entity.properties.isMissionRouteLine;
+                if (isMissionWaypoint || isMissionRouteLine) {
+                  return; // 跳过航线相关实体
+                }
+              }
+
+              // 删除非航线实体
+              if (entity) {
+                this.viewer.entities.remove(entity);
+              }
+
+              // 移除线实体相关的点实体
+              if (item.type === 'line' && item.pointEntities) {
+                item.pointEntities.forEach(pointEntity => {
+                  this.viewer.entities.remove(pointEntity);
+                });
+              }
+            } catch (e) {
+              console.warn('删除实体失败:', e);
             }
-          } catch (e) {
+          });
-            console.warn('删除实体失败:', e);
+        }
+        // 3. 清空数组（只保留航线实体）
+        this.allEntities = this.allEntities.filter(item => {
+          let entity = null;
+          if (item instanceof Cesium.Entity) {
+            entity = item;
+          } else if (item.entity && item.entity instanceof Cesium.Entity) {
+            entity = item.entity;
+          } else if (item.id) {
+            entity = this.viewer.entities.getById(item.id);
+          }
+
+          if (entity && entity.properties) {
+            const isMissionWaypoint = entity.properties.isMissionWaypoint;
+            const isMissionRouteLine = entity.properties.isMissionRouteLine;
+            return isMissionWaypoint || isMissionRouteLine;
           }
+          return false;
+        });
+        // 4. 清理可能残留的绘制过程中的临时图形
+        if (this.tempEntity) {
+          this.viewer.entities.remove(this.tempEntity);
+          this.tempEntity = null;
+        }
+        if (this.tempPreviewEntity) {
+          this.viewer.entities.remove(this.tempPreviewEntity);
+          this.tempPreviewEntity = null;
+        }
+        // 5. 重置其他状态（如测量面板、绘制状态）
+        this.measurementResult = null;
+        this.stopDrawing();
+
+        this.$message({
+          type: 'success',
+          message: '清除成功!'
         });
-      }
-      // 3. 清空数组
-      this.allEntities = [];
-      // 4. 清理可能残留的绘制过程中的临时图形
-      if (this.tempEntity) {
-        this.viewer.entities.remove(this.tempEntity);
-        this.tempEntity = null;
-      }
-      if (this.tempPreviewEntity) {
-        this.viewer.entities.remove(this.tempPreviewEntity);
-        this.tempPreviewEntity = null;
-      }
-      // 5. 重置其他状态（如测量面板、绘制状态）
-      this.measurementResult = null;
-      this.stopDrawing();
     },
     // ================== 其他方法 ==================
     getTypeName(type) {
@@ -3012,7 +3212,7 @@ export default {
           },
           duration: 2
         })
-        this.$message.success(`已定位到经度 ${lng.toFixed(4)}，纬度 ${lat.toFixed(4)}`)
+        this.$message.success(`已定位到经度 ${this.degreesToDMS(lng)}，纬度 ${this.degreesToDMS(lat)}`)
       }
     },
 
@@ -3284,7 +3484,7 @@ export default {
           const cartographic = Cesium.Cartographic.fromCartesian(cartesian)
           const longitude = Cesium.Math.toDegrees(cartographic.longitude)
           const latitude = Cesium.Math.toDegrees(cartographic.latitude)
-          this.coordinatesText = `经度: ${longitude.toFixed(6)}, 纬度: ${latitude.toFixed(6)}`
+          this.coordinatesText = `经度: ${this.degreesToDMS(longitude)}, 纬度: ${this.degreesToDMS(latitude)}`
         } else {
           this.coordinatesText = '经度: --, 纬度: --'
         }
@@ -3292,7 +3492,7 @@ export default {
     },
     destroyViewer() {
       this.stopDrawing()
-      this.clearAll()
+      this.clearAll(false)
 
       if (this.pointMovementHandler) {
         this.pointMovementHandler.destroy()

ruoyi-ui/src/views/childRoom/RightPanel.vue

@@ -375,13 +375,6 @@ export default {
         if (plan) {
           this.$emit('select-plan', plan)
         }
-        // 仅加载并显示当前新方案的航线
-        const planRoutes = this.routes.filter(r => r.scenarioId === planId)
-        planRoutes.forEach(route => {
-          if (!this.activeRouteIds.includes(route.id)) {
-            this.handleSelectRoute(route)
-          }
-        })
       }
     },
 

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

@@ -375,13 +375,13 @@ export default {
       showScaleDialog: false,
       currentScale: {
         scaleNumerator: 1,
-        scaleDenominator: 1000,
+        scaleDenominator: 20,
-        unit: 'm'
+        unit: 'km'
       },
       scaleConfig: {
         scaleNumerator: 1,
-        scaleDenominator: 1000,
+        scaleDenominator: 20,
-        unit: 'm'
+        unit: 'km'
       },
       showExternalParamsDialog: false,
       currentExternalParams: {},