From 32d4167c093317c16cd67af5277e11a2f08809db Mon Sep 17 00:00:00 2001
From: jihongshun <1151753686@qq.com>
Date: 星期六, 13 九月 2025 17:12:56 +0800
Subject: [PATCH] 航线模拟功能完成 待优化

---
 src/views/system/flightRouteSimulation/index.vue |  141 ++++++++++++++++++++++++++++++++++++----------
 1 files changed, 110 insertions(+), 31 deletions(-)

diff --git a/src/views/system/flightRouteSimulation/index.vue b/src/views/system/flightRouteSimulation/index.vue
index 743f851..d143340 100644
--- a/src/views/system/flightRouteSimulation/index.vue
+++ b/src/views/system/flightRouteSimulation/index.vue
@@ -1,13 +1,14 @@
 <template>
    <div class="app-container">
-    <el-button type="primary" @click="showGZ">鏄剧ず瑙嗛敟浣�</el-button>
+    <a @click="showGZ">鏄剧ず瑙嗛敟浣�</a>
     <input @change="handleKMZUpload" type="file" id="kmzFile" accept=".kmz" class="block w-full text-sm text-gray-500
     file:mr-4 file:py-2 file:px-4
     file:rounded-md file:border-0
     file:text-sm file:font-semibold
     file:bg-blue-50 file:text-blue-700
     hover:file:bg-blue-100">
-    <CesiumMap style="height: 790px;"></CesiumMap>
+    <CesiumMap style="height: 790px;" :showAnimation = true :showCesiumCompass = true :cesiumId="'cesiumContainer'"></CesiumMap>
+    <CesiumMap style="height: 324px;width: 576px;" :showAnimation = false :showCesiumCompass = false :cesiumId="'cesiumContainerYY'" class="eagleye"></CesiumMap>
    </div>
 </template>
 
@@ -119,21 +120,19 @@
         this.waypoints = await this.parseKMZ(arrayBuffer);
         //鍔犵偣閫昏緫 姣斿鍚戠2-n-1涓彃鍏ュ厓绱�  缁忕含搴︿负褰撳墠鐨�  heading pitch roll 涓嬩竴涓殑
         const dealArr = [];
-        // console.log(">> this.waypoints:", this.waypoints);
+        console.log(">> this.waypoints:", this.waypoints);
         for (let i = 0; i < this.waypoints.length - 1; i++) {
             dealArr.push(this.waypoints[i]); // Push the current element
             const current = this.waypoints[i];
             const next = this.waypoints[i + 1];
-            
-            // Create a new element with the current lng, lat and next heading, pitch, roll
             dealArr.push({
-                "lng": current.lng,
-                "lat": current.lat,
-                "alt": current.alt,
+                "lng": next.lng,
+                "lat": next.lat,
+                "alt": next.alt,
                 'flyHeading':next.flyHeading,
-                "heading": next.heading,
-                "pitch": next.pitch,
-                "roll": next.roll
+                "heading": current.heading,
+                "pitch": current.pitch,
+                "roll": current.roll
             });
         }
 
@@ -170,7 +169,8 @@
             heading:item.heading|| 0,
             pitch:item.pitch|| 0,
             roll:item.roll || 0,
-            speed: speeds[index] || 0,
+            // speed: speeds[index] || 0,
+            speed: 80,
             // flyHeading:item.flyHeading
           };
         });
@@ -259,6 +259,7 @@
       console.log("Total Heading:", totalHeading);
         if (coords) {
           coords.trim().split(" ").forEach(coord => {
+            console.log(coord)
             const [lng, lat] = coord.split(",").map(Number);
             points.push({ lng, lat, alt: height,heading:totalHeading  || 0,pitch:totalPitch || 0,roll:totalRoll|| 0 ,flyHeading:flyHeadingData});
           });
@@ -299,6 +300,7 @@
       return R * c;
     },
     showFlightPath() {
+      let viewer = window['cesiumContainer'].viewer
       console.log(">> this.waypoints:", this.waypoints);
       if (this.waypoints.length === 0) return alert('璇峰厛涓婁紶KMZ鏂囦欢');
       // 杞崲鍧愭爣
@@ -355,6 +357,7 @@
       })
     },
     createModel(data){
+      let viewer = window['cesiumContainer'].viewer
       viewer.entities.add({
         id: data.id,
         position: Cesium.Cartesian3.fromDegrees(data.longitude, data.latitude, data.altitude),
@@ -378,26 +381,55 @@
           disableDepthTestDistance: 100000000
         }
       });
