增加时间监听器以及方法壳

src/views/simulation/index.vue

@@ -63,9 +63,9 @@ export default {
   },
   data() {
     return {
-      save : false,
+      save: false,
       situation: [],
-      nameIdList:[],
+      nameIdList: [],
       websocket: null,
       leftwidth: 12,
       unit: [],
@@ -112,7 +112,7 @@ export default {
   },
   created() {
     this.getData();
-    
+
   },
   mounted() {
     this.cesiumInit();
@@ -124,7 +124,8 @@ export default {
     if (this.websocket && this.websocket.readyState === WebSocket.OPEN) {
       this.websocket.close();
     }
-
+    this.viewer2D.clock.onTick.removeEventListener(this.handleTimeChange);
+    this.viewer3D.clock.onTick.removeEventListener(this.handleTimeChange);
   },
   methods: {
     startWebSocket() {
@@ -153,22 +154,22 @@ export default {
       };
     },
     async saveJson() {
-      if(this.save){
+      if (this.save) {
         const jsonData = JSON.stringify(this.jsonData);
-            const blob = new Blob([jsonData], { type: 'application/json' });
-            const url = URL.createObjectURL(blob);
-            const link = document.createElement('a');
-            link.href = url;
-            link.download = this.jsonData.xdname + '.json';
-            document.body.appendChild(link);
-            link.click();
-            document.body.removeChild(link);
+        const blob = new Blob([jsonData], { type: 'application/json' });
+        const url = URL.createObjectURL(blob);
+        const link = document.createElement('a');
+        link.href = url;
+        link.download = this.jsonData.xdname + '.json';
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
       }
-      else{
+      else {
         this.$message("请先导入想定文件！！！")
       }
-    
-   
+
+
     },
     changeItemPosition(data) {
 
@@ -178,71 +179,72 @@ export default {
       let blueunit = [];
       let satellite = [];
       let center = [];
-     let fileInfoStr = row.xdfile;
-     let fileInfoArr = JSON.parse(fileInfoStr);
+      let fileInfoStr = row.xdfile;
+      let fileInfoArr = JSON.parse(fileInfoStr);
       await axios
-          .get("http://localhost:8084/admin/online/onlineOperation/downloadDatasource/main", {
-            params: {
-              datasourceId: "1656243335922192384",
-              fieldName: "xdfile",
-              asImage: false,
-              dataId: row.id,
-              filename: fileInfoArr[0].filename,
-              Authorization: getToken(),
-              MenuId: "1656244747347431424"
-            }
-          })
-          .then((response) => {
-            console.log('response.data :>> ', response.data);
-            // // 处理成功的响应
-            // jsonData = response.data
-            blueunit = response.data.blueunit
-            redunit = response.data.redunit
-            satellite = response.data.satellite
-            center = response.data.center
-            this.save = true
-                this.jsonData = {
-                  id: row.id,
-                  xdname: row.xdname,
-                  type: row.type,
-                  // creator: row.creator,
-                  createtime: row.createtime,
-                  bluecnt: row.bluecnt,
-                  target: row.target,
-                  starttime: row.starttime,
-                  steptime: row.steptime,
-                  blueunit: blueunit,
-                  redunit: redunit,
-                  satellite: satellite,
-                  center: center
-                }
-           this.setTimeLine(response.data.starttime,response.data.steptime)//传入时间到时间轴
-          })
-          .catch((error) => {
-            // 处理错误
-            console.error(error);
-          });
-      
-      for(let i =0;i<blueunit.length;i++){
-        this.markLocationbyJson(parseFloat(blueunit[i].pos.lat),parseFloat(blueunit[i].pos.lon),parseFloat(blueunit[i].pos.height),blueunit[i].name,"blue")
+        .get("http://localhost:8084/admin/online/onlineOperation/downloadDatasource/main", {
+          params: {
+            datasourceId: "1656243335922192384",
+            fieldName: "xdfile",
+            asImage: false,
+            dataId: row.id,
+            filename: fileInfoArr[0].filename,
+            Authorization: getToken(),
+            MenuId: "1656244747347431424"
+          }
+        })
+        .then((response) => {
+          console.log('response.data :>> ', response.data);
+          // // 处理成功的响应
+          // jsonData = response.data
+          blueunit = response.data.blueunit
+          redunit = response.data.redunit
+          satellite = response.data.satellite
+          center = response.data.center
+          this.save = true
+          this.jsonData = {
+            id: row.id,
+            xdname: row.xdname,
+            type: row.type,
+            // creator: row.creator,
+            createtime: row.createtime,
+            bluecnt: row.bluecnt,
+            target: row.target,
+            starttime: row.starttime,
+            steptime: row.steptime,
+            endtime: row.endtime,
+            blueunit: blueunit,
+            redunit: redunit,
+            satellite: satellite,
+            center: center
+          }
+          this.setTimeLine(response.data.starttime, response.data.endtime, response.data.steptime)//传入时间到时间轴
+        })
+        .catch((error) => {
+          // 处理错误
+          console.error(error);
+        });
+
+      for (let i = 0; i < blueunit.length; i++) {
+        this.markLocationbyJson(parseFloat(blueunit[i].pos.lat), parseFloat(blueunit[i].pos.lon), parseFloat(blueunit[i].pos.height), blueunit[i].name, "blue")
       }
-      for(let i = 0;i<center.length;i++){
+      for (let i = 0; i < center.length; i++) {
         let item = center[i]
-        this.markLocationbyJson(parseFloat(item[center[i].name].properties.lat),parseFloat(item[center[i].name].properties.lon),parseFloat(item[center[i].name].properties.h),item.name,"center")
+        this.markLocationbyJson(parseFloat(item[center[i].name].properties.lat), parseFloat(item[center[i].name].properties.lon), parseFloat(item[center[i].name].properties.h), item.name, "center")
       }
-      for(let i = 0;i<redunit.length;i++){
-        this.markLocationbyJson(parseFloat(redunit[i].component_movementjson.properties.launch_lat),parseFloat(redunit[i].component_movementjson.properties.launch_lon),parseFloat(redunit[i].component_movementjson.properties.launch_h),redunit[i].name,"red")
+      for (let i = 0; i < redunit.length; i++) {
+        this.markLocationbyJson(parseFloat(redunit[i].component_movementjson.properties.launch_lat), parseFloat(redunit[i].component_movementjson.properties.launch_lon), parseFloat(redunit[i].component_movementjson.properties.launch_h), redunit[i].name, "red")
         let point1 = {
-          longitude : parseFloat(redunit[i].component_movementjson.properties.launch_lon),
-          latitude : parseFloat(redunit[i].component_movementjson.properties.launch_lat),
-          height :parseFloat(redunit[i].component_movementjson.properties.launch_h)
+          longitude: parseFloat(redunit[i].component_movementjson.properties.launch_lon),
+          latitude: parseFloat(redunit[i].component_movementjson.properties.launch_lat),
+          height: parseFloat(redunit[i].component_movementjson.properties.launch_h)
         }
         let point2 = {
-          longitude : parseFloat(redunit[i].component_movementjson.properties.target_lon),
-          latitude : parseFloat(redunit[i].component_movementjson.properties.target_lat),
-          height : parseFloat(redunit[i].component_movementjson.properties.target_h)
+          longitude: parseFloat(redunit[i].component_movementjson.properties.target_lon),
+          latitude: parseFloat(redunit[i].component_movementjson.properties.target_lat),
+          height: parseFloat(redunit[i].component_movementjson.properties.target_h)
         }
-        this.markLine(point1,point2,"red")
+        this.markLine(point1, point2, "red")
       }
     },
     //获取所有数据
@@ -482,7 +484,7 @@ export default {
     /* 地图放大 */
     big() {
       let { lon, lat, height } = this.getCenterPosition(this.dimension === 3);
-      let viewer = (this.dimension === 3 || this.dimension === 5)? this.viewer3D : this.viewer2D;
+      let viewer = (this.dimension === 3 || this.dimension === 5) ? this.viewer3D : this.viewer2D;
       // 镜头拉进
       viewer.camera.flyTo({
         destination: this.Cesium.Cartesian3.fromDegrees(lon, lat, height / 1.8),
@@ -500,7 +502,7 @@ export default {
       });
     },
     home() {
-      let viewer = (this.dimension === 3 || this.dimension === 5)? this.viewer3D : this.viewer2D;
+      let viewer = (this.dimension === 3 || this.dimension === 5) ? this.viewer3D : this.viewer2D;
       viewer.camera.flyTo({
         destination: this.Cesium.Cartesian3.fromDegrees(117.918977, 25.0, 1500000),
         duration: 2.0
@@ -528,23 +530,23 @@ export default {
     },
     //显示鼠标经纬度
     getMouseLocation(event) {
-      let {longitude,latitude} = this.getCoordinatesFromEvent(event);
-      this.$store.commit("app/setMouseLocation",{longitude,latitude});
-    },
-    /*根据camera高度近似计算当前层级*/ 
-    heightToZoom(height){ 
-      var A = 40487.57; 
-      var B = 0.00007096758; 
-      var C = 91610.74; 
-      var D = -40467.74; 
-      return Math.round(D+(A-D)/(1+Math.pow(height/C, B))); 
-    },
-    getCammeraHeightAndZoom(){
+      let { longitude, latitude } = this.getCoordinatesFromEvent(event);
+      this.$store.commit("app/setMouseLocation", { longitude, latitude });
+    },
+    /*根据camera高度近似计算当前层级*/
+    heightToZoom(height) {
+      var A = 40487.57;
+      var B = 0.00007096758;
+      var C = 91610.74;
+      var D = -40467.74;
+      return Math.round(D + (A - D) / (1 + Math.pow(height / C, B)));
+    },
+    getCammeraHeightAndZoom() {
       let viewer = (this.dimension === 3 || this.dimension === 5) ? this.viewer3D : this.viewer2D;
       //获取当前相机高度 
-      let height = viewer.camera.positionCartographic.height; 
-      let zoom = this.heightToZoom(height); 
-      this.$store.commit("app/setCameraHeightAndZoom",{height,zoom});
+      let height = viewer.camera.positionCartographic.height;
+      let zoom = this.heightToZoom(height);
+      this.$store.commit("app/setCameraHeightAndZoom", { height, zoom });
     },
     selectModel(cursorStyle, image, info) {
       console.log('image :>> ', image);
@@ -611,20 +613,20 @@ export default {
       });
       this.id++;
     },
-    markLocationbyJson(latitude, longitude,height,name,type) {
-      const position = this.Cesium.Cartesian3.fromDegrees(longitude, latitude,height);
+    markLocationbyJson(latitude, longitude, height, name, type) {
+      const position = this.Cesium.Cartesian3.fromDegrees(longitude, latitude, height);
       console.log('position :>> ', position);
       let color = ''
       let modelUrl = ''
-      if(type=='red'){
+      if (type == 'red') {
         color = 'Red'
-        modelUrl= missileModel
+        modelUrl = missileModel
       }
-      else if(type=='blue'){
+      else if (type == 'blue') {
         color = 'Blue'
         modelUrl = radarModel
       }
-      else if(type=='center'){
+      else if (type == 'center') {
         color = 'Blue'
         modelUrl = centerModel
       }
@@ -641,7 +643,7 @@ export default {
           minimumPixelSize: 64 // 设置3D模型的最小像素大小，确保在视图中可见
         },
         label: {
-          text: type+' '+name,
+          text: type + ' ' + name,
           show: true,
           font: "18px Helvetica", // 调整标签的字体样式和大小
           pixelOffset: new this.Cesium.Cartesian2(0, 20) // 调整标签的像素偏移，向下偏移20像素
@@ -660,7 +662,7 @@ export default {
           minimumPixelSize: 64 // 设置3D模型的最小像素大小，确保在视图中可见
         },
         label: {
-          text: type+' '+name,
+          text: type + ' ' + name,
           show: true,
           font: "18px Helvetica", // 调整标签的字体样式和大小
           pixelOffset: new this.Cesium.Cartesian2(0, 20) // 调整标签的像素偏移，向下偏移20像素
@@ -719,31 +721,78 @@ export default {
         }
       });
     },
-    setTimeLine(startTime,stepTime){
-          console.log(startTime)
-          let start = this.Cesium.JulianDate.fromDate(new Date(startTime));  // 设置时间轴当前时间为开始时间
-          console.log(start)
-          // 添加8小时，使地图时间和北京时间相同
-          start = this.Cesium.JulianDate.addHours(start, 8, new this.Cesium.JulianDate());
-          let stop = this.Cesium.JulianDate.addSeconds(start, stepTime, new this.Cesium.JulianDate());   // 设置结束时间为开始时间加400秒
-          // 设置时钟开始时间
-          this.viewer2D.clock.startTime = start.clone();
-          this.viewer3D.clock.startTime = start.clone();
-          // 设置时钟当前时间
-          this.viewer2D.clock.currentTime = start.clone();
-          this.viewer3D.clock.currentTime = start.clone();
-          // 设置时钟结束时间
-          this.viewer2D.clock.stopTime = stop.clone();
-          this.viewer3D.clock.stopTime = stop.clone();
-          // 时间速率，数字越大时间过的越快，设置1好像是和实际时间一样
-          this.viewer2D.clock.multiplier = 1;
-          this.viewer3D.clock.multiplier = 1;
-          // 时间轴绑定到viewer上去
-          this.viewer2D.timeline.zoomTo(start, stop);
-          this.viewer3D.timeline.zoomTo(start, stop);
-          // 循环执行，到达终止时间，重新从起点时间开始
-          this.viewer2D.clock.clockRange = this.Cesium.ClockRange.LOOP_STOP;
-          this.viewer3D.clock.clockRange = this.Cesium.ClockRange.LOOP_STOP;
+    setTimeLine(startTime, endtime, stepTime) {
+      let start = this.Cesium.JulianDate.fromDate(new Date(startTime));  // 设置时间轴当前时间为开始时间
+      let stop = this.Cesium.JulianDate.fromDate(new Date(endtime));
+      // 添加8小时，使地图时间和北京时间相同
+      start = this.Cesium.JulianDate.addHours(start, 8, new this.Cesium.JulianDate());
+      stop = this.Cesium.JulianDate.addHours(stop, 8, new this.Cesium.JulianDate());
+      // 设置时钟开始时间
+      this.viewer2D.clock.startTime = start.clone();
+      this.viewer3D.clock.startTime = start.clone();
+      // 设置时钟当前时间
+      this.viewer2D.clock.currentTime = start.clone();
+      this.viewer3D.clock.currentTime = start.clone();
+      // 设置时钟结束时间
+      this.viewer2D.clock.stopTime = stop.clone();
+      this.viewer3D.clock.stopTime = stop.clone();
+      // 时间速率，数字越大时间过的越快，设置1好像是和实际时间一样
+      this.viewer2D.clock.multiplier = stepTime;
+      this.viewer3D.clock.multiplier = stepTime;
+      // 时间轴绑定到viewer上去
+      this.viewer2D.timeline.zoomTo(start, stop);
+      this.viewer3D.timeline.zoomTo(start, stop);
+      // 循环执行，到达终止时间，重新从起点时间开始
+      this.viewer2D.clock.clockRange = this.Cesium.ClockRange.LOOP_STOP;
+      this.viewer3D.clock.clockRange = this.Cesium.ClockRange.LOOP_STOP;
+      this.viewer2D.clock.onTick.addEventListener(clock => {
+        const currentTime = clock.currentTime; // 获取当前时间轴的时间
+        const elapsedTime = this.Cesium.JulianDate.secondsDifference(
+          currentTime,
+          this.viewer2D.clock.startTime
+        ); // 获取从起始时间到当前时间的秒数
+        if (parseInt(elapsedTime) % stepTime === 0) {
+          console.log('elapsedTime :>> ', elapsedTime);
+          // 当从起始时间到当前时间的秒数是 stepTime 的倍数时，发送请求
+          this.requestDataAndUpdateModel2D(startTime, elapsedTime);
+        }
+      });
+      this.viewer3D.clock.onTick.addEventListener(clock => {
+        const currentTime = clock.currentTime; // 获取当前时间轴的时间
+        const elapsedTime = this.Cesium.JulianDate.secondsDifference(
+          currentTime,
+          this.viewer2D.clock.startTime
+        ); // 获取从起始时间到当前时间的秒数
+        if (parseInt(elapsedTime) % stepTime === 0) {
+          console.log('elapsedTime :>> ', elapsedTime);
+          // 当从起始时间到当前时间的秒数是 stepTime 的倍数时，发送请求
+          this.requestDataAndUpdateModel3D(startTime, elapsedTime);
+        }
+      });
+      this.initSTK()
+    },
+    // 初始化stk方法，生成轨迹文件
+    async initSTK() {
+    
+
+    },
+    // 根据时间参数请求模型位置并更新 2D
+    requestDataAndUpdateModel2D(startTime, elapsedTime) {
+      const jsDate = new Date(startTime);
+      // 增加 elapsedTime 秒
+      jsDate.setSeconds(jsDate.getSeconds() + elapsedTime);
+      // 转换为需求字符串格式
+      const newTimeString = `${jsDate.getFullYear()}-${(jsDate.getMonth() + 1).toString().padStart(2, '0')}-${jsDate.getDate().toString().padStart(2, '0')} ${jsDate.getHours().toString().padStart(2, '0')}:${jsDate.getMinutes().toString().padStart(2, '0')}:${jsDate.getSeconds().toString().padStart(2, '0')}`;
+   
+    },
+     // 根据时间参数请求模型位置并更新 3D
+     requestDataAndUpdateModel3D(startTime, elapsedTime) {
+      const jsDate = new Date(startTime);
+      // 增加 elapsedTime 秒
+      jsDate.setSeconds(jsDate.getSeconds() + elapsedTime);
+      // 转换为需求字符串格式
+      const newTimeString = `${jsDate.getFullYear()}-${(jsDate.getMonth() + 1).toString().padStart(2, '0')}-${jsDate.getDate().toString().padStart(2, '0')} ${jsDate.getHours().toString().padStart(2, '0')}:${jsDate.getMinutes().toString().padStart(2, '0')}:${jsDate.getSeconds().toString().padStart(2, '0')}`;
+     
     }
   }
 };
@@ -761,10 +810,11 @@ export default {
   display: none !important;
 }
 
-.container{
+.container {
   height: 100%;
   position: relative;
 }
+
 .modeltooltip {
   position: absolute;
   padding: 5px;
@@ -842,7 +892,7 @@ export default {
 ::v-deep .el-tabs--border-card>.el-tabs__content {
   width: 300px;
   height: 100%;
-  overflow-y:visible;
+  overflow-y: visible;
 }
 
 .model {
@@ -882,7 +932,8 @@ export default {
   font-size: 14px;
   /* right: 20px; */
 }
-.TimeLine{
+
+.TimeLine {
   position: absolute;
   left: 21%;
   bottom: 15px;