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