+      window['cesiumContainerYY'].viewer.entities.add({
+        id:data.id+ 'yytower',
+        position: Cesium.Cartesian3.fromDegrees(data.longitude, data.latitude, data.altitude),
+        model: {
+          uri: data?.ardTowerModel?.modelRoute,
+          scale: 1,
+        },
+        label: {
+          show: true,
+          verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+          horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+          font: '28px Helvetica',
+          outlineColor: Cesium.Color.RED,
+          outlineWidth: 3,
+          fillColor: Cesium.Color.fromCssColorString('#FFFFFF'), //44c3cc
+          text: data.deviceName,
+          style: Cesium.LabelStyle.FILL_AND_OUTLINE,
+          pixelOffset: new Cesium.Cartesian2(0.0, -56.0),
+          scaleByDistance: new Cesium.NearFarScalar(1000, 0.6, 10000, 0.4),
+          pixelOffsetScaleByDistance: new Cesium.NearFarScalar(1000, 0.4, 10000, 0.4),
+          disableDepthTestDistance: 100000000
+        }
+      });
     },
     loadTimeLine(){
+      let viewer = window['cesiumContainer'].viewer
       // 璁剧疆鏃堕棿鑼冨洿
+      console.log(this.trajectoryData)
       const allTimes = this.trajectoryData.map(item => Cesium.JulianDate.fromIso8601(item.time))
       // 鑾峰彇鎵�鏈夋椂闂达紝骞跺噺鍘�8灏忔椂
       // const allTimes = this.trajectoryData.map(item => {
       //     const time = Cesium.JulianDate.fromIso8601(item.time)
       //     return Cesium.JulianDate.addHours(time, +8, new Cesium.JulianDate())
       // })
+      console.log(allTimes)
       const startTime = allTimes[0]
       const stopTime = allTimes[allTimes.length - 1]
+      console.log(startTime)
+      console.log(stopTime)
       // const startTime = Cesium.JulianDate.minimum(...allTimes)
       // const stopTime = Cesium.JulianDate.maximum(...allTimes)
 
       viewer.clock.startTime = startTime.clone()
       viewer.clock.stopTime = stopTime.clone()
       viewer.clock.currentTime = startTime.clone()
-      viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP
+      viewer.clock.clockRange = Cesium.ClockRange.CLAMPED
       viewer.timeline.zoomTo(startTime, stopTime)
-
+      const duration = Cesium.JulianDate.secondsDifference(stopTime, startTime);
+      console.log(`鏃堕棿杞存�绘椂闀�: ${duration} 绉抈)
 
       // 鍒涘缓浣嶇疆鍜岄�熷害灞炴��
       const speedProperty = new Cesium.SampledProperty(Number)
@@ -406,6 +438,7 @@
       // 娣诲姞閲囨牱鐐�
       this.trajectoryData.forEach(data => {
         const time = Cesium.JulianDate.fromIso8601(data.time)
+        console.log("瀛樺偍鐨勬椂闂达細", Cesium.JulianDate.toDate(time))
         const position = Cesium.Cartesian3.fromDegrees(
           data.position.longitude,
           data.position.latitude,
@@ -425,7 +458,6 @@
             Cesium.Math.toRadians(0)
         );
         const quaternion = Cesium.Transforms.headingPitchRollQuaternion(position, hpr);
-        console.log(Cesium.JulianDate.toDate(time))
         // // 娣诲姞椋炴満鏈濆悜閲囨牱
         this.orientation.addSample(time, quaternion);
         //浜戝彴
@@ -434,9 +466,13 @@
             Cesium.Math.toRadians(data.pitch),
             Cesium.Math.toRadians(data.roll)
         );
+        console.log(szthpr)
+        // console.log( Cesium.Math.toRadians(data.heading))
         const sztquaternion = Cesium.Transforms.headingPitchRollQuaternion(position, szthpr);
-        
+        console.log(sztquaternion)
         this.sztOrientation.addSample(time, sztquaternion);
+        console.log(this.sztOrientation)
+        // console.log(this.orientation)
       })
       // console.log(">> positionProperty:",this.positionProperty );
 
@@ -488,9 +524,22 @@
       } else {
         console.warn('Frustum outline is not initialized');
       }
+      let yyDestination = this.c3Position
+      window['cesiumContainerYY'].viewer.camera.setView(
+        {
+          destination: yyDestination,
+          orientation: {
+            // 鎸囧悜
+            heading: Cesium.Math.toRadians(Number(this.heading)),
+            // 瑙嗚
+            pitch: Cesium.Math.toRadians(Number(this.pitch)),
+            roll: Cesium.Math.toRadians(Number(this.roll))
+          }
+        }
+      )
     },
     listenChange() {
-      let viewer =  window.viewer;
+      let viewer =  window['cesiumContainer'].viewer;
       viewer.clock.onTick.addEventListener(() => {
         if (viewer.clock.shouldAnimate) {
           this.getCurrentPosition()
@@ -504,14 +553,17 @@
       });
     },
     getCurrentPosition() {
+      let viewer =  window['cesiumContainer'].viewer;
+      console.log(this.sztOrientation)
       // 鑾峰彇褰撳墠鏃堕棿
       const currentTime = viewer.clock.currentTime;
-      console.log(Cesium.JulianDate.toDate(currentTime))
-      console.log('start:', Cesium.JulianDate.toDate(this.positionProperty._property._times[0]));
-      console.log('stop:', Cesium.JulianDate.toDate(this.positionProperty._property._times.slice(-1)[0]));
+      console.log("褰撳墠鏃堕棿锛�", Cesium.JulianDate.toDate(currentTime));
+      // console.log(Cesium.JulianDate.toDate(currentTime))
+      // console.log('start:', Cesium.JulianDate.toDate(this.positionProperty._property._times[0]));
+      // console.log('stop:', Cesium.JulianDate.toDate(this.positionProperty._property._times.slice(-1)[0]));
       // const currentTime = Cesium.JulianDate.addHours(currentTime, -8, new Cesium.JulianDate());
       
-      console.log(currentTime)
+      // console.log(currentTime)
       // 浠� positionProperty 涓幏鍙栧綋鍓嶄綅缃�
       const currentPosition = this.positionProperty.getValue(currentTime);
       
@@ -523,12 +575,9 @@
 
         // 灏嗙粡绾害浠庡姬搴﹁浆鎹负搴�
         this.currentLongitude = Cesium.Math.toDegrees(cartographicPosition.longitude);
-        console.log(Cesium.Math.toDegrees(cartographicPosition.longitude))
-        console.log(Cesium.Math.toDegrees(cartographicPosition.latitude))
         this.currentLatitude = Cesium.Math.toDegrees(cartographicPosition.latitude);
         this.currentHeight = cartographicPosition.height;
         this.c3Position = Cesium.Cartesian3.fromDegrees(this.currentLongitude, this.currentLatitude,this.currentHeight)
-        // console.log(`褰撳墠浣嶇疆 - 缁忓害: ${this.currentLongitude}, 绾害: ${this.currentLatitude}, 楂樺害: ${this.currentHeight}`);
         //鐩告満鍙樺寲
         const quaternion = this.orientation.getValue(currentTime)
         // if(quaternion) {
@@ -541,11 +590,12 @@
         if (sztquaternion) {
           const hpr = Cesium.HeadingPitchRoll.fromQuaternion(sztquaternion)
           console.log(hpr)
-          this.heading = Cesium.Math.toDegrees(hpr.heading).toFixed(2)
+          this.heading = (Cesium.Math.toDegrees(hpr.heading).toFixed(2)-143.32384000000002 )
           // this.heading = 180
-          this.pitch = Cesium.Math.toDegrees(hpr.pitch).toFixed(2)
-          this.roll = Cesium.Math.toDegrees(hpr.roll).toFixed(2)
-          console.log('褰撳墠浣嶇疆 - heading ' + this.heading)
+          this.pitch = (Cesium.Math.toDegrees(hpr.pitch).toFixed(2) - 14.33)
+          // this.roll = Cesium.Math.toDegrees(hpr.roll).toFixed(2)
+          this.roll = 0
+          // console.log('褰撳墠浣嶇疆 - heading ' + this.heading)
           console.log(`褰撳墠浣嶇疆 - heading: ${this.heading}, pitch: ${this.pitch}, roll: ${this.roll}`);
         }
         
@@ -554,13 +604,35 @@
         console.log("鏃犳硶鑾峰彇褰撳墠浣嶇疆");
       }
     },
+    quaternionToHeadingPitchRoll(quaternion) {
+        const x = quaternion.x;
+        const y = quaternion.y;
+        const z = quaternion.z;
+        const w = quaternion.w;
+
+        // 鏋勫缓鏃嬭浆鐭╅樀鍏冪礌
+        const m11 = 1 - 2 * (y * y + z * z);
+        const m12 = 2 * (x * y - w * z);
+        const m13 = 2 * (x * z + w * y);
+        const m21 = 2 * (x * y + w * z);
+        const m22 = 1 - 2 * (x * x + z * z);
+        const m23 = 2 * (y * z - w * x);
+        const m31 = 2 * (x * z - w * y);
+        const m32 = 2 * (y * z + w * x);
+        const m33 = 1 - 2 * (x * x + y * y);
+
+        const heading = Math.atan2(m21, m11);
+        const pitch = Math.asin(-m31);
+        const roll = Math.atan2(m32, m33);
+
+        return new Cesium.HeadingPitchRoll(heading, pitch, roll);
+    },
     showGZ(){
-       let viewer = window.viewer;
+      let viewer = window['cesiumContainer'].viewer;
       this.camera = new Cesium.Camera(viewer.scene)
       // 瑙嗛敟浣撳弬鏁�
       this.camera.frustum = new Cesium.PerspectiveFrustum({
-        // fov: Cesium.Math.PI_OVER_THREE,
-        fov: Cesium.Math.toRadians(10),
+        fov: Cesium.Math.PI_OVER_THREE,
         // aspectRatio: this.aspectRatio,
         aspectRatio: 1920 / 1080,
       });
@@ -588,3 +660,10 @@
   }
 }
 </script>
+<style>
+.eagleye{
+  position: absolute;
+  right: 30px;
+  bottom: 50px;
+}
+</style>

--
Gitblit v1.9.3