From f103aecc49072551b251c75c4fac12a65940fd40 Mon Sep 17 00:00:00 2001
From: jihongshun <1151753686@qq.com>
Date: 星期六, 06 九月 2025 17:12:31 +0800
Subject: [PATCH] 视锥体
---
src/views/system/flightRouteSimulation/index.vue | 277 +++++++++++++++++++++++++++++++++++++++++-------------
1 files changed, 208 insertions(+), 69 deletions(-)
diff --git a/src/views/system/flightRouteSimulation/index.vue b/src/views/system/flightRouteSimulation/index.vue
index cb73ab1..476d099 100644
--- a/src/views/system/flightRouteSimulation/index.vue
+++ b/src/views/system/flightRouteSimulation/index.vue
@@ -1,5 +1,6 @@
<template>
<div class="app-container">
+ <el-button type="primary" @click="showGZ">涓昏鎸夐挳</el-button>
<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
@@ -21,62 +22,75 @@
},
data(){
return{
- trajectoryData: [
- {
- time: '2025-04-01T13:00:00Z', // ISO 8601鏍煎紡鏃堕棿
- position: {
- longitude: 125.14349012556997, // 缁忓害
- latitude:46.55684464616254, // 绾害
- height:33.157873665937274 // 楂樺害(绫�)
- },
- speed: 0 // 閫熷害(鍏噷/灏忔椂)
- },
- {
- time: '2025-04-01T13:01:00Z', // ISO 8601鏍煎紡鏃堕棿
- position: {
- longitude: 125.14347355270496, // 缁忓害
- latitude: 46.55684011411894, // 绾害
- height: 37.91924525928209 // 楂樺害(绫�)
- },
- speed: 10 // 閫熷害(鍏噷/灏忔椂)
- },
- {
- time: '2025-04-01T13:02:00Z', // ISO 8601鏍煎紡鏃堕棿
- position: {
- longitude: 125.14347355270496, // 缁忓害126.672952 , 45.744238
+ // trajectoryData: [
+ // {
+ // time: '2025-04-01T13:00:00Z', // ISO 8601鏍煎紡鏃堕棿
+ // position: {
+ // longitude: 125.14349012556997, // 缁忓害
+ // latitude:46.55684464616254, // 绾害
+ // height:33.157873665937274 // 楂樺害(绫�)
+ // },
+ // speed: 0 // 閫熷害(鍏噷/灏忔椂)
+ // },
+ // {
+ // time: '2025-04-01T13:01:00Z', // ISO 8601鏍煎紡鏃堕棿
+ // position: {
+ // longitude: 125.14347355270496, // 缁忓害
+ // latitude: 46.55684011411894, // 绾害
+ // height: 37.91924525928209 // 楂樺害(绫�)
+ // },
+ // speed: 10 // 閫熷害(鍏噷/灏忔椂)
+ // },
+ // {
+ // time: '2025-04-01T13:02:00Z', // ISO 8601鏍煎紡鏃堕棿
+ // position: {
+ // longitude: 125.14347355270496, // 缁忓害126.672952 , 45.744238
- latitude: 46.556840114118955, // 绾害
- height:87.91924526022864 // 楂樺害(绫�)
- },
- speed: 20 // 閫熷害(鍏噷/灏忔椂)
- },
- {
- time: '2025-04-01T13:03:00Z', // ISO 8601鏍煎紡鏃堕棿
- position: {
- longitude: 125.14347246077013, // 缁忓害126.671715 , 45.739693
+ // latitude: 46.556840114118955, // 绾害
+ // height:87.91924526022864 // 楂樺害(绫�)
+ // },
+ // speed: 20 // 閫熷害(鍏噷/灏忔椂)
+ // },
+ // {
+ // time: '2025-04-01T13:03:00Z', // ISO 8601鏍煎紡鏃堕棿
+ // position: {
+ // longitude: 125.14347246077013, // 缁忓害126.671715 , 45.739693
- latitude: 46.556326837883375, // 绾害
- height: 83.15663931356488 // 楂樺害(绫�)
- },
- speed: 30 // 閫熷害(鍏噷/灏忔椂)
- },
- {
- time: '2025-04-01T13:04:00Z', // ISO 8601鏍煎紡鏃堕棿
- position: {
- longitude: 125.14347246077013, // 缁忓害
- latitude: 46.55632683788337, // 绾害
- height: 33.15663931413056 // 楂樺害(绫�)
- },
- speed: 80 // 閫熷害(鍏噷/灏忔椂)
- },
+ // latitude: 46.556326837883375, // 绾害
+ // height: 83.15663931356488 // 楂樺害(绫�)
+ // },
+ // speed: 30 // 閫熷害(鍏噷/灏忔椂)
+ // },
+ // {
+ // time: '2025-04-01T13:04:00Z', // ISO 8601鏍煎紡鏃堕棿
+ // position: {
+ // longitude: 125.14347246077013, // 缁忓害
+ // latitude: 46.55632683788337, // 绾害
+ // height: 33.15663931413056 // 楂樺害(绫�)
+ // },
+ // speed: 80 // 閫熷害(鍏噷/灏忔椂)
+ // },
- // 鏇村鐐�...
- ],
+ // // 鏇村鐐�...
+ // ],
+ trajectoryData:[],
+ c3Position:Cesium.Cartesian3.fromDegrees(125.14349012556997, 46.55684464616254,33.157873665937274),
+ enableChange:true,
+ camera: null, // Cesium Camera 瀹炰緥
+ frustumOutline: null, // 瑙嗛敟浣�
+ heading: 0, // 鐩告満鐨� heading (鏈濆悜)
+ pitch: -90, // 鐩告満鐨� pitch (淇话)
+ roll: 0, // 鐩告満鐨� roll (婊氳浆)
+ aspectRatio: 1.0, // 绾垫í姣�
+ color: '#FF0000', // 瑙嗛敟浣撻鑹�
+ id: 'frustumOutline',
+ positionProperty : new Cesium.SampledPositionProperty()
}
},
mounted() {
console.log(window.viewer)
console.log(viewer)
+ this.showGZ()
},
methods: {
async handleKMZUpload(event) {
@@ -94,6 +108,24 @@
`;
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 result = this.waypoints.map((item, index) => {
+ // 姣忔鍔犱竴澶�
+ const time = new Date(startDate.getTime() + index * 60 * 1000).toISOString();
+ return {
+ time,
+ position: {
+ longitude: item.lng,
+ latitude: item.lat,
+ height: parseFloat(item.alt)
+ },
+ speed: speeds[index] || 0
+ };
+ });
+ this.trajectoryData = result
+ console.log(result);
this.loadTimeLine()
} catch (error) {
console.error(error);
@@ -278,9 +310,8 @@
// 鍒涘缓浣嶇疆鍜岄�熷害灞炴��
- const positionProperty = new Cesium.SampledPositionProperty()
const speedProperty = new Cesium.SampledProperty(Number)
-console.log(">> this.trajectoryData:", this.trajectoryData);
+ console.log(">> this.trajectoryData:", this.trajectoryData);
// 娣诲姞閲囨牱鐐�
this.trajectoryData.forEach(data => {
const time = Cesium.JulianDate.fromIso8601(data.time)
@@ -289,30 +320,32 @@
data.position.latitude,
data.position.height || 0
)
- positionProperty.addSample(time, position)
+ this.positionProperty.addSample(time, position)
speedProperty.addSample(time, data.speed)
})
-console.log(">> positionProperty:",positionProperty );
+ console.log(">> positionProperty:",this.positionProperty );
let entity = viewer.entities.add({
show: true,
- position: positionProperty,
- label: {
- show: true,
- font: '18px 寰蒋闆呴粦',
- style: Cesium.LabelStyle.FILL_AND_OUTLINE,
- showBackground: false,
- backgroundColor: Cesium.Color.fromCssColorString('#123456').withAlpha(0.5),
- outlineColor: Cesium.Color.fromCssColorString('#00ff00'),
- outlineWidth: 3,
- fillColor: Cesium.Color.fromCssColorString("#000000"),
- horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
- verticalOrigin: Cesium.VerticalOrigin.TOP,
- text: '娴嬭瘯鏂囧瓧',
- pixelOffset: new Cesium.Cartesian2(0, -1 * 100),
- },
+ position: this.positionProperty,
+ id:'lineFly',
+ // label: {
+ // show: true,
+ // font: '18px 寰蒋闆呴粦',
+ // style: Cesium.LabelStyle.FILL_AND_OUTLINE,
+ // showBackground: false,
+ // backgroundColor: Cesium.Color.fromCssColorString('#123456').withAlpha(0.5),
+ // outlineColor: Cesium.Color.fromCssColorString('#00ff00'),
+ // outlineWidth: 3,
+ // fillColor: Cesium.Color.fromCssColorString("#000000"),
+ // horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+ // verticalOrigin: Cesium.VerticalOrigin.TOP,
+ // text: '娴嬭瘯鏂囧瓧',
+ // // pixelOffset: new Cesium.Cartesian2(0, -1 * 100),
+ // pixelOffset: new Cesium.Cartesian2(0, -90)
+ // },
model: {
- uri: "/Model/UAV.glb", // 娉ㄦ剰entitits.add鏂瑰紡鍔犺浇gltf鏂囦欢鏃讹紝杩欓噷鏄痷ri锛屼笉鏄痷rl锛屽苟涓旇繖绉嶆柟寮忓彧鑳藉姞杞�.glb鏍煎紡鐨勬枃浠�
+ uri: "/Model/M300.glb", // 娉ㄦ剰entitits.add鏂瑰紡鍔犺浇gltf鏂囦欢鏃讹紝杩欓噷鏄痷ri锛屼笉鏄痷rl锛屽苟涓旇繖绉嶆柟寮忓彧鑳藉姞杞�.glb鏍煎紡鐨勬枃浠�
scale: 1, // 缂╂斁姣斾緥
// minimumPixelSize: this.minSize, // 鏈�灏忓儚绱犲ぇ灏忥紝鍙互閬垮厤澶皬鐪嬩笉瑙�
minimumPixelSize: 0, // 鏈�灏忓儚绱犲ぇ灏忥紝鍙互閬垮厤澶皬鐪嬩笉瑙�
@@ -336,8 +369,114 @@
leadTime: 60,
trailTime: 60
},
- orientation: new Cesium.VelocityOrientationProperty(positionProperty),
+ orientation: Cesium.Quaternion.fromHeadingPitchRoll(
+ new Cesium.HeadingPitchRoll(
+ Cesium.Math.toRadians(45), // 鑸悜瑙�(姝ｅ寳涓�0锛岄『鏃堕拡澧炲姞)
+ Cesium.Math.toRadians(45), // 淇话瑙�
+ Cesium.Math.toRadians(0) // 缈绘粴瑙�
+ )
+ ),
})
+ },
+ // 鏇存柊瑙嗛敟浣撲綅缃拰鏈濆悜
+ updateFrustum() {
+ console.log(this.c3Position)
+ console.log(this.pitch)
+ console.log(this.heading)
+ console.log(this.roll)
+ // 鏇存柊瑙嗛敟浣撲綅缃�
+ // this.c3Position = Cesium.Cartesian3.fromDegrees(114.169, 22.278, 500); // 鍔ㄦ�佹洿鏂颁綅缃�
+ if (this.frustumOutline) {
+ // 鏇存柊鐩告満鍜岃閿ヤ綋浣嶇疆
+ this.camera.setView({
+ up: Cesium.Cartesian3.UNIT_Z,
+ destination: this.c3Position,
+ orientation: {
+ heading: Cesium.Math.toRadians(this.heading),
+ pitch: Cesium.Math.toRadians(this.pitch),
+ roll: Cesium.Math.toRadians(this.roll),
+ },
+ });
+
+ // 鍙湪frustumOutline瀛樺湪鏃惰皟鐢╱pdate
+ this.frustumOutline.update();
+ } else {
+ console.warn('Frustum outline is not initialized');
+ }
+ // 鏇存柊瑙嗛敟浣撹竟妗�
+ console.log(this.frustumOutline)
+ // this.frustumOutline.update();
+ },
+ listenChange() {
+ let viewer = window.viewer;
+ viewer.clock.onTick.addEventListener(() => {
+ if (viewer.clock.shouldAnimate) {
+ this.getCurrentPosition()
+ // 鎵ц鍔ㄤ綔
+ console.log("Clock is running, performing action...");
+ // 浣犵殑浠ｇ爜閫昏緫
+ } else {
+ // 鏃堕挓鏆傚仠鏃朵笉鎵ц
+ console.log("Clock is paused, no action performed.");
+ }
+ });
+ },
+ getCurrentPosition() {
+ // 鑾峰彇褰撳墠鏃堕棿
+ const currentTime = viewer.clock.currentTime;
+
+ // 浠� positionProperty 涓幏鍙栧綋鍓嶄綅缃�
+ console.log(this.positionProperty)
+ const currentPosition = this.positionProperty.getValue(currentTime);
+
+ // 濡傛灉鑾峰彇鍒颁綅缃�
+ if (currentPosition) {
+ // 灏嗕綅缃粠 Cartesian 杞崲涓� Cartographic
+ const cartographicPosition = Cesium.Cartographic.fromCartesian(currentPosition);
+
+ // 灏嗙粡绾害浠庡姬搴﹁浆鎹负搴�
+ this.currentLongitude = Cesium.Math.toDegrees(cartographicPosition.longitude);
+ 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}`);
+ this.updateFrustum();
+ } else {
+ console.log("鏃犳硶鑾峰彇褰撳墠浣嶇疆");
+ }
+ },
+ showGZ(){
+ let viewer = window.viewer;
+ this.camera = new Cesium.Camera(viewer.scene)
+ // 瑙嗛敟浣撳弬鏁�
+ this.camera.frustum = new Cesium.PerspectiveFrustum({
+ fov: Cesium.Math.PI_OVER_THREE,
+ // aspectRatio: this.aspectRatio,
+ aspectRatio: 1920 / 1080,
+ });
+ this.camera.setView({
+ up: Cesium.Cartesian3.UNIT_Z,
+ destination: this.c3Position,
+ orientation: {
+ // heading: Cesium.Math.toRadians(this.heading),
+ // pitch: Cesium.Math.toRadians(this.pitch),
+ // roll: Cesium.Math.toRadians(this.roll),
+ heading: Cesium.Math.toRadians(this.heading),
+ pitch: Cesium.Math.toRadians(this.pitch),
+ roll: Cesium.Math.toRadians(this.roll),
+ },
+ })
+ this.frustumOutline = new Cesium.DebugCameraPrimitive({
+ // id: this.id,
+ id: 111111,
+ camera: this.camera,
+ frustumSplits: [0.01, 10000],
+ color: Cesium.Color.fromCssColorString('#00ff00'),
+ updateOnChange: false,
+ })
+ console.log(this.frustumOutline)
+ viewer.scene.primitives.add(this.frustumOutline);
+ this.listenChange()
}
}
--
Gitblit v1.9.3