Parcourir la source

add satellite mdoel

xyh il y a 1 an
Parent
commit
107102fbda
2 fichiers modifiés avec 131 ajouts et 37 suppressions
  1. 130 36
      src/views/simulation/index.vue
  2. 1 1
      src/views/situation/index.vue

+ 130 - 36
src/views/simulation/index.vue

@@ -630,6 +630,10 @@ export default {
         color = 'Blue'
         modelUrl = centerModel
       }
+      else if (type == 'satelite') {
+        color = 'Blue'
+        modelUrl = satelliteModel
+      }
       this.viewer2D.entities.add({
         id: this.id,
         position: position,
@@ -720,6 +724,31 @@ export default {
         }
       });
     },
+    markSatelliteLine(position1, position2, color) {
+
+      // 创建一个带有箭头图标的PolylineMaterial
+      const material = new this.Cesium.PolylineArrowMaterialProperty(
+        this.Cesium.Color.fromCssColorString(color || "red")
+      );
+
+      // 将点1和点2之间的连线添加到Viewer中
+      this.viewer2D.entities.add({
+        polyline: {
+          positions: [position1, position2],
+          width: 5, // 设置线的宽度
+          material: material,
+          followSurface: false // 设置为false,使连线保持在固定的高度,不会贴地显示
+        }
+      });
+      this.viewer3D.entities.add({
+        polyline: {
+          positions: [position1, position2],
+          width: 5, // 设置线的宽度
+          material: material,
+          followSurface: false // 设置为false,使连线保持在固定的高度,不会贴地显示
+        }
+      });
+    },
     setTimeLine(startTime, endtime, stepTime) {
       let start = this.Cesium.JulianDate.fromDate(new Date(startTime));  // 设置时间轴当前时间为开始时间
       let stop = this.Cesium.JulianDate.fromDate(new Date(endtime));
@@ -750,7 +779,7 @@ export default {
           currentTime,
           this.viewer2D.clock.startTime
         ); // 获取从起始时间到当前时间的秒数
-        if (parseInt(elapsedTime) % stepTime === 0 && elapsedTime!=0) {
+        if (parseInt(elapsedTime) % stepTime === 0 && elapsedTime != 0) {
           console.log('elapsedTime :>> ', elapsedTime);
           // 当从起始时间到当前时间的秒数是 stepTime 的倍数时,发送请求
           this.requestDataAndUpdateModel2D(startTime, elapsedTime);
@@ -762,7 +791,7 @@ export default {
           currentTime,
           this.viewer3D.clock.startTime
         ); // 获取从起始时间到当前时间的秒数
-        if (parseInt(elapsedTime) % stepTime === 0 && elapsedTime!=0) {
+        if (parseInt(elapsedTime) % stepTime === 0 && elapsedTime != 0) {
           console.log('elapsedTime :>> ', elapsedTime);
           // 当从起始时间到当前时间的秒数是 stepTime 的倍数时,发送请求
           this.requestDataAndUpdateModel3D(startTime, elapsedTime);
@@ -777,9 +806,75 @@ export default {
       //   .get("/api", this.jsonData).then(res=>{
       //     console.log('res :>> ', res);
       //   })
+      const config = {
+  timeout: 0 // 设置超时时间为0,表示忽略超时问题
+};
       await axios
-        .post("/api/traj", this.jsonData).then(res=>{
+        .post("/api/traj", this.jsonData,config).then(res => {
           console.log('res :>> ', res);
+          let data = res.data[1].data[0]
+          for (let key in data) {
+            let isSatellite = true
+            //判断是否为卫星
+            for (let i = 0; i < this.nameIdList.length; i++) {
+              if (key === this.nameIdList[i].name || key === 'dateTime') {
+                isSatellite = false
+                break
+              }
+            }
+            // 新建卫星实体
+            if (isSatellite) {
+              console.log('key :>> ', key);
+              let x = parseFloat(data[key].x) * 1000
+              let y = parseFloat(data[key].y) * 1000
+              let z = parseFloat(data[key].z) * 1000
+              //终点位置
+              let position = new this.Cesium.Cartesian3(x, y, z);
+              this.viewer2D.entities.add({
+                id: this.id,
+                position: position,
+                point: {
+                  pixelSize: 12, // 调整点的大小,可以增大点的像素大小
+                  color: this.Cesium.Color.fromCssColorString('Blue')
+                },
+                model: {
+                  uri: satelliteModel, // 替换为你的3D模型文件路径
+                  scale: 1.0, // 调整3D模型的缩放大小
+                  minimumPixelSize: 64 // 设置3D模型的最小像素大小,确保在视图中可见
+                },
+                label: {
+                  text: 'satellite ' + key,
+                  show: true,
+                  font: "18px Helvetica", // 调整标签的字体样式和大小
+                  pixelOffset: new this.Cesium.Cartesian2(0, 20) // 调整标签的像素偏移,向下偏移20像素
+                }
+              });
+              this.viewer3D.entities.add({
+                id: this.id,
+                position: position,
+                point: {
+                  pixelSize: 12, // 调整点的大小,可以增大点的像素大小
+                  color: this.Cesium.Color.fromCssColorString('Blue')
+                },
+                model: {
+                  uri: satelliteModel, // 替换为你的3D模型文件路径
+                  scale: 1.0, // 调整3D模型的缩放大小
+                  minimumPixelSize: 64 // 设置3D模型的最小像素大小,确保在视图中可见
+                },
+                label: {
+                  text: 'satellite ' + key,
+                  show: true,
+                  font: "18px Helvetica", // 调整标签的字体样式和大小
+                  pixelOffset: new this.Cesium.Cartesian2(0, 20) // 调整标签的像素偏移,向下偏移20像素
+                }
+              });
+              this.nameIdList.push({
+                id: this.id,
+                name: key
+              })
+              this.id++;
+            }
+          }
         })
 
     },
@@ -791,60 +886,59 @@ export default {
       // 转换为需求字符串格式
       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')}`;
       await axios
-        .post("/api/pos", {simulation_time: newTimeString+'.000'}).then(res=>{
+        .post("/api/pos", { simulation_time: newTimeString + '.000' }).then(res => {
           console.log('res :>> ', res);
           let data = res.data[1].data
           //依次更新每个模型位置
-          for(let i=0;i<this.nameIdList.length;i++){
-            if(data[this.nameIdList[i].name]!=null&&data[this.nameIdList[i].name]!=undefined){
-              this.modelEntityMoveByIDAndLocation(this.viewer2D,this.nameIdList[i].id,data[this.nameIdList[i].name].x,data[this.nameIdList[i].name].y,data[this.nameIdList[i].name].z)
+          for (let i = 0; i < this.nameIdList.length; i++) {
+            if (data[this.nameIdList[i].name] != null && data[this.nameIdList[i].name] != undefined) {
+              this.modelEntityMoveByIDAndLocation(this.viewer2D, this.nameIdList[i].id, data[this.nameIdList[i].name].x, data[this.nameIdList[i].name].y, data[this.nameIdList[i].name].z)
             }
           }
           //更新模型位置
           // this.modelEntityMoveByIDAndLocation(this.viewer2D,"1654426964397658112",res.data[1].data.W1.x,res.data[1].data.W1.y,res.data[1].data.W1.z)
         })
-        
+
     },
-     // 根据时间参数请求模型位置并更新 3D
-     async requestDataAndUpdateModel3D(startTime, elapsedTime) {
+    // 根据时间参数请求模型位置并更新 3D
+    async 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')}`;
       await axios
-        .post("/api/pos", {simulation_time: newTimeString+'.000'}).then(res=>{
+        .post("/api/pos", { simulation_time: newTimeString + '.000' }).then(res => {
           let data = res.data[1].data
-        
+
           //依次更新每个模型位置
-          for(let i=0;i<this.nameIdList.length;i++){
-            console.log('this.nameIdList[i].name :>> ', this.nameIdList[i].name);
-            console.log('data :>> ', data);
-            console.log('data[this.nameIdList[i].name] :>> ', data[this.nameIdList[i].name]);
-            if(this.nameIdList[i].name in data){
-              console.log(' 开始移动'+this.nameIdList[i].name);
-              this.modelEntityMoveByIDAndLocation(this.viewer3D,this.nameIdList[i].id,data[this.nameIdList[i].name].x,data[this.nameIdList[i].name].y,data[this.nameIdList[i].name].z)
+          for (let i = 0; i < this.nameIdList.length; i++) {
+            if (this.nameIdList[i].name in data) {
+              console.log(' 开始移动' + this.nameIdList[i].name);
+              this.modelEntityMoveByIDAndLocation(this.viewer3D, this.nameIdList[i].id, data[this.nameIdList[i].name].x, data[this.nameIdList[i].name].y, data[this.nameIdList[i].name].z)
             }
           }
-           //更新模型位置
+          //更新模型位置
           //  this.modelEntityMoveByIDAndLocation(this.viewer3D,viewer,"1654426964397658112",res.data[1].data.W1.x,res.data[1].data.W1.y,res.data[1].data.W1.z)  
         })
-        
-    },
-     // 根据模型实体Id和终点位置进行移动
-     modelEntityMoveByIDAndLocation(viewer,id,x,y,z) {
-        x = parseFloat(x)*1000
-        y = parseFloat(y)*1000
-        z = parseFloat(z)*1000
-        let entity = viewer.entities.getById(id)
-        //终点位置
-        let position = new this.Cesium.Cartesian3(x, y, z);
-        //设置方向,根据实体的位置来配置方向
-        entity.orientation = new this.Cesium.VelocityOrientationProperty(entity.position);
-        //设置查看器,让模型动起来
-        entity.position.setValue(position)
-
-     }
+
+    },
+    // 根据模型实体Id和终点位置进行移动
+    modelEntityMoveByIDAndLocation(viewer, id, x, y, z) {
+      x = parseFloat(x) * 1000
+      y = parseFloat(y) * 1000
+      z = parseFloat(z) * 1000
+      let entity = viewer.entities.getById(id)
+
+      //终点位置
+      let position = new this.Cesium.Cartesian3(x, y, z);
+      let oldPosition = viewer.entities.getById(id).position._value
+      //设置方向,根据实体的位置来配置方向
+      entity.orientation = new this.Cesium.VelocityOrientationProperty(entity.position);
+      //设置查看器,让模型动起来
+      entity.position.setValue(position)
+      this.markSatelliteLine(oldPosition,position,'Blue')
+    }
   }
 };
 </script>

+ 1 - 1
src/views/situation/index.vue

@@ -133,7 +133,7 @@ export default {
   mounted() {
     this.cesiumInit();
     this.pointMove();
-    this.startWebSocket();
+    // this.startWebSocket();
   },
   beforeDestroy() {
     // 在组件销毁前,关闭WebSocket连接