From 30b48fcf76bf2c8a5bdaa2ca5f539c6e905b2f73 Mon Sep 17 00:00:00 2001
From: jihongshun <1151753686@qq.com>
Date: 星期一, 15 九月 2025 16:38:41 +0800
Subject: [PATCH] 优化时间轴中文 和右侧视角十字效果
---
src/views/system/flightRouteSimulation/index.vue | 179 +++++++++++++++++++----------------------------------------
1 files changed, 57 insertions(+), 122 deletions(-)
diff --git a/src/views/system/flightRouteSimulation/index.vue b/src/views/system/flightRouteSimulation/index.vue
index 53aa4a5..95e970f 100644
--- a/src/views/system/flightRouteSimulation/index.vue
+++ b/src/views/system/flightRouteSimulation/index.vue
@@ -1,6 +1,6 @@
<template>
<div class="app-container">
- <a @click="showGZ">鏄剧ず瑙嗛敟浣�</a>
+ <!-- <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
@@ -8,7 +8,7 @@
file:bg-blue-50 file:text-blue-700
hover:file:bg-blue-100">
<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>
+ <CesiumMap style="height: 324px;width: 576px;" :showAnimation = false :showCesiumCompass = false :showCrosshair = true :cesiumId="'cesiumContainerYY'" class="eagleye"></CesiumMap>
</div>
</template>
@@ -110,7 +110,9 @@
holderHeadingProperty : new Cesium.SampledProperty(Number),//浜戝彴鏈濆悜heading
holderPitchProperty : new Cesium.SampledProperty(Number),//浜戝彴鏈濆悜pitch
holderRollProperty : new Cesium.SampledProperty(Number),//浜戝彴鏈濆悜roll
- // flyHeadingProperty : new Cesium.SampledProperty(Number),//鏃犱汉鏈篽eading
+ holderZoomProperty : new Cesium.SampledProperty(Number),//鍙樺��
+ currentZoom:1,
+ filename :''
}
},
mounted() {
@@ -124,7 +126,7 @@
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];
@@ -136,28 +138,34 @@
'flyHeading':next.flyHeading,
"heading": current.heading,
"pitch": current.pitch,
- "roll": current.roll
+ "roll": current.roll,
+ "zoom":next.zoom || 1
});
}
// Push the last element without any change
dealArr.push(this.waypoints[this.waypoints.length - 1]);
-
- console.log(dealArr)
this.waypoints = dealArr
- console.log(">> this.waypoints:", this.waypoints);
-
this.fileInfo = `
鑸偣:${this.waypoints.length}涓� <br/>
璺濈:${this.calculateTotalDistance(this.waypoints).toFixed(2)}鍏噷
`;
this.showFlightPath()
this.getTowerData()
- const startDate = new Date("2025-04-01T13:00:00Z");
- const speeds = [10, 10, 20, 30, 80, 100, 60, 50, 40, 30, 20, 10]; // 鑷畾涔夐�熷害
+ // const startDate = new Date("2025-04-01T13:00:00Z");
+ const match = this.filename.match(/(\d{4}-\d{2}-\d{2})_(\d{2}-\d{2}-\d{2})/);
- // const result = this.waypoints.map((item, index) => {
- console.log(result)
+ if (match) {
+ const datePart = match[1]; // 2025-09-08
+ const timePart = match[2]; // 16-36-01
+
+ // 鏇挎崲鏃堕棿閮ㄥ垎鐨� '-' 涓� ':'
+ const isoString = `${datePart}T${timePart.replace(/-/g, ':')}Z`;
+
+ var date = new Date(isoString);
+ }
+ // const startDate = new Date("2025-04-01T13:00:00Z");
+ const startDate = new Date(date.toISOString());
const result = dealArr.map((item, index) => {
// const result = this.waypoints.map((item, index) => {
// 姣忔鍔犱竴澶�
@@ -173,22 +181,25 @@
heading:item.heading|| 0,
pitch:item.pitch|| 0,
roll:item.roll || 0,
- // speed: speeds[index] || 0,
speed: 80,
+ zoom:item.zoom,
flyHeading:item.flyHeading
};
});
this.trajectoryData = result
- console.log(this.trajectoryData)
- // console.log(result);
+ // console.log(this.trajectoryData)
this.loadTimeLine()
} catch (error) {
console.error(error);
this.fileInfo = `<p style="color:red">瑙ｆ瀽澶辫触: ${error.message}</p>`;
}
+ setTimeout(()=>{
+ this.showGZ()
+ },1000)
},
// 璇诲彇鏂囦欢涓篈rrayBuffer
readFileAsArrayBuffer(file) {
+ this.filename = file.name
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onload = () => resolve(reader.result);
@@ -212,7 +223,7 @@
// xml2js 浠� CDN 寮曞叆鍚庢槸 window.xml2js
const parser = new xml2js.Parser();
const result = await parser.parseStringPromise(kmlContent);
- console.log(">> result:", result);
+ // console.log(">> result:", result);
const placemarks =
result.kml.Document[0].Folder[0].Placemark || [];
@@ -223,13 +234,12 @@
const height = placemark["wpml:height"]?.[0];
// 鎻愬彇 aircraftHeading
// 鎻愬彇 action 閲岀殑鍙傛暟
- let heading = null;
- let gimbalPitch = null, gimbalRoll = null, gimbalYaw = null;
// 鍒濆鍖� Pitch, Roll 鍜� Heading
let totalPitch = 0;
let totalRoll = 0;
let totalHeading = 0;
let flyHeadingData = 0;
+ let currentzoom = 1
if (placemark["wpml:actionGroup"]?.[0]?.["wpml:action"]) {
placemark["wpml:actionGroup"][0]["wpml:action"].forEach(action => {
// 澶勭悊 gimbalRotate 鍜� rotateYaw 鍑芥暟
@@ -243,29 +253,26 @@
totalPitch += gimbalPitch;
totalRoll += gimbalRoll;
totalHeading += gimbalYaw;
- console.log('totalHeading閲岄潰寰幆' + totalHeading)
}
// 澶勭悊 rotateYaw 鍑芥暟
if (action['wpml:actionActuatorFunc'].includes("rotateYaw")) {
// 鑾峰彇 aircraftHeading
const aircraftHeading = parseFloat(action['wpml:actionActuatorFuncParam'][0]["wpml:aircraftHeading"][0]);
- console.log(aircraftHeading)
flyHeadingData = aircraftHeading
// 灏� aircraftHeading 绱姞鍒� totalHeading
totalHeading += aircraftHeading;
- console.log('totalHeading澶栧眰澶栧眰澶栧眰澶栧眰澶栧眰寰幆' + totalHeading)
}
+ // 澶勭悊 rotateYaw 鍑芥暟
+ if (action['wpml:actionActuatorFunc'].includes("zoom")) {
+ const aircraftHeading = parseFloat(action['wpml:actionActuatorFuncParam'][0]["wpml:focalLength"][0]);
+ currentzoom = aircraftHeading
+ }
});
}
- // 杈撳嚭缁撴灉
- console.log("Total Pitch:", totalPitch);
- console.log("Total Roll:", totalRoll);
- 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});
+ points.push({ lng, lat, alt: height,heading:totalHeading || 0,pitch:totalPitch || 0,roll:totalRoll|| 0 ,flyHeading:flyHeadingData,zoom : currentzoom || 1});
});
}
});
@@ -305,7 +312,7 @@
},
showFlightPath() {
let viewer = window['cesiumContainer'].viewer
- console.log(">> this.waypoints:", this.waypoints);
+ // console.log(">> this.waypoints:", this.waypoints);
if (this.waypoints.length === 0) return alert('璇峰厛涓婁紶KMZ鏂囦欢');
// 杞崲鍧愭爣
const positions = this.waypoints.map(wp =>
@@ -343,8 +350,6 @@
}
});
});
-
- //viewer.zoomTo(viewer.entities);
},
getTowerData(){
let lon = this.waypoints[0].lng
@@ -412,37 +417,19 @@
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.CLAMPED
viewer.timeline.zoomTo(startTime, stopTime)
- const duration = Cesium.JulianDate.secondsDifference(stopTime, startTime);
- console.log(`鏃堕棿杞存�绘椂闀�: ${duration} 绉抈)
-
// 鍒涘缓浣嶇疆鍜岄�熷害灞炴��
const speedProperty = new Cesium.SampledProperty(Number)
-
- console.log(">> this.trajectoryData:", this.trajectoryData);
// 娣诲姞閲囨牱鐐�
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,
@@ -451,11 +438,6 @@
this.positionProperty.addSample(time, position)
speedProperty.addSample(time, data.speed)
// 璁＄畻鏈濆悜鍥涘厓鏁�
- // const hpr = new Cesium.HeadingPitchRoll(
- // Cesium.Math.toRadians(data.flyHeading),
- // Cesium.Math.toRadians(data.pitch),
- // Cesium.Math.toRadians(data.roll)
- // );
const hpr = new Cesium.HeadingPitchRoll(
Cesium.Math.toRadians(data.flyHeading),
Cesium.Math.toRadians(0),
@@ -465,27 +447,13 @@
// // 娣诲姞椋炴満鏈濆悜閲囨牱
this.orientation.addSample(time, quaternion);
- //鏃犱汉鏈篽eading
- // this.flyHeadingProperty.addSample(time, data.flyHeading)
- //浜戝彴
- const szthpr = new Cesium.HeadingPitchRoll(
- Cesium.Math.toRadians(data.heading),
- 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);
this.holderHeadingProperty.addSample(time, data.heading)
this.holderPitchProperty.addSample(time, data.pitch)
this.holderRollProperty.addSample(time, data.roll)
- // console.log(this.sztOrientation)
- // console.log(this.orientation)
- })
- // console.log(">> positionProperty:",this.positionProperty );
+ //鍙樺��
+ this.holderZoomProperty.addSample(time,data.zoom)
+ })
let entity = viewer.entities.add({
show: true,
position: this.positionProperty,
@@ -515,11 +483,6 @@
trailTime: 60
},
orientation:this.orientation
- // orientation: {
- // heading: Cesium.Math.toRadians(this.flyHeadingProperty),
- // pitch: Cesium.Math.toRadians(0),
- // roll: Cesium.Math.toRadians(0),
- // }
})
},
// 鏇存柊瑙嗛敟浣撲綅缃拰鏈濆悜
@@ -552,6 +515,7 @@
}
}
)
+ this.updateFov()
},
listenChange() {
let viewer = window['cesiumContainer'].viewer;
@@ -559,30 +523,16 @@
if (viewer.clock.shouldAnimate) {
this.getCurrentPosition()
// 鎵ц鍔ㄤ綔
- // console.log("Clock is running, performing action...");
- // 浣犵殑浠ｇ爜閫�
} else {
- // 鏃堕挓鏆傚仠鏃朵笉鎵ц
- // console.log("Clock is paused, no action performed.");
}
});
},
getCurrentPosition() {
let viewer = window['cesiumContainer'].viewer;
- // console.log(this.sztOrientation)
// 鑾峰彇褰撳墠鏃堕棿
const currentTime = viewer.clock.currentTime;
- 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)
- // 浠� positionProperty 涓幏鍙栧綋鍓嶄綅缃�
const currentPosition = this.positionProperty.getValue(currentTime);
- // console.log('currentPosition>>>>>>>>>>>>>>>>>>>>>>>' + currentPosition)
// 濡傛灉鑾峰彇鍒颁綅缃�
if (currentPosition) {
// 灏嗕綅缃粠 Cartesian 杞崲涓� Cartographic
@@ -599,48 +549,32 @@
this.heading = holderUavHeading
}
//浜戝彴鍙樺寲
- // const sztquaternion = this.sztOrientation.getValue(currentTime)
- // console.log(sztquaternion)
- // if (sztquaternion) {
- // const hpr = Cesium.HeadingPitchRoll.fromQuaternion(sztquaternion)
- // console.log(hpr)
- // this.heading = (Cesium.Math.toDegrees(hpr.heading).toFixed(2)-143.32384000000002 )
- // // this.heading = 180
- // 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}`);
- // }
const holderYtHeading = this.holderHeadingProperty.getValue(currentTime)
const holderYtPitch = this.holderPitchProperty.getValue(currentTime)
const holderYtRoll = this.holderRollProperty.getValue(currentTime)
if(holderYtHeading) {
- // this.heading = Cesium.Math.toDegrees(holderYtHeading).toFixed(2)
- // this.pitch = Cesium.Math.toDegrees(holderYtPitch).toFixed(2)
- // this.roll = Cesium.Math.toDegrees(holderYtRoll).toFixed(2)
this.heading = holderYtHeading
this.pitch = holderYtPitch
this.roll = holderYtRoll
- console.log('褰撳墠浣嶇疆 - heading ' + this.heading)
- console.log(`褰撳墠浣嶇疆 - heading: ${this.heading}, pitch: ${this.pitch}, roll: ${this.roll}`);
+ // console.log('褰撳墠浣嶇疆 - heading ' + this.heading)
+ // console.log(`褰撳墠浣嶇疆 - heading: ${this.heading}, pitch: ${this.pitch}, roll: ${this.roll}`);
}
- // console.log(sztquaternion)
- // if (sztquaternion) {
- // const hpr = Cesium.HeadingPitchRoll.fromQuaternion(sztquaternion)
- // console.log(hpr)
- // this.heading = (Cesium.Math.toDegrees(hpr.heading).toFixed(2)-143.32384000000002 )
- // // this.heading = 180
- // 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}`);
- // }
+ //鍙樺��
+ const holderZoom = this.holderZoomProperty.getValue(currentTime)
+ if(holderZoom) {
+ this.currentZoom = holderZoom ==1? 1 :(holderZoom /23.76237623)
+ }
this.updateFrustum();
} else {
console.log("鏃犳硶鑾峰彇褰撳墠浣嶇疆");
+ }
+ },
+ updateFov(deg) {
+ if (this.camera && this.camera.frustum) {
+ let originalFov = Cesium.Math.toRadians(60); // 1.047 rad
+ let newFov = originalFov / this.currentZoom; // 绾� 0.1047 rad
+ this.camera.frustum.fov = newFov
}
},
showGZ(){
@@ -648,8 +582,8 @@
this.camera = new Cesium.Camera(viewer.scene)
// 瑙嗛敟浣撳弬鏁�
this.camera.frustum = new Cesium.PerspectiveFrustum({
- fov: Cesium.Math.PI_OVER_THREE,
- // aspectRatio: this.aspectRatio,
+ // fov: Cesium.Math.PI_OVER_THREE,
+ fov:Cesium.Math.toRadians(60),
aspectRatio: 1920 / 1080,
});
this.camera.setView({
@@ -670,6 +604,7 @@
updateOnChange: true,
})
viewer.scene.primitives.add(this.frustumOutline);
+
this.listenChange()
}
--
Gitblit v1.9.3