1.修复有地形情况下，绘制多边形边缘线无法贴地的情况；2.修改水源地（面）显示水面动态纹理；

src/components/CesiumMap/FeatureGroundPrimitive.js

@@ -0,0 +1,16 @@
+import * as Cesium from "cesium";
+
+export default class FeatureGroundPrimitive extends Cesium.GroundPrimitive {
+
+  properties = new Cesium.PropertyBag()
+  constructor(options, properties) {
+    super(options);
+    if(properties && properties instanceof Object) {
+      for (const key in properties) {
+        if (Object.prototype.hasOwnProperty.call(properties, key)) {
+          this.properties.addProperty(key, properties[key]);
+        }
+      }
+    }
+  }
+}

src/components/CesiumMap/mixins/useDrawTool/drawAttackArrow.js

@@ -67,7 +67,7 @@ export const drawAttackArrow = (deps) => {
         const pts = createAttackArrowPositions(positions)
         return [...pts, pts[0]]
       }, false),
-      // clampToGround: true, // 多边形边界线通常不需要 clampToGround，因为多边形本身已经处理了高度
+      clampToGround: true,
       width: 2,
       material: CesiumColor.fromCssColorString('#ff0000'),
     },

src/components/CesiumMap/mixins/useDrawTool/drawCurvePolygon.js

@@ -62,7 +62,7 @@ export const drawCurvePolygon = (deps) => {
         }
         return createCurvePolygonPositions(positions)
       }, false),
-      // clampToGround: true, // 多边形边界线通常不需要 clampToGround，因为多边形本身已经处理了高度
+      clampToGround: true,
       width: 2,
       material: CesiumColor.fromCssColorString('#ff0000'),
     },

src/components/CesiumMap/mixins/useDrawTool/drawDoubleArrow.js

@@ -67,7 +67,7 @@ export const drawDoubleArrow = (deps) => {
         const pts = createDoubleArrowPositions(positions)
         return [...pts, pts[0]]
       }, false),
-      // clampToGround: true, // 多边形边界线通常不需要 clampToGround，因为多边形本身已经处理了高度
+      clampToGround: true,
       width: 2,
       material: CesiumColor.fromCssColorString('#ff0000'),
     },

src/components/CesiumMap/mixins/useDrawTool/drawPolygon.js

@@ -64,6 +64,7 @@ export const drawPolygon = (deps) => {
       // clampToGround: true, // 多边形边界线通常不需要 clampToGround，因为多边形本身已经处理了高度
       width: 2,
       material: CesiumColor.fromCssColorString('#ff0000'),
+      clampToGround: true,
     },
   })
 

src/components/CesiumMap/mixins/useDrawTool/drawStraightArrow.js

@@ -63,7 +63,7 @@ export const drawStraightArrow = (deps) => {
         const pts = createStraightArrowPositions(positions)
         return [...pts, pts[0]]
       }, false),
-      // clampToGround: true, // 多边形边界线通常不需要 clampToGround，因为多边形本身已经处理了高度
+      clampToGround: true,
       width: 2,
       material: CesiumColor.fromCssColorString('#ff0000'),
     },

src/components/CesiumMap/mixins/useDrawTool/drawWideArrow.js

@@ -64,7 +64,7 @@ export const drawWideArrow = (deps) => {
         return [...pts, pts[0]]
         // return [...pts]
       }, false),
-      // clampToGround: true, // 多边形边界线通常不需要 clampToGround，因为多边形本身已经处理了高度
+      clampToGround: true,
       width: 2,
       material: CesiumColor.fromCssColorString('#ff0000'),
     },

src/components/CesiumMap/mixins/useDrawTool/index.js

@@ -6,6 +6,7 @@ import {
   Entity,
   CallbackPositionProperty,
   Color as CesiumColor, 
+  HeightReference,
 } from 'cesium'
 import { useEventBus } from '../useEventBus'
 import { useHoverPosition } from '../useHoverPosition'
@@ -69,9 +70,8 @@ export const useDrawTool = (viewer) => {
       color: CesiumColor.BLUE,
       outlineColor: CesiumColor.WHITE,
       outlineWidth: 1,
+      heightReference: HeightReference.CLAMP_TO_GROUND,
     },
