Bläddra i källkod

Revert "添加天气效果"

This reverts commit a72c21775e873bbbe52e9ec2bf53a6c7699111e5.
WQQ 1 vecka sedan
förälder
incheckning
4d63a3b343

BIN
RuoYi-Vue3/src/assets/images/椭圆 .png


+ 0 - 337
RuoYi-Vue3/src/supermap-cesium-module/components/special-effects/weather/weather.js

@@ -1,337 +0,0 @@
-// 天气效果实现
-class WeatherEffect {
-  constructor(viewer) {
-    this.viewer = viewer;
-    this.scene = viewer.scene;
-    this.currentWeather = 'sunny'; // 默认晴天
-    this.rainParticleSystem = null;
-    this.snowParticleSystem = null;
-    this.rainEffect = null;
-  }
-
-  // 设置天气类型
-  setWeather(weatherType) {
-    this.currentWeather = weatherType;
-    this.clearWeatherEffects();
-    
-    switch (weatherType) {
-      case 'sunny':
-        this.setSunnyWeather();
-        break;
-      case 'cloudy':
-        this.setCloudyWeather();
-        break;
-      case 'rain':
-        this.setRainWeather();
-        break;
-      case 'snow':
-        this.setSnowWeather();
-        break;
-    }
-  }
-
-  // 清除所有天气效果
-  clearWeatherEffects() {
-    // 清除粒子系统
-    if (this.rainParticleSystem) {
-      this.scene.primitives.remove(this.rainParticleSystem);
-      this.rainParticleSystem = null;
-    }
-    if (this.snowParticleSystem) {
-      this.scene.primitives.remove(this.snowParticleSystem);
-      this.snowParticleSystem = null;
-    }
-
-    // 清除后处理效果
-    if (this.rainEffect) {
-      this.rainEffect.destroy();
-      this.rainEffect = null;
-    }
-
-    // 重置大气效果
-    this.scene.skyAtmosphere.hueShift = 0.0;
-    this.scene.skyAtmosphere.saturationShift = 0.0;
-    this.scene.skyAtmosphere.brightnessShift = 0.0;
-
-    // 重置光照
-    this.scene.globe.enableLighting = true;
-    if (this.scene.sun) {
-      this.scene.sun.show = true;
-    }
-    if (this.scene.moon) {
-      this.scene.moon.show = false;
-    }
-  }
-
-  // 设置晴天效果
-  setSunnyWeather() {
-    this.scene.skyAtmosphere.hueShift = 0.0;
-    this.scene.skyAtmosphere.saturationShift = 0.1;
-    this.scene.skyAtmosphere.brightnessShift = 0.2;
-    this.scene.globe.enableLighting = true;
-    if (this.scene.sun) {
-      this.scene.sun.show = true;
-    }
-  }
-
-  // 设置阴天效果
-  setCloudyWeather() {
-    this.scene.skyAtmosphere.hueShift = 0.1;
-    this.scene.skyAtmosphere.saturationShift = -0.3;
-    this.scene.skyAtmosphere.brightnessShift = -0.4;
-    this.scene.globe.enableLighting = true;
-    if (this.scene.sun) {
-      this.scene.sun.show = false;
-    }
-  }
-
-  // 设置雨天效果
-  setRainWeather() {
-    this.setCloudyWeather();
-    this.createRainEffect();
-  }
-
-  // 设置雪天效果
-  setSnowWeather() {
-    this.setCloudyWeather();
-    this.createSnowEffect();
-  }
-
-  // 创建下雨效果
-  createRainEffect() {
-    console.log('创建雨天效果');
-    
-    // 尝试使用粒子系统实现雨天效果
-    const rainParticleSize = this.scene.drawingBufferWidth / 500.0; // 进一步减小雨滴宽度
-    const rainRadius = 4000.0;
-    const rainImageSize = new Cesium.Cartesian2(rainParticleSize, rainParticleSize * 10.0); // 调整雨滴形状,更加细长
-    const rainGravityScratch = new Cesium.Cartesian3();
-    
-    const rainUpdate = (particle, dt) => {
-      Cesium.Cartesian3.normalize(particle.position, rainGravityScratch);
-      Cesium.Cartesian3.multiplyByScalar(rainGravityScratch, -40, rainGravityScratch); // 增加下落速度,使雨滴更自然
-      Cesium.Cartesian3.add(particle.position, rainGravityScratch, particle.position);
-      const distance = Cesium.Cartesian3.distance(this.scene.camera.position, particle.position);
-      if (distance > rainRadius) {
-        particle.endColor.alpha = 0.0;
-      } else {
-        particle.endColor.alpha = this.rainParticleSystem.endColor.alpha / (distance / rainRadius + 0.1);
-      }
-    };
-    
-    // 创建雨滴粒子系统
-    const rainColor = new Cesium.Color(0.5, 0.6, 0.7, 0.4); // 调整为更暗的雨水颜色,增加透明度
-    console.log('雨滴颜色:', rainColor);
-    
-    // 使用与雪天相同的纹理,确保显示
-    const rainTexture = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGNpcmNsZSBjeD0iNSIgY3k9IjUiIHI9IjUiIGZpbGw9IiNmZmYiIGZpbGwtb3BhY2l0eT0iMC43Ii8+PC9zdmc+';
-    
-    this.rainParticleSystem = new Cesium.ParticleSystem({
-      modelMatrix: new Cesium.Matrix4.fromTranslation(this.scene.camera.position),
-      speed: -1.0,
-      lifetime: 10.0, // 减少生命周期,使雨滴更密集
-      emitter: new Cesium.SphereEmitter(rainRadius),
-      startScale: 1.0,
-      endScale: 1.0,
-      image: rainTexture,
-      emissionRate: 5000.0, // 增加粒子数量,使雨更密集
-      startColor: rainColor,
-      endColor: rainColor,
-      imageSize: rainImageSize,
-      updateCallback: rainUpdate,
-      performance: false,
-    });
-    
-    this.scene.primitives.add(this.rainParticleSystem);
-    this.rainParticleSystem.lodRangeScale = 10000;
-    
-    // 参考示例,添加相机位置监听,确保粒子系统跟随相机移动
-    this.scene.camera.changed.addEventListener(() => {
-      if (this.rainParticleSystem) {
-        const modelMatrix = new Cesium.Matrix4.fromTranslation(this.scene.camera.position);
-        this.rainParticleSystem.modelMatrix = modelMatrix;
-      }
-    });
-    
-    console.log('雨天效果创建完成,粒子系统数量:', this.scene.primitives.length);
-    console.log('粒子系统颜色设置:', {
-      startColor: this.rainParticleSystem.startColor,
-      endColor: this.rainParticleSystem.endColor
-    });
-  }
-
-  // 创建下雪效果
-  createSnowEffect() {
-    const snowParticleSize = this.scene.drawingBufferWidth / 150.0; // 减小雪花大小
-    const snowRadius = 4000.0;
-    const snowImageSize = new Cesium.Cartesian2(snowParticleSize, snowParticleSize);
-    const snowGravityScratch = new Cesium.Cartesian3();
-    
-    const snowUpdate = (particle, dt) => {
-      Cesium.Cartesian3.normalize(particle.position, snowGravityScratch);
-      Cesium.Cartesian3.multiplyByScalar(snowGravityScratch, -15, snowGravityScratch); // 减慢下落速度
-      Cesium.Cartesian3.add(particle.position, snowGravityScratch, particle.position);
-      const distance = Cesium.Cartesian3.distance(this.scene.camera.position, particle.position);
-      if (distance > snowRadius) {
-        particle.endColor.alpha = 0.0;
-      } else {
-        particle.endColor.alpha = this.snowParticleSystem.endColor.alpha / (distance / snowRadius + 0.1);
-      }
-    };
-    
-    // 创建雪花粒子系统
-    const snowColor = Cesium.Color.WHITE.withAlpha(0.7); // 按照用户要求设置
-    console.log('雪花颜色:', snowColor);
-    
-    // 使用更适合的雪花纹理
-    const snowTexture = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGNpcmNsZSBjeD0iNSIgY3k9IjUiIHI9IjUiIGZpbGw9IiNmZmYiIGZpbGwtb3BhY2l0eT0iMC43Ii8+PC9zdmc+';
-    
-    this.snowParticleSystem = new Cesium.ParticleSystem({
-      modelMatrix: new Cesium.Matrix4.fromTranslation(this.scene.camera.position),
-      speed: -1.0,
-      lifetime: 20.0, // 增加生命周期,使雪花飘落更自然
-      emitter: new Cesium.SphereEmitter(snowRadius),
-      startScale: 0.8,
-      endScale: 1.2, // 增加大小变化,使雪花更自然
-      image: snowTexture,
-      emissionRate: 3000.0, // 增加粒子数量,使雪更密集
-      startColor: snowColor,
-      endColor: snowColor,
-      imageSize: snowImageSize,
-      updateCallback: snowUpdate,
-      performance: false,
-    });
-    
-    this.scene.primitives.add(this.snowParticleSystem);
-    this.snowParticleSystem.lodRangeScale = 10000;
-    
-    // 参考示例,添加相机位置监听,确保粒子系统跟随相机移动
-    this.scene.camera.changed.addEventListener(() => {
-      if (this.snowParticleSystem) {
-        const modelMatrix = new Cesium.Matrix4.fromTranslation(this.scene.camera.position);
-        this.snowParticleSystem.modelMatrix = modelMatrix;
-      }
-    });
-    
-    console.log('雪天效果创建完成,粒子系统数量:', this.scene.primitives.length);
-    console.log('粒子系统颜色设置:', {
-      startColor: this.snowParticleSystem.startColor,
-      endColor: this.snowParticleSystem.endColor
-    });
-  }
-
-  // 获取当前天气类型
-  getCurrentWeather() {
-    return this.currentWeather;
-  }
-}
-
-// 后处理阶段实现的雨天效果
-class RainEffect {
-  constructor(viewer, options) {
-    console.log('初始化 RainEffect');
-    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.1); // 雨滴大小
-    this.rainSpeed = Cesium.defaultValue(options.rainSpeed, 1000.0); // 雨速
-    this.rainIntensity = Cesium.defaultValue(options.rainIntensity, 1.0); // 雨的强度
-    this.viewer = viewer;
-    console.log('RainEffect 初始化参数:', { tiltAngle: this.tiltAngle, rainSize: this.rainSize, rainSpeed: this.rainSpeed, rainIntensity: this.rainIntensity });
-    this.init();
-  }
-  
-  init() {
-    console.log('创建后处理阶段');
-    this.rainStage = new Cesium.PostProcessStage({
-      name: "czml_rain",
-      fragmentShader: this.rain(),
-      uniforms: {
-        tiltAngle: () => this.tiltAngle,
-        rainSize: () => this.rainSize,
-        rainSpeed: () => this.rainSpeed,
-        rainIntensity: () => this.rainIntensity,
-        time: () => performance.now() * 0.001
-      },
-    });
-    console.log('后处理阶段创建完成:', this.rainStage);
-    this.viewer.scene.postProcessStages.add(this.rainStage);
-    console.log('后处理阶段添加到场景:', this.viewer.scene.postProcessStages.length);
-  }
-  
-  rain() {
-    return `
-      uniform sampler2D colorTexture;
-      varying vec2 v_textureCoordinates;
-      uniform float tiltAngle;
-      uniform float rainSize;
-      uniform float rainSpeed;
-      uniform float rainIntensity;
-      uniform float time;
-      
-      // 随机函数
-      float random(vec2 st) {
-        return fract(sin(dot(st, vec2(12.9898, 78.233))) * 43758.5453123);
-      }
-      
-      void main(void) {
-        vec4 color = texture2D(colorTexture, v_textureCoordinates);
-        
-        // 计算雨滴位置
-        float t = time * rainSpeed;
-        float rainDensity = 0.02 * rainIntensity;
-        
-        // 倾斜角度
-        float angle = tiltAngle;
-        mat2 rotation = mat2(cos(angle), -sin(angle), sin(angle), cos(angle));
-        
-        // 雨滴效果
-        vec2 uv = v_textureCoordinates * 10.0;
-        uv = rotation * uv;
-        uv.y += t * 0.01;
-        
-        // 创建雨滴
-        float rain = 0.0;
-        for (int i = 0; i < 4; i++) {
-          vec2 grid = fract(uv * vec2(1.0, 20.0)) - 0.5;
-          float d = length(grid);
-          float size = rainSize * (1.0 + float(i) * 0.5);
-          float fade = smoothstep(size, size * 0.5, d);
-          rain += fade;
-          uv *= 1.5;
-        }
-        
-        // 应用雨滴效果
-        rain *= rainDensity;
-        color.rgb *= (1.0 - rain * 0.5);
-        color.rgb += rain * vec3(0.5, 0.6, 0.7); // 雨滴的颜色
-        
-        gl_FragColor = color;
-      }
-    `;
-  }
-  
-  // 显示雨天效果
-  show() {
-    if (this.rainStage) {
-      this.rainStage.enabled = true;
-    }
-  }
-  
-  // 隐藏雨天效果
-  hide() {
-    if (this.rainStage) {
-      this.rainStage.enabled = false;
-    }
-  }
-  
-  // 销毁雨天效果
-  destroy() {
-    if (this.rainStage) {
-      this.viewer.scene.postProcessStages.remove(this.rainStage);
-      this.rainStage = null;
-    }
-  }
-}
-
-export default WeatherEffect;

