修改范围圈实体的填充颜色 30km和50km分别填充不同颜色

packages/screen/src/views/3DSituationalAwarenessRefactor/components/LeftPanel/ForcePreset.vue

@@ -5,7 +5,7 @@
       <!-- 触发器 -->
       <div class="dropdown-trigger" @click="toggleDropdown">
         <span class="trigger-text"
-          >距离灾害点{{ forcePreset.searchRadius - 20 }}km范围内</span
+          >距离灾害点{{ forcePreset.searchRadius }}km范围内</span
         >
         <div class="trigger-icon" :class="{ 'is-open': isDropdownOpen }">
           <img
@@ -156,8 +156,8 @@ const isDropdownOpen = ref(false);
 // 距离选项
 const distanceOptions = [
   // { value: 10, label: "距离灾害点10km范围内" },
-  { value: 30, label: "距离灾害点10km范围内" },
-  { value: 50, label: "距离灾害点30km范围内" },
+  { value: 30, label: "距离灾害点30km范围内" },
+  { value: 50, label: "距离灾害点50km范围内" },
 ];
 
 /**

packages/screen/src/views/3DSituationalAwarenessRefactor/composables/useRangeCircle.js

@@ -59,28 +59,47 @@ export function useRangeCircle() {
     Cesium.Cartesian3.multiplyByScalar(offsetDirection, - radiusMeters * 0.2, offsetDirection) // 向下偏移 20%
     Cesium.Cartesian3.add(labelPositionCartesian, offsetDirection, labelPositionCartesian)
 
+    let fillColor
+    let fillAlpha
+    let outlineColor
+    if (radiusKm === 30) {
+      fillColor = '#3E9EF0' // 蓝色，30km范围圈
+      fillAlpha = 0.4
+      outlineColor = '#49CDD2'
+    } else if (radiusKm === 50) {
+      fillColor = '#10FF67' // 绿色，50km范围圈
+      fillAlpha = 0.2
+      outlineColor = '#51BCAF'
+    } else {
+      fillColor = style.fillColor // 默认颜色
+      fillAlpha = style.fillAlpha
+      outlineColor = style.outlineColor
+    }
+
     // 创建范围圈实体并添加到数组
     const circleEntity = viewer.entities.add({
       position: centerCartesian,
       ellipse: {
         semiMinorAxis: radiusMeters,
         semiMajorAxis: radiusMeters,
-        material: Cesium.Color.fromCssColorString(style.fillColor).withAlpha(style.fillAlpha),
+        material: Cesium.Color.fromCssColorString(fillColor).withAlpha(fillAlpha),
         outline: true,
-        outlineColor: Cesium.Color.fromCssColorString(style.outlineColor).withAlpha(style.outlineAlpha),
-        outlineWidth: style.outlineWidth,
+        outlineColor: Cesium.Color.fromCssColorString(outlineColor),
+        outlineWidth: 1,
+        // height: 1, 
         heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
       },
       allowPicking: false
     })
     rangeCircleEntities.value.push(circleEntity)
 
+
     // 创建半径线实体并添加到数组
     const lineEntity = viewer.entities.add({
       polyline: {
         positions: [centerCartesian, radiusEndCartesian],
         width: 2,
-        material: Cesium.Color.fromCssColorString(style.outlineColor).withAlpha(0.8),
+        material: Cesium.Color.fromCssColorString(outlineColor),
       },
       allowPicking: false
     })
@@ -90,7 +109,7 @@ export function useRangeCircle() {
     const currentLabelEntity = viewer.entities.add({
       position: labelPositionCartesian,
       label: {
-        text: `${radiusKm - 20} km`,
+        text: `${radiusKm} km`,
         font: 'bold 16px sans-serif',
         fillColor: Cesium.Color.WHITE,
         outlineColor: Cesium.Color.BLACK,

packages/screen/src/views/3DSituationalAwarenessRefactor/constants/coordinates.js

@@ -53,12 +53,11 @@ export const DEFAULT_CAMERA_VIEW = {
 export const DEFAULT_SEARCH_RADIUS = 10
 
 /**
- * 范围圈样式配置
+ * 范围圈样式默认配置
  */
 export const RANGE_CIRCLE_STYLE = {
   fillColor: '#1CA1FF',
   fillAlpha: 0.2,
   outlineColor: '#1CA1FF',
-  outlineAlpha: 0.8,
-  outlineWidth: 2,
+  outlineAlpha: 1,
 }