-    // 可以考虑是否需要 HeightReference.CLAMP_TO_GROUND
-    // heightReference: HeightReference.CLAMP_TO_GROUND,
   })
   viewer.entities.add(assistPoint)
 

src/views/systemTemplate/forestFire/Toolbar.vue

@@ -29,6 +29,7 @@ import {
 import { useEventBus } from '@/components/CesiumMap/mixins/useEventBus';
 import { useMeasureTool, getArea, getBoundingCenterCoordinate } from '@/components/CesiumMap/mixins/useMeasureTool';
 import { setPropertyData } from './DialogPropertyGrid/property';
+import FeatureGroundPrimitive from '@/components/CesiumMap/FeatureGroundPrimitive';
 
 import toolbarLocationIcon from '@/assets/icons/toolbar_location.png';
 import toolbarPolylineIcon from '@/assets/icons/toolbar_polyline.png';
@@ -59,6 +60,7 @@ let drawTool = null
 let measureTool = null
 let bus = null
 let toolbarLayer = null
+let primitiveList = []
 const isOpen = ref(false)
 const options = ref([{
   name: 'location',
@@ -128,7 +130,8 @@ const drawLocation = (params) => {
       position,
       billboard: {
         image: params?.icon || drawLocationIcon,
-        verticalOrigin: Cesium.VerticalOrigin.BOTTOM
+        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+        heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
       }
     });
   });
@@ -148,6 +151,7 @@ const drawPolyline = () => {
         positions,
         width: 2,
         material: Cesium.Color.YELLOW,
+        clampToGround: true,
       },
     })
   });
@@ -167,10 +171,12 @@ const drawPolygon = () => {
         positions:[...positions, positions[0]], // 闭合多边形
         width: 2,
         material: Cesium.Color.YELLOW,
+        clampToGround: true,
       },
       polygon: {
         hierarchy: positions,
         material: Cesium.Color.YELLOW.withAlpha(0.5),
+        heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
       },
     });
   });
@@ -193,10 +199,12 @@ const drawCurvePolygon = () => {
         positions: fullPositions,
         width: 2,
         material: Cesium.Color.YELLOW,
+        clampToGround: true,
       },
       polygon: {
         hierarchy: fullPositions,
         material: Cesium.Color.YELLOW.withAlpha(0.5),
+        heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
       },
     });
   });
@@ -219,10 +227,12 @@ const drawStraightArrow = () => {
         positions: [...fullPositions, fullPositions[0]],
         width: 2,
         material: Cesium.Color.YELLOW,
+        clampToGround: true,
       },
       polygon: {
         hierarchy: fullPositions,
         material: Cesium.Color.YELLOW.withAlpha(0.5),
+        heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
       },
     })
   });
@@ -245,10 +255,12 @@ const drawWideArrow = () => {
         positions: [...fullPositions, fullPositions[0]],
         width: 2,
         material: Cesium.Color.YELLOW,
+        clampToGround: true,
       },
       polygon: {
         hierarchy: fullPositions,
         material: Cesium.Color.YELLOW.withAlpha(0.5),
+        heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
       },
     })
   });
@@ -271,10 +283,12 @@ const drawAttackArrow = () => {
         positions: [...fullPositions, fullPositions[0]],
         width: 2,
         material: Cesium.Color.YELLOW,
+        clampToGround: true,
       },
       polygon: {
         hierarchy: fullPositions,
         material: Cesium.Color.YELLOW.withAlpha(0.5),
+        heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
       },
     })
   });
@@ -297,10 +311,12 @@ const drawDoubleArrow = () => {
         positions: [...fullPositions, fullPositions[0]],
         width: 2,
         material: Cesium.Color.YELLOW,
+        clampToGround: true,
       },
       polygon: {
         hierarchy: fullPositions,
         material: Cesium.Color.YELLOW.withAlpha(0.5),
+        heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
       },
     })
   });