+ 0 - 112
RuoYi-Vue3/src/supermap-cesium-module/components/special-effects/weather/weather.vue

@@ -1,112 +0,0 @@
-<template>
-  <div class="weather-control">
-    <el-dropdown>
-      <el-button type="primary" size="small">
-        {{ currentWeatherText }}
-        <el-icon class="el-icon--right"><arrow-down /></el-icon>
-      </el-button>
-      <template #dropdown>
-        <el-dropdown-menu>
-          <el-dropdown-item @click="setWeather('sunny')">晴天</el-dropdown-item>
-          <el-dropdown-item @click="setWeather('cloudy')">阴天</el-dropdown-item>
-          <el-dropdown-item @click="setWeather('rain')">雨天</el-dropdown-item>
-          <el-dropdown-item @click="setWeather('snow')">雪天</el-dropdown-item>
-        </el-dropdown-menu>
-      </template>
-    </el-dropdown>
-  </div>
-</template>
-
-<script>
-import { ref, onMounted, inject, computed, nextTick } from 'vue';
-import WeatherEffect from './weather.js';
-import { ArrowDown } from '@element-plus/icons-vue';
-
-export default {
-  name: 'WeatherControl',
-  components: {
-    ArrowDown
-  },
-  setup() {
-    const viewer = inject('viewer');
-    const weatherEffect = ref(null);
-    const currentWeather = ref('sunny');
-
-    const currentWeatherText = computed(() => {
-      const weatherMap = {
-        sunny: '晴天',
-        cloudy: '阴天',
-        rain: '雨天',
-        snow: '雪天'
-      };
-      return weatherMap[currentWeather.value] || '晴天';
-    });
-
-    const setWeather = (weatherType) => {
-      currentWeather.value = weatherType;
-      if (weatherEffect.value) {
-        try {
-          weatherEffect.value.setWeather(weatherType);
-        } catch (error) {
-          console.error('设置天气效果失败:', error);
-        }
-      } else {
-        nextTick(() => {
-          if (weatherEffect.value) {
-            try {
-              weatherEffect.value.setWeather(weatherType);
-            } catch (error) {
-              console.error('设置天气效果失败:', error);
-            }
-          }
-        });
-      }
-    };
-
-    onMounted(() => {
-      const globalViewer = window.viewer;
-      if (globalViewer) {
-        try {
-          weatherEffect.value = new WeatherEffect(globalViewer);
-          weatherEffect.value.setWeather('sunny');
-        } catch (error) {
-          console.error('初始化天气效果失败:', error);
-        }
-      } else if (viewer) {
-        try {
-          weatherEffect.value = new WeatherEffect(viewer);
-          weatherEffect.value.setWeather('sunny');
-        } catch (error) {
-          console.error('初始化天气效果失败:', error);
-        }
-      } else {
-        setTimeout(() => {
-          const delayedViewer = window.viewer;
-          if (delayedViewer) {
-            try {
-              weatherEffect.value = new WeatherEffect(delayedViewer);
-              weatherEffect.value.setWeather('sunny');
-            } catch (error) {
-              console.error('初始化天气效果失败:', error);
-            }
-          }
-        }, 1000);
-      }
-    });
-
-    return {
-      currentWeatherText,
-      setWeather
-    };
-  }
-};
-</script>
-
-<style>
-.weather-control {
-  position: absolute;
-  top: 20px;
-  right: 20px;
-  z-index: 1000;
-}
-</style>

