cesium_three/src/views/cesiumComponents/windMap3D.vue

<template>
  <div id="loading" class="dataLoading" v-if="loading">
    <span class="loadText">数据加载中...</span>
  </div>
  <div class="mapBox">
    <div id="cesiumContainer" style="width: 100%; height: 100vh"></div>
    <div :class="!menuComTStyB ? 'menuComTSty' : 'menuComT'" v-if="0">
      <menuCom
        :showbasemap="false"
        :showwindspeed="false"
        :showcloud="false"
        :showrainfall="false"
        :showtemperature="false"
        :showcity="false"
        :showwind="false"
        :showexit="true"
        :showwindModel="true"
        @handleWindModel="showwindmodel"
        @handleInit="handleInitView"
        @handleExit="switchLayer"
      />
    </div>
    <el-drawer
      v-model="windDrawer"
      direction="rtl"
      class="windModelDrawer"
      :before-close="handleClose"
    >
      <template #header>
        <h3 style="font-weight: bold">{{ windDrawerHeader }}</h3>
      </template>
      <template #default>
        <div class="windDrawerCla">
          <div class="line" v-if="!showModelMsg">
            <div class="leftContent">
              <span>{{ windDrawerTitle }}</span>
            </div>
          </div>
          <div class="jcxx" v-if="showBasicMsg">
            <windHome :modelValItem="modelVal" />
          </div>
          <div class="spjk" v-if="showVideoMsg">
            <!-- <iframe
              src="/static/windVideo.mp4"
              frameborder="0"
              style="width: 100%; height: 100%"
            ></iframe> -->
            <video ref="videoPlayer" controls width="95%" muted autoplay>
              <source src="/static/windVideo.mp4" type="video/mp4" />
            </video>
          </div>
          <div class="gzck" v-if="showProblemMsg">
            <windPro />
          </div>
          <div class="third" v-if="showModelMsg">
            <ModelUnpack
              :modelUnpackType="modelUnpackType"
              :showModelMsg="showModelMsg"
            />
          </div>
        </div>
      </template>
    </el-drawer>
    <comModelDialog
      :showcomModelDia="showcomModelDia"
      :modelVal="modelVal"
      @showDia="showComDia"
    />
    <windView
      v-if="showWindDetail"
      :cesiumViewer="viewer"
      @coverOnChange="coverOnChange"
      :currentHeight="currentHeight"
      :fjLonLatJsonArr="fjLonLatJsonArr.data"
      @showDetail="menuComTSty"
      @backStations="backStations"
      @resetChangeWind="resetChangeWind"
      @initView="resetWindViewport"
    />
  </div>
</template>

<script>
import * as Cesium from "../../Cesium";
import "../../Cesium/Widgets/widgets.css";
import fjMYLonLatJson from "../fjLonLatJson/fj_MY.json";
import fjWHZLonLatJson from "../fjLonLatJson/fj_WHZ.json"; //京能旺海庄
import fjYPLLonLatJson from "../fjLonLatJson/fj_YPL.json"; //京能营盘梁
import fjSMSLonLatJson from "../fjLonLatJson/fj_SMS.json"; //京能苏木山
import wsRes from "../fjLonLatJson/wsRes.json"; // 模拟 ws 返回数据
import mountainPosJson from "../fjLonLatJson/mountainPos.json";
import allStationJson from "./allStationJson.json";
import basicGeoJson from "../../assets/geoJson/basic.json";
import comModelDialog from "@/components/comModelDialog.vue";
import windView from "./windView.vue";
import menuCom from "../menuCom.vue";

import dayjs from "dayjs";

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 fc from "@/assets/windimgs/fanSvg/fc.png";
//火电展示图标
import hd from "@/assets/windimgs/fanSvg/hd.png";
//光伏电站展示图标
import gf from "@/assets/windimgs/fanSvg/gf.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";
import { HeightReference } from "cesium";

import AdvancedBillboardGenerator from "@/tools/lightsign.js";

import webSocketService from "@/tools/ws.js";

