功能修改

src/views/cesiumComponents/topographicMap.vue

@@ -63,7 +63,8 @@
       :modelVal="modelVal"
       @showDia="showComDia"
     />
-    <windView v-if="showWindDetail" @showDetail="menuComTSty" @backStations="backStations" />
+    <windView v-if="showWindDetail" :showWeather="showWeather" @coverOnChange="coverOnChange"
+     @showDetail="menuComTSty" @backStations="backStations" />
   </div>
 </template>
 
@@ -77,6 +78,10 @@ import comModelDialog from "@/components/comModelDialog.vue";
 import windView from "./windView.vue";
 import menuCom from "../menuCom.vue";
 
+import cloudJson from "/public/static/exportData/cloud/layer.json";
+import rainJson from "/public/static/exportData/rain/layer.json";
+import tempJson from "/public/static/exportData/tmp/layer.json";
+
 // import bw from "@/assets/windimgs/fanSvg/bw.svg"
 //风场展示图标
 import fc from "@/assets/windimgs/fanSvg/fc.png"
@@ -104,6 +109,9 @@ import bwshan from "@/assets/windimgs/fanSvg/bwshan.png"
 import windHome from "@/components/windHome/index.vue";
 import windPro from "@/components/windProDetail/windProblem.vue";
 import ModelUnpack from "@/components/modelUnpack.vue";