@@ -342,31 +358,82 @@ const drawWatersource = () => {
   drawTool.drawPolygon().then((positions) => {
     // 计算中心点坐标
     const center = getBoundingCenterCoordinate(positions);
-    // 添加水源地实体
+
-    const entity = toolbarLayer?.entities.add({
+    // // 添加水源地实体
-      polyline: {
+    // const entity = toolbarLayer?.entities.add({
-        positions:[...positions, positions[0]], // 闭合多边形
+    //   // polyline: {
-        width: 2,
+    //   //   positions:[...positions, positions[0]], // 闭合多边形
-        material: Cesium.Color.BLUE,
+    //   //   width: 2,
-      },
+    //   //   material: Cesium.Color.BLUE,
-      polygon: {
+    //   // },
-        hierarchy: positions,
+    //   polygon: {
-        material: Cesium.Color.BLUE.withAlpha(0.5),
+    //     hierarchy: positions,
-      },
+    //     material: riverMaterial,
-      properties: {
+    //     // material: Cesium.Color.BLUE.withAlpha(0.5),
-        __type: 'watersource',
+    //   },
-        name: '',
+    //   properties: {
-        area: getArea(positions).toFixed(2), // 面积
+    //     __type: 'watersource',
-        longitude: center[0].toFixed(6),
+    //     name: '',
-        latitude: center[1].toFixed(6),
+    //     area: getArea(positions).toFixed(2), // 面积
-        volume: 0 // 储水量，默认0
+    //     longitude: center[0].toFixed(6),
+    //     latitude: center[1].toFixed(6),
+    //     volume: 0 // 储水量，默认0
+    //   }
+    // });
+
+    const waterMaterial = new Cesium.Material({
+      fabric: {
+        type: 'Water',
+        uniforms: {
+          normalMap: Cesium.buildModuleUrl('Assets/Textures/waterNormals.jpg'),
+          baseWaterColor: new Cesium.Color(
+            64 / 255.0,
+            157 / 255.0,
+            253 / 255.0,
+            0.6
+          ),
+          // blendColor: new Cesium.Color(0.0, 0.5, 1.0, 1.0),
+          // frequency: 10.0,
+          // animationSpeed: 0.05,
+          // amplitude: 10,
+          // specularIntensity: 0.5,
+          // alpha: 0.1
+          frequency: 1000.0,
+          animationSpeed: 0.1,
+          amplitude: 10,
+          specularIntensity: 1.5,
+        }
       }
     });
+
+    const waterPrimitive = new FeatureGroundPrimitive({
+      geometryInstances: new Cesium.GeometryInstance({
+        geometry: new Cesium.PolygonGeometry({
+            polygonHierarchy: new Cesium.PolygonHierarchy(positions),
+            vertexFormat: Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT,
+        })
+      }),
+      appearance: new Cesium.EllipsoidSurfaceAppearance({
+        material: waterMaterial,
+      })
+    }, {
+      __type: 'watersource',
+      name: '',
+      area: getArea(positions).toFixed(2), // 面积
+      longitude: center[0].toFixed(6),
+      latitude: center[1].toFixed(6),
+      volume: 0 // 储水量，默认0
+    });
+
+    // 将 Primitive 添加到场景中
+    viewer.scene.primitives.add(waterPrimitive);
+    primitiveList.push(waterPrimitive);
+
     // 编辑属性
-    DialogPropertyGrid.show(entity, (data) => {
+    DialogPropertyGrid.show(waterPrimitive, (data) => {
       // console.log('确定按钮被点击，最新表单数据:', formData);
       // 更新实体属性
-      setPropertyData(data, entity);
+      setPropertyData(data, waterPrimitive);
       // 调用接口
     });
   });
@@ -414,6 +481,14 @@ const toolbarClear = () => {
   
   // 清除所有绘制的实体
   toolbarLayer.entities.removeAll();
+  // 清除所有绘制的图元
+  for (let index = primitiveList.length - 1; index >= 0; index--) {
+    const p = primitiveList[index];
+    if(viewer.scene.primitives.contains(p)) {
+      viewer.scene.primitives.remove(p);
+      primitiveList.splice(index, 1);
+    }
+  }
   measureTool?.clear();
   
   // 清除当前测量

src/views/systemTemplate/forestFire/index.vue

@@ -14,6 +14,7 @@ import { useEventBus } from '@/components/CesiumMap/mixins/useEventBus';
 import Toolbar from './Toolbar.vue';
 import DialogPropertyGrid from './DialogPropertyGrid';
 import { setPropertyData } from './DialogPropertyGrid/property';
+import FeatureGroundPrimitive from '@/components/CesiumMap/FeatureGroundPrimitive';
 
 const viewerRef = shallowRef(null)
 const options = ref({
@@ -27,6 +28,7 @@ const options = ref({
     roll: 0 // 翻滚角
   },
   ditu: 'tianditu', // 底图选择
+  isTerrainProvider: true, // 启用地形
 })
 const showProperty = ref(false); // 控制属性面板的显示与隐藏
 const propertyData = ref([])
@@ -48,7 +50,7 @@ const initMap = (v) => {
       // 遍历拾取实体，获取第一个非辅助实体
       for (let index = 0; index < pickedObjectList.length; index++) {
         const obj = pickedObjectList[index];
-        if (Cesium.defined(obj) && obj.id && obj.id instanceof Cesium.Entity) {
+        if (obj && obj.id && obj.id instanceof Cesium.Entity) {
           // 辅助实体的name都以'__'开头，不识别
           if(obj.id.name?.indexOf('__') === 0) {
             continue
@@ -60,51 +62,18 @@ const initMap = (v) => {
             // 调用接口
           })
           return
+        } else if(obj.primitive && obj.primitive instanceof FeatureGroundPrimitive) {
+          DialogPropertyGrid.show(obj.primitive, (data) => {
+            // 更新实体属性
+            setPropertyData(data, obj.primitive);
+            // 调用接口
+          })
         }
       }
     }
   })
 };
 
-// 示例属性数据
-// propertyData.value = [
-//   { key: 'id', name: 'ID', value: '12345', type: 'text', disabled: true },
-//   { key: 'title', name: '标题', value: '这是一个标题', type: 'text', checkMethod: (val) => val.length > 0 || (ElMessage.error('标题不能为空'), false) },
-//   { key: 'fontSize', name: '字体大小', value: 16, type: 'number', checkMethod: (val) => val >= 12 && val <= 72 || (ElMessage.error('字体大小必须在12-72之间'), false) },
-//   {
-//     key: 'align',
-//     name: '对齐方式',
-//     value: 'left',
-//     type: 'select',
-//     options: [
-//       { label: '左对齐', value: 'left' },
-//       { label: '居中', value: 'center' },
-//       { label: '右对齐', value: 'right' },
-//     ],
-//     checkMethod: (val) => ['left', 'center', 'right'].includes(val) || (ElMessage.error('请选择有效的对齐方式'), false)
-//   },
-//   { key: 'color', name: '文字颜色', value: '#409EFF', type: 'color' },
-//   { key: 'visible', name: '是否可见', value: true, type: 'select', options: [{ label: '是', value: true }, { label: '否', value: false }] },
-//   { key: 'description', name: '描述', value: '这是一段描述文本。', type: 'text' },
-//   { key: 'padding', name: '内边距', value: 10, type: 'number', checkMethod: (val) => val >= 0 || (ElMessage.error('内边距不能为负数'), false) },
-// ];
-
-// 处理属性值变化的事件
-const handlePropertyChange = (key, newValue, property) => {
-  console.log(`属性 "${property.name}" (key: ${key}) 的值变更为:`, newValue);
-  // 在这里你可以根据需要处理值的变化，例如同步到后端或更新其他状态
-  // 因为组件内部已经更新了 internalData，如果父组件也需要响应式地使用这个数据，
-  // 并且不希望直接修改原始的 properties 数组，可以在这里根据 key 更新父组件的状态。
-  // 例如：
-  // const index = properties.value.findIndex(item => item.key === key);
-  // if (index !== -1) {
-  //   properties.value[index].value = newValue;
-  // }
-  // 注意：上面的直接修改 properties.value[index].value 是可以的，因为 properties 是 ref 包裹的数组。
-  // 但如果 properties 是 props 传递下来的，则不应该直接修改。
-  // 在这个示例中，properties 是父组件的 ref，所以直接修改是允许的。
-};
-
 </script>
 
 <style lang="scss" scoped>