+ 4 - 3
RuoYi-Vue3/src/supermap-cesium-module/components/viewer/viewer.js

@@ -2,6 +2,7 @@
 import { addScene, addS3mLayers } from "../../js/common/layerManagement.js"
 import { actions, storeDate } from '../../js/store/store.js'   //局部状态管理
 import EventManager from '../../js/common/eventManager/EventManager.js'   //事件管理
+import { onBeforeUnmount } from 'vue'
 import createTooltip from '../../js/tool/tooltip2.js'
 import resource from '../../js/local/lang.js'  //语言资源
 
@@ -122,14 +123,14 @@ function initViewer(props, callback) {
     }
   };
 
-  // 销毁函数,需要在组件销毁时手动调用
-  viewer.destroyViewer = function() {
+  // 销毁
+  onBeforeUnmount(() => {
     if (viewer) {
       viewer.destroy();
       window.viewer = undefined;
       window.scene = undefined;
     }
-  };
+  });
   
   // 返回viewer实例
   return viewer;

+ 2 - 10
RuoYi-Vue3/src/supermap-cesium-module/components/viewer/viewer.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script>
-import { onMounted, onBeforeUnmount, ref, provide } from "vue";
+import { onMounted, ref, provide } from "vue";
 import initViewer from "./viewer.js";
 // import {initViewer} from "../../../dist/vue-webgl2.min";
 