+
+import { WindLayer } from "cesium-wind";
+import windGridData from "./windGridData.json";
 export default {
   components: {
     comModelDialog,
@@ -116,6 +124,17 @@ export default {
   data() {
     return {
       viewer: null,
+      windLayer: null, // 风场图
+      windLayerTimmer: null, // 风场图计时器
+      cloudImagesLayer: [], // 卫星云图
+      cloudLayer: null, // 卫星云图
+      cloudintervalId: null,
+      rainImagesLayer: [], // 降雨图
+      rainLayer: null, // 降雨图
+      rainintervalId: null, // 降雨图
+      tempImagesLayer: [], //温度图
+      temperatureLayer: null, //温度图
+      tempintervalId: null, //温度图
       showcomModelDia: false,
       modelVal: null,
       menuComTStyB: false,
@@ -129,7 +148,8 @@ export default {
       showModelMsg: false,
       showWindDetail: true,
       allStationentitys: [],
-      allWindEntitys: []
+      allWindEntitys: [],
+      showWeather: false
     };
   },
   mounted() {
@@ -876,7 +896,7 @@ export default {
 
         const draggableHeightTolerance = 10000; // 允许拖拽的高度范围：18,000 ~ 22,000
         const minHeight = 10000;   // 最低高度
-        const maxHeight = 100000;  // 最高高度
+        const maxHeight = 800000;  // 最高高度
 
         const allowedOffsetDegrees = 0.2; // 允许拖拽的最大偏移（经纬度）
 
@@ -927,16 +947,21 @@ export default {
                 }
 
                 if (currentHeight > maxHeight) {
-                const newPos = Cesium.Cartesian3.fromDegrees(currentLon, currentLat, maxHeight);
-                camera.setView({
-                    destination: newPos,
-                    orientation: {
-                    heading: camera.heading,
-                    pitch: camera.pitch,
-                    roll: camera.roll
-                    }
-                });
-                return;
+                    that.showWeather = true
+                    const newPos = Cesium.Cartesian3.fromDegrees(currentLon, currentLat, maxHeight);
+                    camera.setView({
+                        destination: newPos,
+                        orientation: {
+                        heading: camera.heading,
+                        pitch: camera.pitch,
+                        roll: camera.roll
+                        }
+                    });
+                    return;
+                }
+                if (currentHeight < (maxHeight-1000)) {
+                    that.showWeather = false
+                    that.cancleAllLayer();
                 }
 
                 // === 第二步：判断是否在“可拖拽高度区间” ===
@@ -981,6 +1006,323 @@ export default {
             });
         }
     },
+    coverOnChange(val) {
+      if (val.value === "风场") {
+        this.switchWindLayer(val.check);
+      } else if (val.value === "云层") {
+        this.switchCloudLayer(val.check);
+      } else if (val.value === "降雨") {
+        this.switchRainLayer(val.check);
+      } else if (val.value === "温度") {
+        this.switchTemperatureLayerr(val.check);
+      }
+    },
+    // 提供控制函数以便在需要时停止循环
+    stopCycling(intervalId) {
+      if (intervalId) {
+        clearInterval(intervalId);
+        intervalId = null;
+        console.log("循环已停止");
+      }
+    },
+    // 切换风场图显隐
+    switchWindLayer() {
+      this.viewer.scene.screenSpaceCameraController.enableZoom = true;
+      if (this.rainLayer || this.rainImagesLayer.length > 0) {
+        this.removeRainLayer();
+        this.stopCycling(this.rainintervalId);
+      }
+      if (this.cloudLayer || this.cloudImagesLayer.length > 0) {
+        this.removeCloudLayer();
+        this.stopCycling(this.cloudintervalId);
+      }
+      if (this.temperatureLayer || this.tempImagesLayer.length > 0) {
+        this.removeTemperatureLayer();
+        this.stopCycling(this.tempintervalId);
+      }
+      if (this.windLayer) {
+        this.removeWindLayer();
+      } else {
+        this.showWindLayer();
+      }
+    },
+    // 添加风场图
+    async showWindLayer() {
+      if (!this.windLayer) {
+        this.windLayer = new WindLayer(windGridData, { 
+          particleSize: 2.0,
+          particleOpacity: 0.6,
+          particleSpeed: 0.01,
+          maxVelocity: 25,// 风速最大值（用于颜色映射和速度缩放）
+          minVelocity: 0, // 风速最小值阈值（低于此值不显示粒子）
+          colorScale: [
+            "rgb(36,104, 180)",
+            "rgb(60,157, 194)",
+            "rgb(128,205,193)",
+            "rgb(151,218,168)",
+            "rgb(198,231,181)",
+            "rgb(238,247,217)",
+            "rgb(255,238,159)",
+            "rgb(252,217,125)",
+            "rgb(255,182,100)",
+            "rgb(252,150,75)",
+            "rgb(250,112,52)",
+            "rgb(245,64,32)",
+            "rgb(237,45,28)",
+            "rgb(220,24,32)",
+            "rgb(180,0,35)",
+          ],// 颜色强度缩放
+          frameRate: 15,
+          fadeOpacity: 0.995,
+          particleAge: 150,
+          maxAge: 60,
+          globalAlpha: 0.8,
+          velocityScale: 1 / 30,// 粒子移动速度缩放因子（控制动画快慢）
+          paths: 1000,
+          lineWidth: 2,
+        });
+        this.windLayer.addTo(this.viewer);
+      }
+    },
+
+    // 切换卫星云图显隐
+    switchCloudLayer(val) {
+      if (this.windLayer) {
+        this.removeWindLayer();
+      }
+      if (this.rainLayer || this.rainImagesLayer.length > 0) {
+        this.removeRainLayer();
+        this.stopCycling(this.rainintervalId);
+      }
+      if (this.temperatureLayer || this.tempImagesLayer.length > 0) {
+        this.removeTemperatureLayer();
+        this.stopCycling(this.tempintervalId);
+      }
+      if (!val || this.cloudLayer || this.cloudImagesLayer.length > 0) {
+        this.removeCloudLayer();
+        this.stopCycling(this.cloudintervalId);
+      } else {
+        this.showCloudLayer();
+      }
+    },
+    // 切换降雨图显隐
+    switchRainLayer() {
+      this.viewer.scene.screenSpaceCameraController.enableZoom = true;
+      if (this.windLayer) {
+        this.removeWindLayer();
+      }
+      if (this.cloudLayer || this.cloudImagesLayer.length > 0) {
+        this.removeCloudLayer();
+        this.stopCycling(this.cloudintervalId);
+      }
+      if (this.temperatureLayer || this.tempImagesLayer.length > 0) {
+        this.removeTemperatureLayer();
+        this.stopCycling(this.tempintervalId);
+      }
+      if (this.rainLayer || this.rainImagesLayer.length > 0) {
+        this.removeRainLayer();
+        this.stopCycling(this.rainintervalId);
+      } else {
+        this.showRainLayer();
+      }
+    },
+    // 切换温度图显隐
+    switchTemperatureLayerr() {
+      this.viewer.scene.screenSpaceCameraController.enableZoom = true;
+      if (this.windLayer) {
+        this.removeWindLayer();
+      }
+      if (this.cloudLayer || this.cloudImagesLayer.length > 0) {
+        this.removeCloudLayer();
+        this.stopCycling(this.cloudintervalId);
+      }
+      if (this.rainLayer || this.rainImagesLayer.length > 0) {
+        this.removeRainLayer();
+        this.stopCycling(this.rainintervalId);
+      }
+      if (this.temperatureLayer || this.tempImagesLayer.length > 0) {
+        this.removeTemperatureLayer();
+        this.stopCycling(this.tempintervalId);
+      } else {
+        this.showTemperatureLayer();
+      }
+    },
+    // 显示云图
+    showCloudLayer() {
+      const imageUrls = [];
+      cloudJson.forEach((it) => {
+        imageUrls.push("/public/static" + it.path);
+      });
+      this.showeveryTypeImagesLayer(
+        imageUrls,
+        this.cloudintervalId,
+        this.cloudImagesLayer
+      );
+    },
+    //显示降雨图
+    showRainLayer() {
+      const imageUrls = [];
+      rainJson.forEach((it) => {
+        imageUrls.push("/public/static" + it.path);
+      });
+      this.showeveryTypeImagesLayer(
+        imageUrls,
+        this.rainintervalId,
+        this.rainImagesLayer
+      );
+      this.csceneElliposid(this.viewer, "rain");
+    },
+    //显示温度图
+    showTemperatureLayer() {
+      const imageUrls = [];
+      tempJson.forEach((it) => {
+        imageUrls.push("/public/static" + it.path);
+      });
+      this.showeveryTypeImagesLayer(
+        imageUrls,
+        this.tempintervalId,
+        this.tempImagesLayer
+      );
+      this.csceneElliposid(this.viewer, "temp");
+    },
+    async showeveryTypeImagesLayer(imageUrls, intervalId, ImagesLayers) {
+      // 存储所有图片图层的数组
+      let imageLayers = [];
+      // 当前显示的图片索引
+      let currentImageIndex = -1; // 初始为-1，表示没有图片显示
+
+      // 创建所有图片图层并添加到Viewer，初始时全部隐藏
+      await imageUrls.forEach((url) => {
+        const provider = new Cesium.SingleTileImageryProvider({
+          url: url,
+          // url: URL.createObjectURL(url),
+          rectangle: Cesium.Rectangle.fromDegrees(-180.0, -90.0, 180.0, 90.0), // 全球覆盖
+          tileWidth: 1440, // 根据你的图片实际宽度修改
+          tileHeight: 721,
+          // 如果你的图片只覆盖特定区域，请修改rectangle参数
+        });
+        const Layer = this.viewer.imageryLayers.addImageryProvider(provider);
+        Layer.alpha = 0.8; // 透明度
+        Layer.brightness = 1; // 亮度
+        Layer.contrast = 1; // 对比度
+        Layer.show = false; // 初始隐藏
+        imageLayers.push(Layer);
+        ImagesLayers.push(Layer);
+      });
+      function showNextImage() {
+        // 隐藏当前图片
+        if (currentImageIndex >= 0 && currentImageIndex < imageLayers.length) {
+          imageLayers[currentImageIndex].show = false;
+        }
+
+        // 计算下一张图片的索引
+        currentImageIndex = (currentImageIndex + 1) % imageLayers.length;
+
+        // 显示下一张图片
+        imageLayers[currentImageIndex].show = true;
+        // imageLayers[currentImageIndex + 1].show = true;
+        console.log("当前显示图片: " + imageUrls[currentImageIndex]);
+      }
+
+      // 设置切换间隔（毫秒），例如每5秒切换一次
+      const intervalMs = 5000;
+      intervalId = setInterval(showNextImage, intervalMs);
+
+      // 初始显示第一张图片
+      showNextImage();
+    },
+    // 移除风场图
+    removeWindLayer() {
+      if (this.windLayer) {
+        // this.windLayer.destroy();
+        this.windLayer.remove();
+        this.windLayer = null;
+      }
+    },
+
+    // 移除卫星云图
+    removeCloudLayer() {
+      if (this.cloudLayer) {
+        this.tagMsg = null;
+        this.viewer.imageryLayers.remove(this.cloudLayer);
+        this.cloudLayer = null;
+      }
+      if (this.cloudImagesLayer.length > 0) {
+        this.cloudImagesLayer.forEach((it) => {
+          this.viewer.imageryLayers.remove(it);
+        });
+        this.cloudImagesLayer = [];
+      }
+
+      if (this.imageryProviderV) {
+        this.viewer.imageryLayers.remove(this.imageryProviderV);
+        this.imageryProviderV = null;
+      }
+    },
+    // 移除降雨图
+    removeRainLayer() {
+      if (this.rainLayer) {
+        this.tagMsg = null;
+        this.viewer.imageryLayers.remove(this.rainLayer);
+        this.rainLayer = null;
+        this.setMapImageryProvider();
+        this.handlerAction.removeInputAction(
+          Cesium.ScreenSpaceEventType.LEFT_CLICK
+        );
+      }
+      if (this.rainImagesLayer.length > 0) {
+        this.rainImagesLayer.forEach((it) => {
+          this.viewer.imageryLayers.remove(it);
+        });
+        this.rainImagesLayer = [];
+      }
+
+      if (this.imageryProviderV) {
+        this.viewer.imageryLayers.remove(this.imageryProviderV);
+        this.imageryProviderV = null;
+      }
+    },
+    // 移除温度图
+    removeTemperatureLayer() {
+      if (this.temperatureLayer) {
+        this.tagMsg = null;
+        this.viewer.imageryLayers.remove(this.temperatureLayer);
+        this.temperatureLayer = null;
+        this.setMapImageryProvider();
+        this.handlerAction.removeInputAction(
+          Cesium.ScreenSpaceEventType.LEFT_CLICK
+        );
+      }
+      if (this.tempImagesLayer.length > 0) {
+        this.tempImagesLayer.forEach((it) => {
+          this.viewer.imageryLayers.remove(it);
+        });
+        this.tempImagesLayer = [];
+      }
+      if (this.imageryProviderV) {
+        this.viewer.imageryLayers.remove(this.imageryProviderV);
+        this.imageryProviderV = null;
+      }
+    },
+
+    //取消所有图层加载
+    cancleAllLayer() {
+      if (this.windLayer) {
+        this.removeWindLayer();
+      }
+      if (this.rainLayer || this.rainImagesLayer.length > 0) {
+        this.removeRainLayer();
+        this.stopCycling(this.rainintervalId);
+      }
+      if (this.cloudLayer || this.cloudImagesLayer.length > 0) {
+        this.removeCloudLayer();
+        this.stopCycling(this.cloudintervalId);
+      }
+      if (this.temperatureLayer || this.tempImagesLayer.length > 0) {
+        this.removeTemperatureLayer();
+        this.stopCycling(this.tempintervalId);
+      }
+    },
     switchLayer() {
       this.$router.push({
         path: "/",
@@ -989,6 +1331,7 @@ export default {
     menuComTSty(val) {
       this.menuComTStyB = val;
     },
+
   },
 };
 </script>

src/views/cesiumComponents/windView.vue

@@ -23,35 +23,47 @@
             
         </aside>
         <aside class="sidebar-left2 panel" v-if="showWindStatus">
-            <span class="labels" style="">风机状态类型 </span>
-            <div class="stat-block" style="display: flex">
-                <div class="windStatus">
-                    <img :src="bw" style="width:60px;height:60px;">
-                    <p class="values windVal">并网</p>
+            <div v-if="showWeather">
+                <span class="labels">覆盖模式 </span>
+                <div class="stat-block">
+                    <span class="covercheck">
+                        <el-check-tag v-for="(it, index) in coverArr" :key="index" type="primary"
+                        :disabled="it.disabled"
+                        :checked="it.check" @change="coverOnChange(it)">{{it.value}}</el-check-tag>
+                    </span>
                 </div>
-                <div class="windStatus">
-                    <img :src="dj" style="width:60px;height:60px;">
-                    <p class="values windVal">待机</p>
-                </div>
-                <div class="windStatus">
-                    <img :src="gz" style="width:60px;height:60px;">
-                    <p class="values windVal">故障</p>
-                </div>
-                <div class="windStatus">
-                    <img :src="jx" style="width:60px;height:60px;">
-                    <p class="values windVal">检修</p>
-                </div>
-                <div class="windStatus">
-                    <img :src="xd" style="width:60px;height:60px;">
-                    <p class="values windVal">限电</p>
-                </div>
-                <div class="windStatus">
-                    <img :src="lx" style="width:60px;height:60px;">
-                    <p class="values windVal">离线</p>
-                </div>
-                <div class="windStatus">
-                    <img :src="sl" style="width:60px;height:60px;">
-                    <p class="values windVal">受累</p>
+            </div>
+            <div>
+                <span class="labels" style="">风机状态类型 </span>
+                <div class="stat-block" style="display: flex">
+                    <div class="windStatus">
+                        <img :src="bw" style="width:60px;height:60px;">
+                        <p class="values windVal">并网</p>
+                    </div>
+                    <div class="windStatus">
+                        <img :src="dj" style="width:60px;height:60px;">
+                        <p class="values windVal">待机</p>
+                    </div>
+                    <div class="windStatus">
+                        <img :src="gz" style="width:60px;height:60px;">
+                        <p class="values windVal">故障</p>
+                    </div>
+                    <div class="windStatus">
+                        <img :src="jx" style="width:60px;height:60px;">
+                        <p class="values windVal">检修</p>
+                    </div>
+                    <div class="windStatus">
+                        <img :src="xd" style="width:60px;height:60px;">
+                        <p class="values windVal">限电</p>
+                    </div>
+                    <div class="windStatus">
+                        <img :src="lx" style="width:60px;height:60px;">
+                        <p class="values windVal">离线</p>
+                    </div>
+                    <div class="windStatus">
+                        <img :src="sl" style="width:60px;height:60px;">
+                        <p class="values windVal">受累</p>
+                    </div>
                 </div>
             </div>
         </aside>
@@ -620,6 +632,12 @@ export default {
         ListBarChart2Home,
         PieChart
     },
+    props: {
+        showWeather: {
+            type: Boolean,
+            default: false
+        },
+    },
     data() {
         return {
             showWindStatus: true,
@@ -630,6 +648,49 @@ export default {
             xd,
             lx,
             sl,
+            coverArr: [
+                {
+                    value: "风场",
+                    check: false
+                },
+                {
+                    value: "云层",
+                    check: false
+                },
+                {
+                    value: "降雨",
+                    check: false
+                },
+                {
+                    value: "温度",
+                    check: false
+                },
+                {
+                    value: "湿度",
+                    check: false,
+                    disabled: true
+                },
+                {
+                    value: "3小时累计降雨量",
+                    check: false,
+                    disabled: true
+                },
+                {
+                    value: "水汽含量",
+                    check: false,
+                    disabled: true
+                },
+                {
+                    value: "云中总水量",
+                    check: false,
+                    disabled: true
+                },
+                {
+                    value: "平均海平面压力",
+                    check: false,
+                    disabled: true
+                }
+            ],
             activeTab: -1,
             wpIds: "KGDL_FGS0",
             powerDataHome: {},
@@ -652,6 +713,16 @@ export default {
         backStations() {
             this.$emit("backStations")
         },
+        coverOnChange(itv) {
+            this.coverArr.forEach(it => {
+                if (itv === it) {
+                    it.check = !it.check
+                } else {
+                    it.check = false
+                }
+            })
+            this.$emit("coverOnChange", itv)
+        },
         showDetail() {
             this.showWindDetail = !this.showWindDetail
             this.showWindStatus = !this.showWindStatus
@@ -877,6 +948,14 @@ export default {
             left: 10px;
         }
     }
+    .covercheck{
+        display: inline-block;
+        width: 100%;
+        .el-check-tag{
+            margin: 0 5px 3px 0;
+            padding: 5px 8px;
+        }
+    }
 }
 
 /* --- Left Sidebar --- */