export default {
  name: "windMap3D",
  components: {
    comModelDialog,
    windView,
    menuCom,
    windHome,
    windPro,
    ModelUnpack,
  },
  data() {
    return {
      restLatLon: [
        {
          longitude: 114.48789,
          latitude: 35.32916,
          name: "MYFDC",
        },
        {
          longitude: 112.88355172,
          latitude: 40.46617836,
          name: "JNWHZ",
        },
        {
          longitude: 112.5270545,
          latitude: 40.35920334,
          name: "JNYPL",
        },
        {
          longitude: 112.69922452,
          latitude: 40.31857399,
          name: "JNSMS",
        },
      ],
      fjLonLatJsonArr: [],
      loading: true,
      viewer: null,
      windLayer: null, // 风场图
      windLayerTimmer: null, // 风场图计时器
      cloudImagesLayer: [], // 卫星云图
      cloudLayer: null, // 卫星云图
      cloudintervalId: null,
      rainImagesLayer: [], // 降雨图
      rainLayer: null, // 降雨图
      rainintervalId: null, // 降雨图
      tempImagesLayer: [], //温度图
      temperatureLayer: null, //温度图
      tempintervalId: null, //温度图
      showcomModelDia: false,
      currentHeight: 0,
      modelVal: null,
      menuComTStyB: false,
      modelUnpackType: "fengji",
      windDrawer: false,
      windDrawerTitle: "",
      windDrawerHeader: "",
      showBasicMsg: false,
      showVideoMsg: false,
      showProblemMsg: false,
      showModelMsg: true,
      showWindDetail: true,
      allStationentitys: [],
      allWindEntitys: [],
      urlTiles: "/static/tiles/{z}/{x}/{y}.jpg",
      verticalExaggeration: 1.0,
      infoBoxes: [],
      entityxy: {},
      entityxyArray: [],
      isFakeData: false,
      fakeDataTimmer: null,
    };
  },
  mounted() {
    this.initCesium();
    setTimeout(() => {
      this.loading = false;
    }, 1000);
  },
  methods: {
    async initCesium() {
      const box = document.getElementById("cesiumContainer");
      const viewer = new Cesium.Viewer(box, {
        // terrainProvider: Cesium.createWorldTerrain(),
        baseLayerPicker: false, //是否显示底图切换按钮
        animation: false, //是否显示动画控制按钮
        vrButton: false,
        geocoder: false, //是否显示地理编码按钮
        homeButton: false, //是否显示地图导航按钮
        infoBox: false,
        sceneModePicker: false, //是否显示场景模式切换按钮
        selectionIndicator: false,
        timeline: false, //是否显示时间轴
        fullscreenButton: false, //是否显示全屏按钮
        navigationHelpButton: false,
        shouldAnimate: true,
        imageryProvider: false, //控制默认底图的显示
        // terrain: Cesium.Terrain.fromWorldTerrain(),
      });

      viewer._cesiumWidget._creditContainer.style.display = "none";
      //   this.csceneElliposid(viewer)

      const utcStart = dayjs(
        `${dayjs().format("YYYY-MM-DD")} 00:00:00`
      ).subtract(4, "hour");
      const startTime = Cesium.JulianDate.fromDate(new Date(utcStart));

      const utcStop = dayjs(
        `${dayjs().format("YYYY-MM-DD")} 23:59:59`
      ).subtract(4, "hour");
      const stopTime = Cesium.JulianDate.fromDate(new Date(utcStop));

      const utcNow = dayjs().subtract(4, "hour");
      const nowTime = Cesium.JulianDate.fromDate(new Date(utcNow));

      // dayjs().format("YYYY-MM-DD")} 00:00:00
      viewer.clock.startTime = startTime;
      viewer.clock.stopTime = stopTime;
      viewer.clock.currentTime = nowTime;
      viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP; // 循环模式：到达结束时跳回开始
      // viewer.clock.multiplier = 10000; // 时间流逝速度（加快模拟）
      viewer.clock.shouldAnimate = true;

      this.viewer = viewer;

      // 展示场站
      // this.showAllStation(viewer)
      // 展示风机
      this.initCesiumTerrain();
      this.initCesiumBaseMapImage();
      //   this.initGeoJsonData();
      this.showWindFromStation(viewer);
    },

    // 初始化底图
    async initCesiumBaseMapImage() {
      const imageryProvider = await new Cesium.UrlTemplateImageryProvider({
        // url: "http://localhost:3007/tiles/map/{z}/{x}/{y}",
        url:
          import.meta.env.VITE_APP_ENV_NAME === "dev"
            ? "https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}"
            : "/static/ditu/{z}/{x}/{y}.png",
        // minimumLevel: 11,
        maximumLevel: 24,
        credit: "影像地图",
      });
      imageryProvider.alpha = 0.55; // 透明度
      imageryProvider.brightness = 1; // 亮度
      imageryProvider.contrast = 1; // 对比度

      this.viewer.imageryLayers.addImageryProvider(imageryProvider);
    },

    // 初始化 geoJson 数据
    async initGeoJsonData() {
      // 创建GeoJSON数据源
      await new Cesium.GeoJsonDataSource.load(basicGeoJson, {
        stroke: Cesium.Color.GRAY, // 边界线颜色
        fill: Cesium.Color.BLACK.withAlpha(0), // 填充颜色
        strokeWidth: 1, // 边界线宽度
        markerSymbol: "?", // 点要素的符号
        clampToGround: true, // 贴地
      }).then((dataSource) => {
        // 添加到视图
        this.viewer.dataSources.add(dataSource);
        var entities = dataSource.entities.values;
        for (let i = 0; i < entities.length; i++) {
          let entity = entities[i];

          entity.polygon.hierarchy.getValue(Cesium.JulianDate.now()).positions;
          //单独设置线条样式
          var positions = entity.polygon.hierarchy._value.positions;

          entity.polyline = {
            positions: positions,
            width: 2,
            outline: false,
            // clampToGround: true,
            show: true,
          };

          entity.wall = {
            positions: entity.polyline.positions.getValue(
              Cesium.JulianDate.now()
            ),
            // maximumHeights: new Array(
            //   entity.polyline.positions.getValue(Cesium.JulianDate.now()).length
            // ).fill(-3000), // 向下30米
            minimumHeights: new Array(
              entity.polyline.positions.getValue(Cesium.JulianDate.now()).length
            ).fill(-50000), // 向下50米
            material: Cesium.Color.BLACK.withAlpha(0.1),
            outline: false,
            // outlineColor: Cesium.Color.WHITE,
          };
        }

        // 添加中文标签图层
        const labelLayer = new Cesium.LabelCollection();
        this.viewer.scene.primitives.add(labelLayer);
        const cities = [];
        basicGeoJson?.features?.forEach((ele) => {
          if (Array.isArray(ele.properties.centroid)) {
            const name = ele.properties.name;
            const lon = ele.properties.centroid[0];
            const lat = ele.properties.centroid[1];
            cities.push({ name, lon, lat });
          }
        });

        cities.forEach((city, index) => {
          labelLayer.add({
            id: index,
            name: "cityLabel",
            position: Cesium.Cartesian3.fromDegrees(city.lon, city.lat, 10),
            text: city.name,
            font: 'bold 14px "Microsoft YaHei", sans-serif',
            fillColor: Cesium.Color.fromCssColorString("#000"),
            outlineColor: Cesium.Color.WHITE,
            outlineWidth: 2,
            style: Cesium.LabelStyle.FILL_AND_OUTLINE,
            pixelOffset: new Cesium.Cartesian2(0, 0), // 设置为0
            horizontalOrigin: Cesium.HorizontalOrigin.CENTER, // 水平居中
            verticalOrigin: Cesium.VerticalOrigin.CENTER, // 垂直居中
          });
        });

        this.labelLayer = labelLayer;
        // this.csceneElliposid(this.viewer, null)
        // this.resetViewport1();
      });
    },

    // 初始化地形
    async initCesiumTerrain() {
      const terrainProvider = await Cesium.CesiumTerrainProvider.fromUrl(
        // "http://localhost:3007/tiles/dixing",
        "/static/dixing",
        {
          requestWaterMask: true, // 如果需要水效果，设置为true
          requestVertexNormals: true, // 如果需要光照效果，设置为true
          requestMetadata: true, // 请求元数据
          minimumLevel: 4,
          maximumLevel: 12,
        }
      );

      this.viewer.scene.verticalExaggeration = this.verticalExaggeration;
      // this.viewer.scene.verticalExaggerationRelativeHeight = 2400.0;

      this.viewer.terrainProvider = terrainProvider;

      // const terrainProvider = new Cesium.CesiumTerrainProvider({
      //   url: "http://localhost:3007/tiles/dixing", // 地形数据所在目录的URL
      //   requestWaterMask: true, // 如果需要水效果，设置为true
      //   requestVertexNormals: true, // 如果需要光照效果，设置为true
      //   minimumLevel: 10,
      //   maximumLevel: 15,
      // });
      // this.viewer.terrainProvider = terrainProvider;
      // console.log(111, terrainProvider);

      // const imageryProvider = new Cesium.UrlTemplateImageryProvider({
      //   url: "http://localhost:3007/tiles/dixing/{z}/{x}/{y}",
      //   // url: "/static/dixing/{z}/{x}/{y}.terrain",
      //   credit: "地形数据",
      // });

      // this.viewer.imageryLayers.addImageryProvider(imageryProvider);

      // this.viewer.scene.globe.depthTestAgainstTerrain = true; //地形遮挡效果开关，打开后 地形会遮挡看不到的区域
      this.viewer.scene.globe.enableLighting = true; //对大气和雾启用动态照明效
    },

    backStations() {
      this.showWindDetail = false;
      this.allWindEntitys.forEach(({ entity, handler }) => {
        this.viewer.entities.remove(entity); // 移除实体
        if (!handler.isDestroyed()) {
          handler.destroy(); // 销毁事件处理器（关键！）
        }
      });
      this.allWindEntitys = [];
      // if (this.viewer && this.viewer.destroy) {
      //     this.viewer.destroy();
      //     this.viewer = null
      // }
      // this.initCesium();
      this.showAllStation(this.viewer);
    },
    resetChangeWind(data) {
      let that = this;
      that.viewer.camera.flyTo({
        destination: Cesium.Cartesian3.fromDegrees(
          data.longitude,
          data.latitude - 0.02,
          1000
        ),
        orientation: {
          heading: Cesium.Math.toRadians(0),
          pitch: Cesium.Math.toRadians(-30),
          roll: 0.0,
        },
        duration: 3.0,
      });
    },
    // 展示所有风场
    showAllStation(viewer) {
      allStationJson.station.forEach((e, index) => {
        if (e.energytype === "Wind") {
          this.showStationFn(viewer, e, index, fc);
        } else if (e.energytype === "Fire") {
          this.showStationFn(viewer, e, index, hd);
        } else {
          this.showStationFn(viewer, e, index, gf);
        }
      });
      this.resetAllStationViewport();
    },
    // 根据状态展示不同颜色风机贴图
    showStationFn(viewer, e, index, images) {
      const position = Cesium.Cartesian3.fromDegrees(e.longitude, e.latitude);
      const entity = viewer.entities.add({
        id: index,
        position, // 模型位置
        billboard: {
          image: images, // 也可以是 SVG 路径，如 'icon.svg'
          scale: 0.5,
          verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
          horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
          // 模型贴地
          heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
        },
        label: {
          text: e.plantname,
          font: "14px sans-serif",
          fillColor: Cesium.Color.fromBytes(255, 255, 255),
          heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
        },
      });
      let that = this;
      const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
      handler.setInputAction(function (movement) {
        var position = movement.position;
        var pickedObject = viewer.scene.pick(position);
        if (pickedObject && pickedObject.id.id === index) {
          console.log("你点击了标签或模型！", entity);
          console.log("选中风场或新能源场", e.plantname);
          that.showWindDetail = true;
          that.allStationentitys.forEach(({ entity, handler }) => {
            viewer.entities.remove(entity); // 移除实体
            if (!handler.isDestroyed()) {
              handler.destroy(); // 销毁事件处理器（关键！）
            }
          });
          that.allStationentitys = [];
          that.showWindFromStation(viewer);
        }
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
      that.allStationentitys.push({ entity, handler });
    },
    // 展示所选风场的风机
    showWindFromStation(viewer) {
      let stationName = this.$route.query.nameEn;
      let fjLonLatJson = [];
      this.fjLonLatJsonArr = [];

      webSocketService.connect({
        url: `ws/${this.getWsUrl(stationName)}`,
        autoReconnect: true,
        maxReconnectAttempts: 5,
        reconnectInterval: 3000,
        onOpen: (event) => {
          console.log("✅ WebSocket 连接成功", event);
        },
        onError: (error) => {
          console.log("❌ WebSocket 错误:", error);
          if (stationName === "MYFDC") {
            fjLonLatJson = JSON.parse(JSON.stringify(fjMYLonLatJson));
          } else if (stationName === "JNWHZ") {
            fjLonLatJson = JSON.parse(JSON.stringify(fjWHZLonLatJson));
          } else if (stationName === "JNYPL") {
            fjLonLatJson = JSON.parse(JSON.stringify(fjYPLLonLatJson));
          } else if (stationName === "JNSMS") {
            fjLonLatJson = JSON.parse(JSON.stringify(fjSMSLonLatJson));
          }

          let wtArray = JSON.parse(JSON.stringify(wsRes.windMachineList));
          this.isFakeData = true;

          fjLonLatJson.data.forEach((e) => {
            let fjItem =
              wtArray.find((findEle) => {
                return findEle.fjbh === e.fjbh;
              }) || {};
            const fjMix = Object.assign({}, e, fjItem);
            fjMix.status = this.getStatus(fjMix.fjzt);
            e = fjMix;

            this.showStatuswind(viewer, e);
          });
          this.fjLonLatJsonArr = fjLonLatJson;

          this.fakeDataTimmer = setInterval(() => {
            // viewer.entities.removeAll();
          }, 5000);
        },
      });

      webSocketService.on("message", (res) => {
        if (stationName === "MYFDC") {
          fjLonLatJson = fjMYLonLatJson;
        } else if (stationName === "JNWHZ") {
          fjLonLatJson = fjWHZLonLatJson;
        } else if (stationName === "JNYPL") {
          fjLonLatJson = fjYPLLonLatJson;
        } else if (stationName === "JNSMS") {
          fjLonLatJson = fjSMSLonLatJson;
        }

        let wtArray = res.windMachineList;

        fjLonLatJson.data.forEach((e, index) => {
          let fjItem =
            wtArray.find((findEle) => {
              return findEle.fjbh === e.fjbh;
            }) || {};
          const fjMix = Object.assign({}, e, fjItem);
          e = fjMix;

          this.showStatuswind(viewer, e);
        });

        this.fjLonLatJsonArr = fjLonLatJson;
      });

      this.resetWindViewport();
    },

    getWsUrl(stationName) {
      let wsurl = "";
      if (stationName === "MYFDC") {
        wsurl = "HZMY";
      } else if (stationName === "JNWHZ") {
        wsurl = "DHWH";
      } else if (stationName === "JNYPL") {
        wsurl = "DHYP";
      } else if (stationName === "JNSMS") {
        wsurl = "DHSM";
      }
      return wsurl;
    },

    getStatus(sName) {
      let status = 0;
      if (/待机/.test(sName)) {
        status = 1;
      } else if (/故障/.test(sName)) {
        status = 2;
      } else if (/检修/.test(sName)) {
        status = 3;
      } else if (/限电/.test(sName)) {
        status = 4;
      } else if (/离线/.test(sName)) {
        status = 5;
      } else if (/受累/.test(sName)) {
        status = 6;
      } else if (/并网/.test(sName)) {
        status = 7;
      }
      return status;
    },

    // 根据状态展示不同颜色风机贴图
    showStatuswind(viewer, e) {
      this.addModel(
        viewer,
        e.fjbh,
        e.longitude,
        e.latitude,
        e.status,
        e.height || 0,
        e
      );
    },
    //给模型上描边
    getWtStatue(code, type) {
      if (code === 1) {
        //待机
        // return "#05bb4c";
        return type === "color" ? "#05bb4c" : type === "en" ? "dj" : "待机";
      } else if (code === 2) {
        //故障
        // return "#d83238";
        return type === "color" ? "#d83238" : type === "en" ? "gz" : "故障";
      } else if (code === 3) {
        //检修
        // return "#ff8300";
        return type === "color" ? "#ff8300" : type === "en" ? "jx" : "检修";
      } else if (code === 4) {
        //限电
        // return "#c732ca";
        return type === "color" ? "#c732ca" : type === "en" ? "xd" : "限电";
      } else if (code === 5) {
        //离线
        // return "#6f7881";
        return type === "color" ? "#6f7881" : type === "en" ? "lx" : "离线";
      } else if (code === 6) {
        //受累
        // return "#cbd1d7";
        return type === "color" ? "#cbd1d7" : type === "en" ? "sl" : "受累";
      } else {
        //并网
        // return "#42a7f9";
        return type === "color" ? "#42a7f9" : type === "en" ? "bw" : "并网";
      }
    },
    addTreeain(viewer, mountainMsg) {
      const hpRoll = new Cesium.HeadingPitchRoll(90.0, 0.0, 0.0);
      const position = Cesium.Cartesian3.fromDegrees(
        mountainMsg.longitude,
        mountainMsg.latitude,
        mountainMsg.height || 0
      );

      const orientation = Cesium.Transforms.headingPitchRollQuaternion(
        position,
        hpRoll
      );

      const offsetLocal = new Cesium.Cartesian3(
        mountainMsg.east,
        mountainMsg.north,
        mountainMsg.up
      ); // E, N, U

      const transform = Cesium.Transforms.eastNorthUpToFixedFrame(position);
      const offsetGlobal = new Cesium.Cartesian3();
      Cesium.Matrix4.multiplyByPointAsVector(
        transform,
        offsetLocal,
        offsetGlobal
      );

      const finalPos = Cesium.Cartesian3.add(
        position,
        offsetGlobal,
        new Cesium.Cartesian3()
      );

      const terrain = viewer.entities.add({
        name: mountainMsg.modelName, // 模型名称
        position: finalPos, // 模型位置
        orientation, // 模型朝向
        animation: false,
        model: {
          uri: `/static/model/dixing/${mountainMsg.modelNameEn}.glb`,
          // uri: "/static/model/dixing/terrain.glb",
          scale: mountainMsg.scale,
          // 模型贴地
          heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
        },
      });
    },

    //添加模型
    addModel(viewer, name, lon, lat, status, height, model) {
      let that = this;

      const hpRoll = new Cesium.HeadingPitchRoll(45.0, 0.0, 0.0);
      const position = Cesium.Cartesian3.fromDegrees(lon, lat, height || 0);
      const orientation = Cesium.Transforms.headingPitchRollQuaternion(
        position,
        hpRoll
      );

      const statueColor = this.getWtStatue(status, "color");
      const statueFJ = this.getWtStatue(status, "en");
      const statueZh = this.getWtStatue(status, "zh");

      const entity = viewer.entities.add({
        name, // 模型名称
        position, // 模型位置
        orientation, // 模型朝向
        animation: false,
        model: {
          uri: `/static/model/fjStatus/fj_${statueFJ}.glb`,
          scale: 0.5,
          // 模型贴地
          heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
          // heightReference: Cesium.HeightReference.NONE,
          silhouetteSize: 1,
          silhouetteColor: Cesium.Color.fromCssColorString(statueColor),
          minimumPixelSize: 75,
          // maximumScale:0.5
          //   runAnimations: wtStatue !== 7 ? false : true,
        },
        label: {
          text: name,
          font: "14px sans-serif",
          fillColor: Cesium.Color.fromBytes(255, 255, 255),
          heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
        },
      });

      const btn = document.getElementById("windBtn");

      btn.addEventListener("click", function (event) {
        entityxy.show = !entityxy.show;
      });

      //   viewer.camera.moveEnd.addEventListener(() => {
      //     // 获取相机的笛卡尔3D坐标
      //     const position = viewer.camera.position;

      //     // 将笛卡尔坐标转换为地理坐标（弧度）
      //     const cartographic = Cesium.Cartographic.fromCartesian(position);

      //     // 高度（以米为单位）
      //     // 注意：这个高度是相对于WGS84椭球体的高度，不是海拔高度（MSL）
      //     const height = Cesium.Math.toDegrees(cartographic.height);
      //     if (height > 3000000) {
      //       entityxy.show = false;
      //       console.log("entityxy false", entityxy.show);
      //     }
      //     if (height < 3000000) {
      //       entityxy.show = true;
      //       console.log("entityxy true", entityxy.show);
      //     }
      //     // 强制请求一次场景重绘
      //     if (viewer && viewer.scene) {
      //       viewer.scene.requestRender();
      //     }
      //     console.log("相机高度 (椭球体高):", height, "米");
      //   });

      // 创建事件处理器
      const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
      handler.setInputAction(function (movement) {
        var position = movement.position;
        var pickedObject = viewer.scene.pick(position);
        if (pickedObject && pickedObject.id === entity) {
          console.log("你点击了标签或模型！", entity);
          // console.log("标签或模型数据！", val);
          that.modelVal = model;
          // 找到实体，显示包含实体信息的弹框
          that.showRightClickPopup(position, model);
          return;
        }
      }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);

      // 使用高级灯牌生成器
      const advancedGenerator = new AdvancedBillboardGenerator();

      let statusItems = [
        {
          label: "功率",
          value: `${
            this.isFakeData
              ? this.randomNum(100, 1000)
              : model.actualPower.toFixed(2)
          }MW`,
        },
        {
          label: "风速",
          value: `${
            this.isFakeData
              ? this.randomNum(100, 1000)
              : model.windSpeed.toFixed(1)
          }m/s`,
        },
        {
          label: "转速",
          value: `${
            this.isFakeData
              ? this.randomNum(100, 1000)
              : model.rotateSpeed.toFixed(1)
          }p`,
        },
      ];

      const billboardImage = advancedGenerator.generateAdvancedBillboard({
        title: name,
        statusItems,
        borderGradient: ["#ccc", "#ccc"],
        backgroundColor: "transparent",
        padding: 6,
        titleHeight: 22,
        itemHeight: 17,
        titleColor: "#1890ff",
        titleStrokeStyle: "#000",
        titleStrokeWidth: 1,
        labelStrokeStyle: "#000",
        labelStrokeWidth: 1,
        valueStrokeStyle: "#000",
        valueStrokeWidth: 1,
      });

      let entityxy =
        this.entityxyArray.find((findEle) => {
          return findEle.fjbh === model.fjbh;
        }) || null;

      if (entityxy) {
        entityxy.billboard.image._value = billboardImage;
      } else {
        entityxy = viewer.entities.add({
          name,
          position,
          billboard: {
            image: billboardImage,
            scale: 1,
            verticalOrigin: Cesium.VerticalOrigin.BOTTOM, // 原来已经是CENTER，现在改为BOTTOM
            pixelOffset: new Cesium.Cartesian2(80, -50), // 原来是-20，现在改为30，向上移动
            eyeOffset: new Cesium.Cartesian3(0, 0, 0), // 保持固定大小
            heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
            scaleByDistance: new Cesium.NearFarScalar(
              6000, // 5010米内
              1.2, // 1倍大小
              9000, // 10000米外
              1 // 0.1倍大小
            ),

            // 透明度渐变
            // translucencyByDistance: new Cesium.NearFarScalar(
            //   6000, // 500米内
            //   1.0, // 完全不透明
            //   9000, // 3000米外
            //   0.5 // 完全透明
            // ),
          },
        });

        entityxy.fjbh = model.fjbh;
        this.entityxyArray.push(entityxy);
      }
    },

    // 右键展示元素
    showRightClickPopup(screenPosition, val) {
      // 创建或获取弹框元素
      var popup = document.getElementById("rightClickPopup");
      if (!popup) {
        popup = document.createElement("div");
        popup.id = "rightClickPopup";
        popup.style.position = "absolute";
        // popup.style.backgroundColor = 'white';
        popup.style.border = "1px solid rgba(255, 255, 255, 0.2)";
        popup.style.borderRadius = "4px";
        popup.style.padding = "10px";
        popup.style.boxShadow = "0 2px 10px rgba(0,0,0,0.2)";
        popup.style.backdropFilter = `blur(10px)`;
        popup.style.zIndex = "1000";
        popup.style.pointerEvents = "auto"; // 确保弹框可交互
        // 添加一个最小宽度，避免内容过短
        popup.style.minWidth = "100px";
        // 可选：添加箭头指向点击点
        // 这需要更复杂的 CSS 或额外的 DOM 元素
        document.body.appendChild(popup);
      }
      // <span class="popup-menu-item" data-message-type="model" style="cursor:pointer">模型解构</span>
      let content = `
                <div style="display: flex;gap: 10px;flex-direction: column;text-align: center;color: #fff">
                    <span class="popup-menu-item" data-message-type="basic" style="cursor:pointer">基本信息</span>
                    <span class="popup-menu-item" data-message-type="video" style="cursor:pointer">视频监控</span>
                    <span class="popup-menu-item" data-message-type="problem" style="cursor:pointer">故障详情</span>
                    <span class="popup-menu-item" data-message-type="third" style="cursor:pointer">模型解构</span>
                </div>
            `;

      // 设置弹框内容
      popup.innerHTML = content;

      // --- 关键修正：准确计算弹框位置 ---

      // 1. 获取 Cesium 画布 (Canvas) 相对于视口 (viewport) 的位置
      var canvas = this.viewer.scene.canvas;
      var canvasRect = canvas.getBoundingClientRect();
      // console.log('Canvas Rect:', canvasRect); // 调试用

      // 2. 计算弹框左上角在页面中的绝对 X 坐标
      //    screenPosition.x 是相对于画布左上角的 X 偏移
      //    canvasRect.left 是画布左上角相对于浏览器视口左上角的 X 偏移
      //    window.pageXOffset 是页面水平滚动的距离
      var popupLeft = canvasRect.left + screenPosition.x + window.pageXOffset;

      // 3. 计算弹框左上角在页面中的绝对 Y 坐标
      var popupTop = canvasRect.top + screenPosition.y + window.pageYOffset;

      // --- 可选：添加偏移量，避免完全覆盖鼠标指针 ---
      // 例如，向下和向右偏移 10px
      var offsetX = 10;
      var offsetY = 10;
      popupLeft += offsetX;
      popupTop += offsetY;

      // --- 可选：边界检查，防止弹框超出屏幕 ---
      var popupWidth = popup.offsetWidth || 150; // 确保有宽度
      var popupHeight = popup.offsetHeight || 50; // 确保有高度
      var windowWidth = window.innerWidth;
      var windowHeight = window.innerHeight;

      // 如果弹框右边会超出窗口，则左移
      if (popupLeft + popupWidth > windowWidth) {
        popupLeft = windowWidth - popupWidth - 10; // 靠右留 10px 边距
      }
      // 如果弹框底边会超出窗口，则上移
      if (popupTop + popupHeight > windowHeight) {
        popupTop = windowHeight - popupHeight - 10; // 靠下留 10px 边距
      }
      // 如果左边超出 (不太可能，但安全起见)
      if (popupLeft < 0) popupLeft = 10;
      // 如果顶边超出
      if (popupTop < 0) popupTop = 10;

      // --- 设置最终位置 ---
      popup.style.left = popupLeft + "px";
      popup.style.top = popupTop + "px";

      // console.log('Popup Position:', { left: popupLeft, top: popupTop }); // 调试用

      // 显示弹框
      popup.style.display = "block";

      // --- 隐藏弹框的逻辑 (保持不变) ---
      function hidePopup(event) {
        // 检查点击是否发生在弹框内部，如果是，则不隐藏
        if (event && popup.contains(event.target)) {
          return;
        }
        popup.style.display = "none";
        document.removeEventListener("click", hidePopup);
        document.removeEventListener("keydown", keyDownHandler);
      }

      function keyDownHandler(event) {
        if (event.key === "Escape") {
          hidePopup();
        }
      }

      let that = this;
      that.showBasicMsg = false;
      that.showVideoMsg = false;
      that.showProblemMsg = false;
      that.showModelMsg = false;
      function popupMenuItemClick(event) {
        // 检查点击的是否是菜单项
        if (event.target.classList.contains("popup-menu-item")) {
          event.stopPropagation(); // 阻止冒泡，防止弹框立即关闭

          var messageType = event.target.dataset.messageType; // 获取 data-message-type
          console.log("点击了菜单项:", messageType);

          // 调用您的 showMessage 函数
          that.showMessage(messageType, val);
          hidePopup();

          // 可选：执行后关闭弹框
          // hideRightClickPopup();
        }
      }

      // 移除旧的监听器（避免重复绑定）
      document.removeEventListener("click", hidePopup);
      document.removeEventListener("click", popupMenuItemClick);
      document.removeEventListener("keydown", keyDownHandler);

      // 添加新的监听器
      document.addEventListener("click", hidePopup);
      document.addEventListener("click", popupMenuItemClick);
      document.addEventListener("keydown", keyDownHandler);
    },
    showMessage(type, val) {
      console.log("type===>>>", type);
      this.windDrawer = true;
      this.windDrawerHeader = val.name + "数据详情";
      if (type === "basic") {
        this.windDrawerTitle = "基础信息";
        this.showBasicMsg = true;
      } else if (type === "video") {
        this.windDrawerTitle = "视频监控";
        this.showVideoMsg = true;
      } else if (type === "problem") {
        this.windDrawerTitle = "故障查看";
        this.showProblemMsg = true;
      } else if (type === "third") {
        this.windDrawerHeader = `${val.name}部件查询解构`;
        this.windDrawerTitle = "模型解构";
        this.showModelMsg = true;
      }
    },
    showwindmodel() {
      this.windDrawer = true;
      this.showBasicMsg = false;
      this.showVideoMsg = false;
      this.showProblemMsg = false;
      this.windDrawerHeader = "风机模型可视化解构说明";
      this.showModelMsg = true;
    },
    handleClose() {
      this.windDrawer = false;
      this.showBasicMsg = false;
      this.showVideoMsg = false;
      this.showProblemMsg = false;
      this.showModelMsg = false;
    },
    showComDia(val) {
      this.showcomModelDia = val;
      this.modelVal = null;
    },

    randomNum(minNum, maxNum) {
      switch (arguments.length) {
        case 1:
          return parseInt(Math.random() * minNum + 1, 10);
        case 2:
          return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
        default:
          return 0;
      }
    },

    csceneElliposid(viewer) {
      let that = this;
      // 获取 scene 和 ellipsoid
      var scene = viewer.scene;
      var labels = viewer.scene.primitives.add(new Cesium.LabelCollection());

      // 创建 ScreenSpaceEventHandler
      var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);

      // 监听左键点击事件
      handler.setInputAction(async (click) => {
        // 获取点击位置的笛卡尔坐标
        var position = click.position;
        if (!position) return;

        // 使用 globe.pick 获取包含地形高度的坐标
        var ray = viewer.camera.getPickRay(position);
        var cartesian = viewer.scene.globe.pick(ray, viewer.scene);

        if (cartesian) {
          // 转换为地理坐标
          var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
          var longitude = Cesium.Math.toDegrees(cartographic.longitude);
          var latitude = Cesium.Math.toDegrees(cartographic.latitude);
          var height = cartographic.height;

          // 格式化坐标
          var text = `经度: ${longitude.toFixed(6)}°\n纬度: ${latitude.toFixed(
            6
          )}°`;

          // 创建一个标签
          var label = labels.add({
            position: cartesian,
            text: text,
            font: "14px monospace",
            fillColor: Cesium.Color.fromCssColorString("#1d70df"),
            // style: Cesium.LabelStyle.FILL_AND_OUTLINE,
            // outlineColor: Cesium.Color.BLACK,
            outlineWidth: 2,
            verticalOrigin: Cesium.VerticalOrigin.BOTTOM, // 标签在点的上方
            pixelOffset: new Cesium.Cartesian2(0, -20), // 向上偏移一点
            disableDepthTest: true, // 让标签始终可见（即使在地球背面）
            scale: 0.8,
          });

          // 5秒后移除标签
          setTimeout(function () {
            labels.remove(label);
          }, 5000);

          console.log(
            `点击坐标: ${longitude.toFixed(6)}, ${latitude.toFixed(
              6
            )}, ${height.toFixed(2)}m`
          );
        }
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
    },
    generateUniqueId(prefix = "id") {
      let idCounter = 0;
      return `${prefix}-${Date.now()}-${Math.random()
        .toString(36)
        .substr(2, 9)}-${idCounter++}`;
    },
    handleInitView() {
      if (this.showWindDetail) {
        this.resetWindViewport();
      } else {
        this.resetAllStationViewport();
      }
    },
    // 重置所有风场视角
    resetAllStationViewport() {
      this.viewer.camera.flyTo({
        destination: Cesium.Cartesian3.fromDegrees(
          114.502778,
          35.326667,
          3000000
        ),
        orientation: {
          heading: Cesium.Math.toRadians(0),
          pitch: Cesium.Math.toRadians(-90),
          roll: 0.0,
        },
        duration: 3.0,
      });
    },
    // 重置风场中所有风机视角
    resetWindViewport() {
      let fromLon = this.$route.query.longitude * 1;
      let fromLat = this.$route.query.latitude * 1;
      let fromheight = this.$route.query.height * 1;
      let fromname = this.$route.query.nameEn;
      // 设置镜头到指定的经纬度（度）、高度（米）
      this.viewer.camera.setView({
        destination: Cesium.Cartesian3.fromDegrees(
          fromLon, // 经度 (degrees)
          fromLat, // 纬度 (degrees)
          fromheight // 高度 (meters)
        ),
        orientation: {
          heading: Cesium.Math.toRadians(0.0), // 偏航角 (方向，0 指向北方)
          pitch: Cesium.Math.toRadians(-90.0), // 俯仰角 (-90 是垂直向下)
          roll: 0.0, // 翻滚角
        },
      });

      // 目标位置：经度、纬度、高度
      //   const targetLon = 107.034945;
      //   const targetLat = 37.309099;
      let targetLon = null;
      let targetLat = null;
      this.restLatLon.forEach((it) => {
        if (it.name === fromname) {
          targetLon = it.longitude;
          targetLat = it.latitude;
        }
      });
      const targetHeight = 5000;

      const draggableHeightTolerance = 5000; // 允许拖拽的高度范围：20,000 ~ 30,000
      const minHeight = 500; // 最低高度
      const maxHeight = 10000; // 最高高度

      const allowedOffsetDegrees = 2; // 允许拖拽的最大偏移（经纬度）

      const Lat3d = targetLat - 0.3;

      const minLon = targetLon - allowedOffsetDegrees;
      const maxLon = targetLon + allowedOffsetDegrees;
      const minLat = Lat3d - allowedOffsetDegrees;
      const maxLat = Lat3d + allowedOffsetDegrees;

      let that = this;
      that.viewer.camera.flyTo({
        destination: Cesium.Cartesian3.fromDegrees(
          targetLon,
          Lat3d,
          targetHeight
        ),
        // orientation: {
        //     heading: Cesium.Math.toRadians(0),
        //     pitch: Cesium.Math.toRadians(-90),
        //     roll: 0.0,
        // },
        orientation: {
          heading: 0, //北京天安门角度 0 上海角度 1
          pitch: -0.3,
          roll: 0,
        },
        duration: 3.0,
        // complete: function () {
        //   console.log("飞入完成，启用拖拽限制逻辑");
        //   enableHeightBasedDragControl();
        // },
      });
      // ===== 控制逻辑：根据高度决定是否允许拖拽 =====
      function enableHeightBasedDragControl() {
        that.viewer.scene.preUpdate.addEventListener(function (scene, time) {
          const camera = that.viewer.camera;
          const posCartographic = camera.positionCartographic;

          if (!posCartographic) return;

          const currentHeight = posCartographic.height;
          that.currentHeight = currentHeight;
          const currentLon = Cesium.Math.toDegrees(posCartographic.longitude);
          const currentLat = Cesium.Math.toDegrees(posCartographic.latitude);

          // === 第一步：限制相机高度不能超出 [10000, 100000] ===
          if (currentHeight < minHeight) {
            // 强制拉高到 minHeight，但保持当前水平视角
            const newPos = Cesium.Cartesian3.fromDegrees(
              currentLon,
              currentLat,
              minHeight
            );
            camera.setView({
              destination: newPos,
              orientation: {
                heading: camera.heading,
                pitch: camera.pitch,
                roll: camera.roll,
              },
            });
            return; // 避免后续逻辑冲突
          }

          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;
          }
          // if (currentHeight < (maxHeight-700000)) {
          //     that.cancleAllLayer();
          // }

          // === 第二步：判断是否在“可拖拽高度区间” ===
          const isInDraggableRange =
            currentHeight >= targetHeight - draggableHeightTolerance &&
            currentHeight <= targetHeight + draggableHeightTolerance;

          if (isInDraggableRange) {
            // ✅ 允许拖拽，但限制在指定范围内
            const correctedLon = Cesium.Math.clamp(currentLon, minLon, maxLon);
            const correctedLat = Cesium.Math.clamp(currentLat, minLat, maxLat);

            if (
              Math.abs(correctedLon - currentLon) > 1e-8 ||
              Math.abs(correctedLat - currentLat) > 1e-8
            ) {
              // 越界了，纠正位置，保留当前高度和视角
              camera.setView({
                destination: Cesium.Cartesian3.fromDegrees(
                  correctedLon,
                  correctedLat,
                  currentHeight
                ),
                orientation: {
                  heading: camera.heading,
                  pitch: camera.pitch,
                  roll: camera.roll,
                },
              });
            }
          } else {
            // ❌ 不在可拖拽高度：禁止平移，强制回正到目标点
            const correctedPosition = Cesium.Cartesian3.fromDegrees(
              targetLon,
              targetLat,
              currentHeight // 保留当前缩放高度
            );

            camera.setView({
              destination: correctedPosition,
              orientation: {
                heading: camera.heading,
                pitch: camera.pitch,
                roll: camera.roll,
              },
            });
          }
        });
      }
    },
    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: 500,
          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("/static" + it.path);
      });
      this.showeveryTypeImagesLayer(
        imageUrls,
        this.cloudintervalId,
        this.cloudImagesLayer
      );
    },
    //显示降雨图
    showRainLayer() {
      const imageUrls = [];
      rainJson.forEach((it) => {
        imageUrls.push("/static" + it.path);
      });
      this.showeveryTypeImagesLayer(
        imageUrls,
        this.rainintervalId,
        this.rainImagesLayer
      );
      this.csceneElliposid(this.viewer, "rain");
    },
    //显示温度图
    showTemperatureLayer() {
      const imageUrls = [];
      tempJson.forEach((it) => {
        imageUrls.push("/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: "/",
      });
    },
    menuComTSty(val) {
      this.menuComTStyB = val;
    },
  },
};
</script>