@@ -31,22 +31,14 @@ export default {
   },
   setup(props) {
     const viewerRef = ref(null);
-    let viewerInstance = null;
     
     onMounted(() => {
       // 初始化viewer并获取实例
-      viewerInstance = initViewer(props);
+      const viewerInstance = initViewer(props);
       // 通过provide提供viewer实例给子组件
       provide('viewer', viewerInstance);
     });
     
-    onBeforeUnmount(() => {
-      // 组件销毁时销毁viewer实例
-      if (viewerInstance && viewerInstance.destroyViewer) {
-        viewerInstance.destroyViewer();
-      }
-    });
-    
     return {
       viewerRef
     };

+ 1 - 7
RuoYi-Vue3/src/supermap-cesium-module/views/layout/aside.vue

@@ -175,8 +175,6 @@
     <!-- 右侧内容展示部分 -->
     <el-main>
       <loading-bar></loading-bar>
-      <!-- 天气控制组件 -->
-      <weather-control></weather-control>
       <!-- 添加自定义服务组件 -->
       <component
         v-if="addService"
@@ -211,8 +209,6 @@ import server_flyTo_config from "../../config/server_position_config.js";  //服
 import layerManagement from "../../js/common/layerManagement.js";  //图层管理封装方法
 import camera from "../../js/common/camera.js";  //相机操作
 import loadingBar from "../../components/loading.vue";  //加载动画
-import WeatherControl from "../../components/special-effects/weather/weather.vue";  //天气控制组件
-import Sm3dViewer from "../../components/viewer/viewer.vue";  //三维场景组件
 import { CircleClose, Plus, CirclePlus } from '@element-plus/icons-vue';  //删除图标
 import { listModel } from '@/api/watershed/model';  //模型API
 import { getDefaultMapConfig, saveMapConfig } from '@/api/cesium/mapConfig';  //地图配置API
@@ -225,9 +221,7 @@ export default {
   name: "layout-aside",
   components: {
     loadingBar,
-    CircleClose,
-    WeatherControl,
-    Sm3dViewer
+    CircleClose
   },
   data() {
     return {