src/components/timeControl/index.vue

@@ -0,0 +1,153 @@
+<template>
+  <div class="timeControlBox">
+    <el-slider
+      v-model="sTimeRange"
+      :min="0"
+      :max="sliderMax"
+      size="small"
+      placement="bottom"
+      range
+      :marks="marks"
+      :format-tooltip="sliderFormatTooltip"
+      @input="sliderChange"
+    />
+    <el-progress
+      class="timeControlProgress"
+      :style="`left:${progressLeft}%; width:${progressWidth}%`"
+      :text-inside="true"
+      striped
+      striped-flow
+      indeterminate
+      :duration="80"
+      :stroke-width="6"
+      :percentage="percentage"
+      :format="progressFormat"
+    />
+  </div>
+</template>
+
+<script>
+import cloud 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 windJson from "/public/static/exportData/wind/layer.json";
+
+export default {
+  props: {
+    mode: {
+      type: String,
+      default: () => {
+        return "";
+      },
+    },
+  },
+
+  data() {
+    return {
+      sTimeRange: [0, 0],
+      sliderMax: 0,
+      progressLeft: 0,
+      progressWidth: 100,
+      percentage: 0,
+      marks: {},
+      cloudJson: [],
+      setpLeft: 0,
+    };
+  },
+
+  created() {
+    this.cloudJson = cloud.reverse();
+    this.controlMode = this.mode || "";
+    this.sliderMax = this.cloudJson.length - 1;
+    this.sTimeRange = [0, this.sliderMax];
+    let marks = {};
+    this.cloudJson.forEach((ele, index) => {
+      if (index % 2 === 0) {
+        marks[index] = ele.date.split(" ")[1];
+      }
+    });
+    this.marks = marks;
+
+    let [setpLeft, setpRight] = this.sTimeRange;
+
+    // setInterval(() => {
+    //   if (setpLeft > setpRight) {
+    //     setpLeft = 0;
+    //   }
+    //   let p = parseInt(((setpLeft + 1) / (setpRight + 1)) * 100);
+    //   this.percentage = p >= 100 ? 100 : p;
+    //   setpLeft++;
+    //   this.setpLeft = setpLeft;
+    // }, 500);
+  },
+
+  methods: {
+    sliderFormatTooltip(value) {
+      let descStr = "";
+      if (value === this.sTimeRange[0]) {
+        descStr = "起始时间: ";
+      } else if (value === this.sTimeRange[1]) {
+        descStr = "截止时间: ";
+      }
+      return `${descStr}${this.cloudJson[value].date}`;
+    },
+
+    progressFormat() {
+      return this.cloudJson[this.setpLeft].date;
+    },
+
+    sliderChange(value) {
+      this.progressLeft = parseFloat((value[0] / (cloudJson.length - 1)) * 100);
+      this.progressWidth =
+        (value[1] / (cloudJson.length - 1)) * 100 - this.progressLeft;
+    },
+  },
+
+  watch: {
+    mode(val) {
+      this.controlMode = val;
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.timeControlBox {
+  position: relative;
+  width: 100%;
+
+  .timeControlProgress {
+    position: absolute;
+    top: 9px;
+    user-select: none;
+    pointer-events: none;
+  }
+}
+</style>
+
+<style lang="less">
+.timeControlBox {
+  .el-slider__marks {
+    .el-slider__marks-text {
+      color: #e4e7ed;
+      text-shadow: 2px 2px 0 #000;
+    }
+  }
+
+  .el-progress-bar__outer {
+    overflow: visible;
+  }
+
+  .el-progress-bar__innerText {
+    background: #303133;
+    font-size: 12px;
+    padding: 5px 10px;
+    border-radius: 8px;
+    margin: 0;
+  }
+
+  .el-slider__bar {
+    background: transparent;
+  }
+}
+</style>

src/views/cesium.vue

@@ -78,6 +78,7 @@
       @showDetail="menuComTSty"
       @backStations="backStations"
     />
+    <timeControl class="timeControl" :mode="controlMode" />
   </div>
 </template>
 
@@ -136,6 +137,7 @@ import bwshan from "@/assets/windimgs/fanSvg/bwshan.png";
 import windHome from "@/components/windHome/index.vue";
 import windPro from "@/components/windProDetail/windProblem.vue";
 import cesiumwindView from "./cesiumComponents/cesiumwindView.vue";
+import timeControl from "@/components/timeControl/index.vue";
 
 export default {
   name: "CesiumMap",
@@ -146,6 +148,7 @@ export default {
     windHome,
     windPro,
     cesiumwindView,
+    timeControl,
   },
 
   data() {
@@ -227,6 +230,7 @@ export default {
       allWindEntitys: [],
       showTypeViewer: true,
       stationValue: ["Wind", "Fire", "Solar", "Storage"],
+      controlMode: "",
     };
   },
   created() {
@@ -274,12 +278,16 @@ export default {
     },
     coverOnChange(val) {
       if (val.value === "风场") {
+        this.controlMode = "wind";
         this.switchWindLayer(val.check);
       } else if (val.value === "云层") {
+        this.controlMode = "cloud";
         this.switchCloudLayer(val.check);
       } else if (val.value === "降雨") {
+        this.controlMode = "rain";
         this.switchRainLayer(val.check);
       } else if (val.value === "温度") {
+        this.controlMode = "tmp";
         this.switchTemperatureLayerr(val.check);
       }
     },
@@ -395,22 +403,20 @@ export default {
       viewer.cesiumWidget.creditContainer.style.display = "none";
       viewer.scene.globe.baseColor = Cesium.Color.BLACK;
       // 禁用 Viewer 默认的双击缩放
-        viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(
-            Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK
-        );
-        // 设置相机离地表的最小距离（单位：米）
-        viewer.scene.screenSpaceCameraController.minimumZoomDistance = 100000;
-
-        
+      viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(
+        Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK
+      );
+      // 设置相机离地表的最小距离（单位：米）
+      viewer.scene.screenSpaceCameraController.minimumZoomDistance = 100000;
 
       this.viewer = viewer;
 
       // this.setMapImageryProvider();
-        // this.initCesiumTerrain();
+      // this.initCesiumTerrain();
       this.initCesiumBaseMapImage();
       //   this.switchWindLayer();
       this.showAllStation(viewer, allStationJson.station);
-        this.initGeoJsonData(); 
+      this.initGeoJsonData();
     },
 
     // 初始化地形
@@ -458,9 +464,9 @@ export default {
     // 初始化底图
     async initCesiumBaseMapImage() {
       const imageryProvider = await new Cesium.UrlTemplateImageryProvider({
-        // url: "https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}", 
+        // url: "https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
         // url: "http://localhost:3007/tiles/map/{z}/{x}/{y}",
-        // url: "/static/ditu/{z}/{x}/{y}.png", 
+        // url: "/static/ditu/{z}/{x}/{y}.png",
         url:
           import.meta.env.VITE_APP_ENV_NAME === "dev"
             ? "https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}"
@@ -981,43 +987,42 @@ export default {
     },
 
     initresetViewport() {
-    //   this.resetViewport1();
+      //   this.resetViewport1();
     },
     // 城市视角重置视角
     resetViewport(height = 0, callback) {
       // 设置初始视图为宁夏
       const that = this;
-      const isFirstVisit = !sessionStorage.getItem('hasVisitedMap');
+      const isFirstVisit = !sessionStorage.getItem("hasVisitedMap");
       if (isFirstVisit) {
         this.viewer.camera.flyTo({
-            destination: Cesium.Cartesian3.fromDegrees(
+          destination: Cesium.Cartesian3.fromDegrees(
             //北京
             116.391586,
             39.898832,
             height || 500
-            ),
-            duration: 3,
-            complete() {
+          ),
+          duration: 3,
+          complete() {
             // 为什么要加这个？因为破库地球没完全加载完成时如果执行了监听鼠标滑动事件会光速报错滑跪
             if (!that.loadDone) {
-                that.initEventInputAction();
-                that.loadDone = true;
+              that.initEventInputAction();
+              that.loadDone = true;
             }
             callback && callback();
-            },
+          },
         });
-        sessionStorage.setItem('hasVisitedMap', 'true');
+        sessionStorage.setItem("hasVisitedMap", "true");
       } else {
         this.viewer.camera.setView({
-            destination: Cesium.Cartesian3.fromDegrees(
-                116.391586,
-                39.898832,
-                height || 500
-            ),
-            duration: 3,
+          destination: Cesium.Cartesian3.fromDegrees(
+            116.391586,
+            39.898832,
+            height || 500
+          ),
+          duration: 3,
         });
       }
-      
     },
     resetViewport1(height = 0) {
       // 设置初始视图为宁夏
@@ -1640,12 +1645,17 @@ export default {
           // 模型贴地
           heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
 
-          rotation: e.energytype === "Wind" ? new Cesium.CallbackProperty(function (time) {
-            // 每 3 秒转一圈（可调速度）
-            const seconds = time.secondsOfDay;
-            const angle = Cesium.Math.toRadians(((seconds % 3) * -360) / 3); // 每3秒一圈
-            return angle;
-          }, false) : null,
+          rotation:
+            e.energytype === "Wind"
+              ? new Cesium.CallbackProperty(function (time) {
+                  // 每 3 秒转一圈（可调速度）
+                  const seconds = time.secondsOfDay;
+                  const angle = Cesium.Math.toRadians(
+                    ((seconds % 3) * -360) / 3
+                  ); // 每3秒一圈
+                  return angle;
+                }, false)
+              : null,
           // 确保绕中心旋转
           rotationAlignment: Cesium.HeightReference.CENTER,
           alignedAxis: Cesium.Cartesian3.UNIT_Z,
@@ -1674,26 +1684,26 @@ export default {
         }
       }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
 
-        handler.setInputAction(function(movement) {
-                var position = movement.position;
-                var pickedObject = viewer.scene.pick(position);
-                if (pickedObject && pickedObject.id.id === index) {
-                    console.log("你双击了模型！", entity);
-
-                    const position1 = entity.position.getValue(Cesium.JulianDate.now());
-                    const cartographic = Cesium.Cartographic.fromCartesian(position1);
-                    const height = 100000.0; // 自定义高度（单位：米）
-
-                    viewer.camera.flyTo({
-                        destination: Cesium.Cartesian3.fromRadians(
-                            cartographic.longitude,
-                            cartographic.latitude,
-                            cartographic.height + height
-                        ),
-                        duration: 1.0
-                    });
-                }
-        }, Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
+      handler.setInputAction(function (movement) {
+        var position = movement.position;
+        var pickedObject = viewer.scene.pick(position);
+        if (pickedObject && pickedObject.id.id === index) {
+          console.log("你双击了模型！", entity);
+
+          const position1 = entity.position.getValue(Cesium.JulianDate.now());
+          const cartographic = Cesium.Cartographic.fromCartesian(position1);
+          const height = 100000.0; // 自定义高度（单位：米）
+
+          viewer.camera.flyTo({
+            destination: Cesium.Cartesian3.fromRadians(
+              cartographic.longitude,
+              cartographic.latitude,
+              cartographic.height + height
+            ),
+            duration: 1.0,
+          });
+        }
+      }, Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
 
       that.allStationentitys.push({ entity, handler });
     },
@@ -1983,7 +1993,12 @@ export default {
     },
     showMessage(type, val, viewer) {
       console.log("type===>>>", type);
-      if (type !== "windbasic2d" && type !== "windbasic3d" && type !== "windReport" && type !== "drawPlot") {
+      if (
+        type !== "windbasic2d" &&
+        type !== "windbasic3d" &&
+        type !== "windReport" &&
+        type !== "drawPlot"
+      ) {
         this.windDrawer = true;
         this.windDrawerHeader = val.name + "数据详情";
 
@@ -2009,15 +2024,19 @@ export default {
         // this.showWindFromStation(viewer);
         this.showTypeViewer = false;
         this.cancleAllLayer();
-        if (type === "windbasic2d" || type === "windbasic3d" || type === "drawPlot") {
-            this.getCameraPosition(viewer, type, val);
+        if (
+          type === "windbasic2d" ||
+          type === "windbasic3d" ||
+          type === "drawPlot"
+        ) {
+          this.getCameraPosition(viewer, type, val);
         } else if (type === "windReport") {
-            this.$router.push({
-                path: "/windReport",
-                query: {
-                    nameEn: val.stationNameEn
-                },
-            });
+          this.$router.push({
+            path: "/windReport",
+            query: {
+              nameEn: val.stationNameEn,
+            },
+          });
         }
       }
       //  else {
@@ -2045,7 +2064,12 @@ export default {
         // return { longitude, latitude, height };
 
         this.$router.push({
-          path: type === "windbasic2d" ? "/windMap2D" : type === "windbasic3d" ? "/windMap3D" : "/drawPlot",
+          path:
+            type === "windbasic2d"
+              ? "/windMap2D"
+              : type === "windbasic3d"
+              ? "/windMap3D"
+              : "/drawPlot",
           query: {
             longitude: longitude,
             latitude: latitude,
@@ -2201,6 +2225,14 @@ export default {
       height: 300px;
     }
   }
+
+  .timeControl {
+    position: absolute;
+    left: 0;
+    top: 12px;
+    width: 95%;
+    margin: 0 2.5%;
+  }
 }
 </style>
 <style lang="less">

src/views/cesiumComponents/windMap3D.vue

@@ -27,7 +27,7 @@
       :before-close="handleClose"
     >
       <template #header>
-        <h3 style="font-weight: bold;color: #fff">{{ windDrawerHeader }}</h3>
+        <h3 style="font-weight: bold; color: #fff">{{ windDrawerHeader }}</h3>
       </template>
       <template #default>
         <div class="windDrawerCla">
@@ -71,14 +71,14 @@
       @initView="resetWindViewport"
     /> -->
     <windView2
-        v-if="showWindDetail"
-        :cesiumViewer="viewer"
-        @coverOnChange="coverOnChange"
-        :currentHeight="currentHeight"
-        :fjLonLatJsonArr="fjLonLatJsonArr.data"
-        @showDetail="menuComTSty"
-        @resetChangeWind="resetChangeWind"
-      />
+      v-if="showWindDetail"
+      :cesiumViewer="viewer"
+      @coverOnChange="coverOnChange"
+      :currentHeight="currentHeight"
+      :fjLonLatJsonArr="fjLonLatJsonArr.data"
+      @showDetail="menuComTSty"
+      @resetChangeWind="resetChangeWind"
+    />
   </div>
 </template>
 
@@ -114,7 +114,7 @@ import gf from "@/assets/windimgs/fanSvg/gf.png";
 import benchmark from "@/assets/cesiumImg/benchmark.png";
 
 import windHome from "@/components/windHome/index.vue";
-import windVideo from "@/components/windVideo/index.vue"
+import windVideo from "@/components/windVideo/index.vue";
 import windPro from "@/components/windProDetail/windProblem.vue";
 import ModelUnpack from "@/components/modelUnpack.vue";
 
@@ -138,7 +138,7 @@ export default {
     windVideo,
     windPro,
     ModelUnpack,
-    windView2
+    windView2,
   },
 
   data() {
@@ -550,21 +550,21 @@ export default {
             fjLonLatJson = JSON.parse(JSON.stringify(fjSMSLonLatJson));
           }
 
-          let wtArray = JSON.parse(JSON.stringify(wsRes.windMachineList));
-          this.isFakeData = true;
+      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;
+      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.showStatuswind(viewer, e);
+      });
+      this.fjLonLatJsonArr = fjLonLatJson;
 
           this.fakeDataTimmer = setInterval(() => {
             wtArray.forEach((fjzbItem) => {
@@ -803,12 +803,11 @@ export default {
       const btn = document.getElementById("windBtn");
 
       btn.addEventListener("click", function (event) {
-        // entityxy.show = !entityxy.show;
-        that.zbLabelList.forEach(iv => {
-            iv.zb.forEach(it => {
-                it.show = !it.show;
-            })
-        })
+        that.zbLabelList.forEach((iv) => {
+          iv.zb.forEach((it) => {
+            it.show = !it.show;
+          });
+        });
       });
 
       //   viewer.camera.moveEnd.addEventListener(() => {
@@ -2013,12 +2012,12 @@ export default {
     // background-color: rgba(20, 29, 51, 0.3) !important;
     background-color: rgba(0, 0, 0, 0.3) !important;
     border-radius: 10px 0 0 10px !important;
-    .el-drawer__header{
-        .el-drawer__close-btn{
-            .el-icon{
-                color: #fff !important;
-            }
+    .el-drawer__header {
+      .el-drawer__close-btn {
+        .el-icon {
+          color: #fff !important;
         }
+      }
     }
     .el-drawer__body {
       overflow: hidden;