1.添加屏幕鼠标事件的模式（浏览、绘制），绘制操作属于绘制模式，点击地图要素显示属性属于浏览模式，防止两者事件冲突；

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

@@ -15,12 +15,12 @@ import { createAttackArrowPositions } from './draw/attackArrowGraphic'
  * @returns Promise 绘制完成的所有点坐标数组
  */
 export const drawAttackArrow = (deps) => {
-  const { viewer, bus, position, status, registerAbort, globalAbort } = deps
+  const { viewer, bus, ScreenMode, position, registerAbort, globalAbort } = deps
 
   // 如果在执行其它操作，则取消
   globalAbort()
 
-  status.value = 'Drawing'
+  bus.mode.value = ScreenMode.DRAW
   const featurePositions = []
 
   // 临时多边形实体 (包含填充和边界线)
@@ -79,11 +79,11 @@ export const drawAttackArrow = (deps) => {
     // 清理资源
     const dispose = () => {
       registerAbort(null) // 取消注册当前的 abort 回调
-      status.value = 'Default'
       viewer.entities.remove(tempPolygon)
       bus.offScreen(ScreenSpaceEventType.LEFT_CLICK, handleAddPoint)
       bus.offScreen(ScreenSpaceEventType.RIGHT_CLICK, handleCancelDraw)
       bus.offScreen(ScreenSpaceEventType.LEFT_DOUBLE_CLICK, handleEndDraw)
+      bus.mode.value = ScreenMode.VIEW
     }
 
     // 取消绘制

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

@@ -15,12 +15,12 @@ import { createCurvePolygonPositions } from './draw/curvePolygonGraphic'
  * @returns Promise 绘制完成的所有点坐标数组
  */
 export const drawCurvePolygon = (deps) => {
-  const { viewer, bus, position, status, registerAbort, globalAbort } = deps
+  const { viewer, bus, ScreenMode, position, registerAbort, globalAbort } = deps
 
   // 如果在执行其它操作，则取消
   globalAbort()
 
-  status.value = 'Drawing'
+  bus.mode.value = ScreenMode.DRAW
   const featurePositions = []
 
   // 临时多边形实体 (包含填充和边界线)
@@ -74,11 +74,11 @@ export const drawCurvePolygon = (deps) => {
     // 清理资源
     const dispose = () => {
       registerAbort(null) // 取消注册当前的 abort 回调
-      status.value = 'Default'
       viewer.entities.remove(tempPolygon)
       bus.offScreen(ScreenSpaceEventType.LEFT_CLICK, handleAddPoint)
       bus.offScreen(ScreenSpaceEventType.RIGHT_CLICK, handleCancelDraw)
       bus.offScreen(ScreenSpaceEventType.LEFT_DOUBLE_CLICK, handleEndDraw)
+      bus.mode.value = ScreenMode.VIEW
     }
 
     // 取消绘制

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

@@ -15,12 +15,12 @@ import { createDoubleArrowPositions } from './draw/doubleArrowGraphic'
  * @returns Promise 绘制完成的所有点坐标数组
  */
 export const drawDoubleArrow = (deps) => {
-  const { viewer, bus, position, status, registerAbort, globalAbort } = deps
+  const { viewer, bus, ScreenMode, position, registerAbort, globalAbort } = deps
 
   // 如果在执行其它操作，则取消
   globalAbort()
 
-  status.value = 'Drawing'
+  bus.mode.value = ScreenMode.DRAW
   const featurePositions = []
 
   // 临时多边形实体 (包含填充和边界线)
@@ -79,11 +79,11 @@ export const drawDoubleArrow = (deps) => {
     // 清理资源
     const dispose = () => {
       registerAbort(null) // 取消注册当前的 abort 回调
-      status.value = 'Default'
       viewer.entities.remove(tempPolygon)
       bus.offScreen(ScreenSpaceEventType.LEFT_CLICK, handleAddPoint)
       bus.offScreen(ScreenSpaceEventType.RIGHT_CLICK, handleCancelDraw)
       bus.offScreen(ScreenSpaceEventType.LEFT_DOUBLE_CLICK, handleEndDraw)
+      bus.mode.value = ScreenMode.VIEW
     }
 
     // 取消绘制

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

@@ -6,20 +6,20 @@ import { Cartesian3, ScreenSpaceEventType } from 'cesium'
  * @returns Promise 绘制完成的点坐标
  */
 export const drawPoint = (deps) => {
-  const { bus, position, status, registerAbort, globalAbort } = deps
+  const { bus, ScreenMode, position, registerAbort, globalAbort } = deps
 
   // 如果在执行其它操作，则取消
   globalAbort()
 
-  status.value = 'Drawing'
+  bus.mode.value = ScreenMode.DRAW
 
   return new Promise((resolve, reject) => {
     // 清理资源
     const dispose = () => {
       registerAbort(null) // 取消注册当前的 abort 回调
-      status.value = 'Default'
       bus.offScreen(ScreenSpaceEventType.LEFT_CLICK, handleDraw)
       bus.offScreen(ScreenSpaceEventType.RIGHT_CLICK, handleCancel)
+      bus.mode.value = ScreenMode.VIEW
     }
 
     // 取消绘制

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

@@ -14,12 +14,12 @@ import {
  * @returns Promise 绘制完成的所有点坐标数组
  */
 export const drawPolygon = (deps) => {
-  const { viewer, bus, position, status, registerAbort, globalAbort } = deps
+  const { viewer, bus, ScreenMode, position, registerAbort, globalAbort } = deps
 
   // 如果在执行其它操作，则取消
   globalAbort()
 
-  status.value = 'Drawing'
+  bus.mode.value = ScreenMode.DRAW
   const featurePositions = []
 
   // 临时多边形实体 (包含填充和边界线)
@@ -74,11 +74,11 @@ export const drawPolygon = (deps) => {
     // 清理资源
     const dispose = () => {
       registerAbort(null) // 取消注册当前的 abort 回调
-      status.value = 'Default'
       viewer.entities.remove(tempPolygon)
       bus.offScreen(ScreenSpaceEventType.LEFT_CLICK, handleAddPoint)
       bus.offScreen(ScreenSpaceEventType.RIGHT_CLICK, handleCancelDraw)
       bus.offScreen(ScreenSpaceEventType.LEFT_DOUBLE_CLICK, handleEndDraw)
+      bus.mode.value = ScreenMode.VIEW
     }
 
     // 取消绘制

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

@@ -12,12 +12,12 @@ import {
  * @returns Promise 绘制完成的所有点坐标数组
  */
 export const drawPolyline = (deps) => {
-  const { viewer, bus, position, status, registerAbort, globalAbort } = deps
+  const { viewer, bus, ScreenMode, position, registerAbort, globalAbort } = deps
 
   // 如果在执行其它操作，则取消
   globalAbort()
 
-  status.value = 'Drawing'
+  bus.mode.value = ScreenMode.DRAW
   const featurePositions = []
 
   // 临时折线实体
@@ -47,11 +47,11 @@ export const drawPolyline = (deps) => {
     // 清理资源
     const dispose = () => {
       registerAbort(null) // 取消注册当前的 abort 回调
-      status.value = 'Default'
       viewer.entities.remove(tempPolyline)
       bus.offScreen(ScreenSpaceEventType.LEFT_CLICK, handleAddPoint)
       bus.offScreen(ScreenSpaceEventType.RIGHT_CLICK, handleCancelDraw)
       bus.offScreen(ScreenSpaceEventType.LEFT_DOUBLE_CLICK, handleEndDraw)
+      bus.mode.value = ScreenMode.VIEW
     }
 
     // 取消绘制

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

@@ -15,12 +15,12 @@ import { createStraightArrowPositions } from './draw/straightArrowGraphic'
  * @returns Promise 绘制完成的所有点坐标数组
  */
 export const drawStraightArrow = (deps) => {
-  const { viewer, bus, position, status, registerAbort, globalAbort } = deps
+  const { viewer, bus, ScreenMode, position, registerAbort, globalAbort } = deps
 
   // 如果在执行其它操作，则取消
   globalAbort()
 
-  status.value = 'Drawing'
+  bus.mode.value = ScreenMode.DRAW
   const featurePositions = []
 
   // 临时多边形实体 (包含填充和边界线)
@@ -75,11 +75,11 @@ export const drawStraightArrow = (deps) => {
     // 清理资源
     const dispose = () => {
       registerAbort(null) // 取消注册当前的 abort 回调
-      status.value = 'Default'
       viewer.entities.remove(tempPolygon)
       bus.offScreen(ScreenSpaceEventType.LEFT_CLICK, handleAddPoint)
       bus.offScreen(ScreenSpaceEventType.RIGHT_CLICK, handleCancelDraw)
       bus.offScreen(ScreenSpaceEventType.LEFT_DOUBLE_CLICK, handleEndDraw)
+      bus.mode.value = ScreenMode.VIEW
     }
 
     // 取消绘制

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

@@ -15,12 +15,12 @@ import { createWideArrowPositions } from './draw/wideArrowGraphic'
  * @returns Promise 绘制完成的所有点坐标数组
  */
 export const drawWideArrow = (deps) => {
-  const { viewer, bus, position, status, registerAbort, globalAbort } = deps
+  const { viewer, bus, ScreenMode, position, registerAbort, globalAbort } = deps
 
   // 如果在执行其它操作，则取消
   globalAbort()
 
-  status.value = 'Drawing'
+  bus.mode.value = ScreenMode.DRAW
   const featurePositions = []
 
   // 临时多边形实体 (包含填充和边界线)
@@ -76,11 +76,11 @@ export const drawWideArrow = (deps) => {
     // 清理资源
     const dispose = () => {
       registerAbort(null) // 取消注册当前的 abort 回调
-      status.value = 'Default'
       viewer.entities.remove(tempPolygon)
       bus.offScreen(ScreenSpaceEventType.LEFT_CLICK, handleAddPoint)
       bus.offScreen(ScreenSpaceEventType.RIGHT_CLICK, handleCancelDraw)
       bus.offScreen(ScreenSpaceEventType.LEFT_DOUBLE_CLICK, handleEndDraw)
+      bus.mode.value = ScreenMode.VIEW
     }
 
     // 取消绘制

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

@@ -8,7 +8,7 @@ import {
   Color as CesiumColor, 
   HeightReference,
 } from 'cesium'
-import { useEventBus } from '../useEventBus'
+import { useEventBus, ScreenMode } from '../useEventBus'
 import { useHoverPosition } from '../useHoverPosition'
 
 // 导入拆分后的类型和绘制逻辑
@@ -39,13 +39,13 @@ export const useDrawTool = (viewer) => {
   const { isHover, position } = useHoverPosition(viewer)
   // 获取事件总线
   const bus = useEventBus(viewer)
-  const status = ref('Default')
+  // const status = ref('Default')
 
   // 判断辅助点是否显示
   watch(
-    () => [status.value, isHover.value],
+    () => [bus.mode.value, isHover.value],
     ([nowStatus, hover]) => {
-      if (hover && nowStatus === 'Drawing') {
+      if (hover && nowStatus === ScreenMode.DRAW) {
         assistPoint.show = true
       } else {
         assistPoint.show = false
@@ -92,8 +92,8 @@ export const useDrawTool = (viewer) => {
   const drawDependencies = {
     viewer,
     bus,
+    ScreenMode,
     position,
-    status,
     registerAbort,
     globalAbort: abort, // 将全局 abort 函数也传递进去，方便内部调用
   }
@@ -137,8 +137,6 @@ export const useDrawTool = (viewer) => {
     drawAttackArrow,
     drawDoubleArrow,
     abort,
-    // 如果需要，可以暴露 status
-    // status
   }
 }
 

src/components/CesiumMap/mixins/useEventBus.js

@@ -1,11 +1,18 @@
 import mitt from 'mitt'
-import { Viewer, ScreenSpaceEventHandler, ScreenSpaceEventType } from 'cesium'
+import { ref } from 'vue'
+import { ScreenSpaceEventHandler, ScreenSpaceEventType } from 'cesium'
 
 
 // 使用 Map 来缓存每个 viewer 对应的事件总线组件
 // Viewer 实例作为 Map 的键
 const viewerEventBusCache = new Map()
 
+// 屏幕鼠标事件模式
+export const ScreenMode = {
+  VIEW: 1000,
+  DRAW: 2000,
+}
+
 /**
  * 消息总线，接管全局屏幕空间事件，仅作用于单个 Viewer。
  * 调用该hook后，所有鼠标事件必须改为调用返回对象中的方法。
@@ -18,6 +25,7 @@ export const useEventBus = (viewer) => {
   let cache = viewerEventBusCache.get(viewer)
   if (!cache) {
     cache = {
+      mode: ref(ScreenMode.VIEW),
       // 创建一个 mitt 实例用于处理所有屏幕空间事件
       screenEmitter: mitt(),
       // 创建一个 mitt 实例用于处理自定义事件
@@ -35,19 +43,20 @@ export const useEventBus = (viewer) => {
 
   // 构建返回的 EventBus 对象
   const bus = {
-    // 移除 mode 属性的定义
+    mode: cache.mode,
-
     // onScreen 直接注册到 screenEmitter
-    // onScreen(event, handler) {
+    onScreen(event, handler, mode) {
-    //   screenEmitter.on(event, handler)
+      mode = mode || cache.mode.value
-    // },
+      cache.screenEmitter.on(mode + event, handler)
-    onScreen: cache.screenEmitter.on,
+    },
+    // onScreen: cache.screenEmitter.on,
 
     // offScreen 直接从 screenEmitter 移除
-    // offScreen(event, handler) {
+    offScreen(event, handler, mode) {
-    //   screenEmitter.off(event, handler)
+      mode = mode || cache.mode.value
-    // },
+      cache.screenEmitter.off(mode + event, handler)
-    offScreen: cache.screenEmitter.off,
+    },
+    // offScreen: cache.screenEmitter.off,
 
     // on 保持不变
     // on(event, handler) {
@@ -71,7 +80,7 @@ export const useEventBus = (viewer) => {
       } else if (Object.values(ScreenSpaceEventType).includes(event)) {
         // 触发屏幕空间事件 (触发所有监听器，无模式检查)
         // 屏幕空间事件通常只有一个参数
-        cache.screenEmitter.emit(event, args[0])
+        cache.screenEmitter.emit(cache.mode.value + event, args[0])
       } else {
         console.warn(`EventBus: 不符合规范的触发事件: ${event}`)
       }

src/components/CesiumMap/mixins/useHoverPosition.js

@@ -8,7 +8,7 @@ import {
 } from 'cesium'
 import { computed, ref, shallowRef } from 'vue'
 import { useElementHover } from '@vueuse/core'
-import { useEventBus } from './useEventBus'
+import { useEventBus, ScreenMode } from './useEventBus'
 
 // 使用 Map 来缓存每个 viewer 对应的位置缓存
 // Viewer 实例作为 Map 的键
@@ -25,7 +25,7 @@ export const useHoverPosition = (viewer) => {
     // const coordinate = shallowRef<Cartographic | null>(null)
     // 添加鼠标移动事件
     const bus = useEventBus(viewer)
-    bus.onScreen(ScreenSpaceEventType.MOUSE_MOVE, (param) => {
+    const hoverHandler = (param) => {
       screenPosition.value = param.endPosition.clone()
       position.value = viewer.scene.pickPosition(param.endPosition)
       bus.emit('hoverTest', {
@@ -33,7 +33,10 @@ export const useHoverPosition = (viewer) => {
         position: position.value,
       })
       // coordinate.value = Cartographic.fromCartesian(position.value)
-    })
+    }
+    // 每个模式都关联事件
+    bus.onScreen(ScreenSpaceEventType.MOUSE_MOVE, hoverHandler, ScreenMode.VIEW)
+    bus.onScreen(ScreenSpaceEventType.MOUSE_MOVE, hoverHandler, ScreenMode.DRAW)
     cache = {
       isHover,
       screenPosition,

src/components/CesiumMap/mixins/useWeatherParticle/fog.js

@@ -0,0 +1,74 @@
+/*
+ * @Descripttion: 雾粒子
+ * @Author: 笙痞
+ * @Date: 2023-01-04 18:11:32
+ * @LastEditors: 笙痞77
+ * @LastEditTime: 2023-05-19 09:56:16
+ */
+import * as Cesium from "cesium";
+class FogEffect {
+  constructor(viewer, options) {
+    if (!viewer) throw new Error("no viewer object!");
+    options = options || {};
+    this.visibility = Cesium.defaultValue(options.visibility, 0.1); // 能见度
+    this.color = Cesium.defaultValue(
+      options.color,
+      new Cesium.Color(0.8, 0.8, 0.8, 0.5)
+    );
+    this.viewer = viewer;
+    this.init();
+  }
+
+  init() {
+    this.fogStage = new Cesium.PostProcessStage({
+      name: "czm_fog",
+      fragmentShader: this.fog(),
+      uniforms: {
+        visibility: () => {
+          return this.visibility;
+        },
+        fogColor: () => {
+          return this.color;
+        },
+      },
+    });
+    this.viewer.scene.postProcessStages.add(this.fogStage);
+  }
+
+  destroy() {
+    if (!this.viewer || !this.fogStage) return;
+    this.viewer.scene.postProcessStages.remove(this.fogStage);
+    const isDestroyed = this.fogStage.isDestroyed();
+    // 先检查是否被销毁过，如果已经被销毁过再调用destroy会报错
+    if (!isDestroyed) {
+      this.fogStage.destroy();
+    }
+    delete this.visibility;
+    delete this.color;
+  }
+
+  show(visible) {
+    this.fogStage.enabled = visible;
+  }
+
+  fog() {
+    return "uniform sampler2D colorTexture;\n\
+       uniform sampler2D depthTexture;\n\
+       uniform float visibility;\n\
+       uniform vec4 fogColor;\n\
+       in vec2 v_textureCoordinates; \n\
+       out vec4 fragColor;\n\
+       void main(void) \n\
+       { \n\
+          vec4 origcolor = texture(colorTexture, v_textureCoordinates); \n\
+          float depth = czm_readDepth(depthTexture, v_textureCoordinates); \n\
+          vec4 depthcolor = texture(depthTexture, v_textureCoordinates); \n\
+          float f = visibility * (depthcolor.r - 0.3) / 0.2; \n\
+          if (f < 0.0) f = 0.0; \n\
+          else if (f > 1.0) f = 1.0; \n\
+          fragColor = mix(origcolor, fogColor, f); \n\
+       }\n";
+  }
+}
+
+export default FogEffect;

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

@@ -0,0 +1,54 @@
+import * as Cesium from "cesium";
+import RainEffect from "./rain";
+import SnowEffect from "./snow";
+import FogEffect from "./fog";
+
+export const useWeatherParticle = (viewer) => { 
+  const _viewer = viewer;
+  let weather = null
+  
+  const destroy = () => { 
+    if(weather) {
+      weather.destroy();
+      weather = null;
+    }
+  };
+
+  const rain = () => { 
+    destroy();
+
+    weather = new RainEffect(_viewer, {
+      tiltAngle: -0.2, //倾斜角度
+      rainSize: 1.0, // 雨大小
+      rainSpeed: 120.0, // 雨速
+    });
+    weather.show(true);
+  };
+
+  const snow = () => { 
+    destroy();
+
+    weather = new SnowEffect(_viewer, {
+      snowSize: 0.02, // ❄️大小，最好小于0.02
+      snowSpeed: 60.0, // 速度
+    });
+    weather.show(true);
+  };
+
+  const fog = () => { 
+    destroy();
+
+    weather = new FogEffect(_viewer, {
+      visibility: 0.2, // 能见度
+      color: new Cesium.Color(0.8, 0.8, 0.8, 0.3),
+    });
+    weather.show(true);
+  };
+
+  return {
+    rain,
+    snow,
+    fog,
+    destroy,
+  }
+};

src/components/CesiumMap/mixins/useWeatherParticle/rain.js

@@ -0,0 +1,86 @@
+/*
+ * @Descripttion: 雨粒子效果
+ * @Author: 笙痞
+ * @Date: 2023-01-04 15:01:03
+ * @LastEditors: 笙痞77
+ * @LastEditTime: 2023-05-19 09:54:15
+ */
+import * as Cesium from "cesium";
+
+class RainEffect {
+  constructor(viewer, options) {
+    if (!viewer) throw new Error("no viewer object!");
+    options = options || {};
+    //倾斜角度，负数向右，正数向左
+    this.tiltAngle = Cesium.defaultValue(options.tiltAngle, -0.6);
+    this.rainSize = Cesium.defaultValue(options.rainSize, 0.3);
+    this.rainSpeed = Cesium.defaultValue(options.rainSpeed, 60.0);
+    this.viewer = viewer;
+    this.init();
+  }
+
+  init() {
+    this.rainStage = new Cesium.PostProcessStage({
+      name: "czm_rain",
+      fragmentShader: this.rain(),
+      uniforms: {
+        tiltAngle: () => {
+          return this.tiltAngle;
+        },
+        rainSize: () => {
+          return this.rainSize;
+        },
+        rainSpeed: () => {
+          return this.rainSpeed;
+        },
+      },
+    });
+    this.viewer.scene.postProcessStages.add(this.rainStage);
+  }
+
+  destroy() {
+    if (!this.viewer || !this.rainStage) return;
+    this.viewer.scene.postProcessStages.remove(this.rainStage);
+    const isDestroyed = this.rainStage.isDestroyed();
+    // 先检查是否被销毁过，如果已经被销毁过再调用destroy会报错
+    if (!isDestroyed) {
+      this.rainStage.destroy();
+    }
+    delete this.tiltAngle;
+    delete this.rainSize;
+    delete this.rainSpeed;
+  }
+
+  show(visible) {
+    this.rainStage.enabled = visible;
+  }
+
+  rain() {
+    return "uniform sampler2D colorTexture;\n\
+              in vec2 v_textureCoordinates;\n\
+              uniform float tiltAngle;\n\
+              uniform float rainSize;\n\
+              uniform float rainSpeed;\n\
+              float hash(float x) {\n\
+                  return fract(sin(x * 133.3) * 13.13);\n\
+              }\n\
+              out vec4 fragColor;\n\
+              void main(void) {\n\
+                  float time = czm_frameNumber / rainSpeed;\n\
+                  vec2 resolution = czm_viewport.zw;\n\
+                  vec2 uv = (gl_FragCoord.xy * 2. - resolution.xy) / min(resolution.x, resolution.y);\n\
+                  vec3 c = vec3(.6, .7, .8);\n\
+                  float a = tiltAngle;\n\
+                  float si = sin(a), co = cos(a);\n\
+                  uv *= mat2(co, -si, si, co);\n\
+                  uv *= length(uv + vec2(0, 4.9)) * rainSize + 1.;\n\
+                  float v = 1. - sin(hash(floor(uv.x * 100.)) * 2.);\n\
+                  float b = clamp(abs(sin(20. * time * v + uv.y * (5. / (2. + v)))) - .95, 0., 1.) * 20.;\n\
+                  c *= v * b;\n\
+                  fragColor = mix(texture(colorTexture, v_textureCoordinates), vec4(c, 1), .5);\n\
+              }\n\
+              ";
+  }
+}
+
+export default RainEffect;

src/components/CesiumMap/mixins/useWeatherParticle/snow.js

@@ -0,0 +1,86 @@
+/*
+ * @Descripttion: 雪花粒子类
+ * @Author: 笙痞
+ * @Date: 2023-01-04 14:01:07
+ * @LastEditors: 笙痞77
+ * @LastEditTime: 2023-05-19 09:52:52
+ */
+
+import * as Cesium from "cesium";
+class SnowEffect {
+  constructor(viewer, options) {
+    if (!viewer) throw new Error("no viewer object!");
+    options = options || {};
+    this.snowSize = Cesium.defaultValue(options.snowSize, 0.02); // ❄️大小，最好小于0.02
+    this.snowSpeed = Cesium.defaultValue(options.snowSpeed, 60.0); // 速度
+    this.viewer = viewer;
+    this.init();
+  }
+
+  init() {
+    this.snowStage = new Cesium.PostProcessStage({
+      name: "czm_snow",
+      fragmentShader: this.snow(),
+      uniforms: {
+        snowSize: () => {
+          return this.snowSize;
+        },
+        snowSpeed: () => {
+          return this.snowSpeed;
+        },
+      },
+    });
+    this.viewer.scene.postProcessStages.add(this.snowStage);
+  }
+
+  destroy() {
+    if (!this.viewer || !this.snowStage) return;
+    this.viewer.scene.postProcessStages.remove(this.snowStage);
+    const isDestroyed = this.snowStage.isDestroyed();
+    // 先检查是否被销毁过，如果已经被销毁过再调用destroy会报错
+    if (!isDestroyed) {
+      this.snowStage.destroy();
+    }
+    delete this.snowSize;
+    delete this.snowSpeed;
+  }
+  show(visible) {
+    this.snowStage.enabled = visible;
+  }
+
+  snow() {
+    return "uniform sampler2D colorTexture;\n\
+          in vec2 v_textureCoordinates;\n\
+          uniform float snowSpeed;\n\
+                  uniform float snowSize;\n\
+          float snow(vec2 uv,float scale)\n\
+          {\n\
+              float time=czm_frameNumber/snowSpeed;\n\
+              float w=smoothstep(1.,0.,-uv.y*(scale/10.));if(w<.1)return 0.;\n\
+              uv+=time/scale;uv.y+=time*2./scale;uv.x+=sin(uv.y+time*.5)/scale;\n\
+              uv*=scale;vec2 s=floor(uv),f=fract(uv),p;float k=3.,d;\n\
+              p=.5+.35*sin(11.*fract(sin((s+p+scale)*mat2(7,3,6,5))*5.))-f;d=length(p);k=min(d,k);\n\
+              k=smoothstep(0.,k,sin(f.x+f.y)*snowSize);\n\
+              return k*w;\n\
+          }\n\
+          out vec4 fragColor;\n\
+          void main(void){\n\
+              vec2 resolution=czm_viewport.zw;\n\
+              vec2 uv=(gl_FragCoord.xy*2.-resolution.xy)/min(resolution.x,resolution.y);\n\
+              vec3 finalColor=vec3(0);\n\
+              //float c=smoothstep(1.,0.3,clamp(uv.y*.3+.8,0.,.75));\n\
+              float c=0.;\n\
+              c+=snow(uv,30.)*.0;\n\
+              c+=snow(uv,20.)*.0;\n\
+              c+=snow(uv,15.)*.0;\n\
+              c+=snow(uv,10.);\n\
+              c+=snow(uv,8.);\n\
+              c+=snow(uv,6.);\n\
+              c+=snow(uv,5.);\n\
+              finalColor=(vec3(c));\n\
+              fragColor=mix(texture(colorTexture,v_textureCoordinates),vec4(finalColor,1),.5);\n\
+              }\n\
+              ";
+  }
+}
+export default SnowEffect;

src/views/systemTemplate/forestFire/Toolbar/Toolbar.vue

@@ -46,6 +46,7 @@ import * as Cesium from 'cesium';
 import { useDrawTool } from '@/components/CesiumMap/mixins/useDrawTool';
 import { useEventBus } from '@/components/CesiumMap/mixins/useEventBus';
 import { useMeasureTool } from '@/components/CesiumMap/mixins/useMeasureTool';
+import { useWeatherParticle } from '@/components/CesiumMap/mixins/useWeatherParticle';
 import { 
   drawLocation,
 	drawPolyline,
@@ -100,6 +101,11 @@ import toolbarWarehouseIcon from '@/assets/icons/toolbar_warehouse.png';
 import toolbarWatersourceIcon from '@/assets/icons/toolbar_watersource.png';
 import toolbarRoadIcon from '@/assets/icons/toolbar_road.png';
 import toolbarKeyareaIcon from '@/assets/icons/toolbar_keyarea.png';
+// 气象效果图标
+import toolbarSunnyIcon from '@/assets/icons/toolbar_sunny.png';
+import toolbarRainIcon from '@/assets/icons/toolbar_rain.png';
+import toolbarSnowIcon from '@/assets/icons/toolbar_snow.png';
+import toolbarFogIcon from '@/assets/icons/toolbar_fog.png';
 
 const props = defineProps({
   viewer: {
@@ -111,6 +117,7 @@ const props = defineProps({
 let viewer = null
 let drawTool = null
 let measureTool = null
+let weatherParticle = null
 let bus = null
 let toolbarLayer = null
 let primitiveList = []
@@ -242,6 +249,32 @@ const options = ref([
     id: 3,
     icon: weatherIcon,
     label: '气象效果',
+    subtools: [ 
+      {
+        id: 31,
+        name: 'sunny',
+        label: '晴天',
+        icon: toolbarSunnyIcon
+      },
+      {
+        id: 32,
+        name: 'rain',
+        label: '下雨',
+        icon: toolbarRainIcon
+      },
+      {
+        id: 33,
+        name: 'snow',
+        label: '下雪',
+        icon: toolbarSnowIcon
+      },
+      {
+        id: 34,
+        name: 'fog',
+        label: '起雾',
+        icon: toolbarFogIcon
+      },
+    ]
   },
   {
     id: 4,
@@ -288,7 +321,7 @@ watch(() => props.viewer, (v) => {
 
     drawTool = useDrawTool(viewer);
     measureTool = useMeasureTool(viewer);
-    // 绑定事件
+    // 绘制、测量事件参数
     params = {
       drawTool,
       measureTool,
@@ -296,6 +329,11 @@ watch(() => props.viewer, (v) => {
       toolbarLayer,
       primitiveList,
     }
+
+    // 气象效果
+    weatherParticle = useWeatherParticle(viewer);
+
+    // 绑定事件
     bus = useEventBus(viewer);
     // 基础绘制部分
     bus.on('toolbar_location', drawLocation);
@@ -320,6 +358,11 @@ watch(() => props.viewer, (v) => {
     bus.on('toolbar_warehouse', drawWarehouse);
     bus.on('toolbar_road', drawRoad);
     bus.on('toolbar_keyarea', drawKeyarea);
+    // 气象效果部分
+    bus.on('toolbar_sunny', () => weatherParticle && weatherParticle.destroy())
+    bus.on('toolbar_rain', () => weatherParticle && weatherParticle.rain())
+    bus.on('toolbar_snow', () => weatherParticle && weatherParticle.snow())
+    bus.on('toolbar_fog', () => weatherParticle && weatherParticle.fog())
     // 清空
     bus.on('toolbar_clear', toolbarClear);
   }

src/views/systemTemplate/forestFire/index.vue

@@ -10,7 +10,7 @@
 import { shallowRef } from 'vue';
 import * as Cesium from 'cesium';
 import CesiumMap from '@/components/CesiumMap/index.vue';
-import { useEventBus } from '@/components/CesiumMap/mixins/useEventBus';
+import { useEventBus, ScreenMode } from '@/components/CesiumMap/mixins/useEventBus';
 import Toolbar from './Toolbar';
 import DialogPropertyGrid from './DialogPropertyGrid';
 import { setPropertyData } from './DialogPropertyGrid/property';
@@ -38,10 +38,7 @@ const initMap = (v) => {
   console.log('地图已初始化', v);
 
   const bus = useEventBus(viewerRef.value)
-  // bus.on('hoverTest', ({ screenPosition }) => {
+  // view 模式下，点击地图要素显示属性编辑弹窗
-  //   console.log('hoverTest 事件触发屏幕位置:', screenPosition);
-    
-  // });
   bus.onScreen(Cesium.ScreenSpaceEventType.LEFT_CLICK, ({ position }) => {
     console.log('左键点击屏幕位置:', position);
     // 如果点击的是实体，则获取该实体的属性数据
@@ -71,7 +68,7 @@ const initMap = (v) => {
         }
       }
     }
-  })
+  }, ScreenMode.VIEW)
 };
 
 </script>