<style lang="less" scoped>
.dataLoading {
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
  position: fixed;
  .loadText {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.7);
    padding: 15px 20px;
    border-radius: 6px;
    color: black;
    font-size: 14px;
    font-weight: bold;
  }
}
.mapBox {
  width: 100%;
  height: 100%;
  position: relative;
  box-sizing: content-box;
  overflow: hidden;

  .menuComT {
    position: fixed;
    bottom: 400px;
    left: 20px;
  }
  .menuComTSty {
    position: fixed;
    bottom: 20px;
    left: 20px;
  }
}
</style>
<style lang="less">
.el-overlay {
  background-color: transparent !important;
  .windModelDrawer {
    width: 80% !important;
    backdrop-filter: blur(15px) !important;
    background: rgba(255, 255, 255, 0.8) !important;
    border-radius: 10px 0 0 10px !important;
    .el-drawer__body {
      overflow: hidden;
      padding-top: 0;
    }
  }
}
.windDrawerCla {
  .line {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 10px;

    .leftContent {
      width: 242px;
      height: 41px;
      display: flex;
      align-items: center;
      background: url("@/assets/cesiumImg/title_left_bg.png") no-repeat;

      span {
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #ffffff;
        margin-left: 25px;
      }
    }
  }
  .jcxx,
  .gzck {
    height: 100%;
  }
  .spjk,
  .third {
    height: 80vh;
  }
}
</style>