From 9567f017a3423bafafaf5f22ec1e5541d2b0f4bd Mon Sep 17 00:00:00 2001
From: wangjuncheng <1>
Date: 星期一, 28 四月 2025 16:24:15 +0800
Subject: [PATCH] change
---
src/utils/water.js | 178 +++++++++++++----------------
src/components/menu/TimeLine.vue | 131 +++++++++++++++++----
2 files changed, 185 insertions(+), 124 deletions(-)
diff --git a/src/components/menu/TimeLine.vue b/src/components/menu/TimeLine.vue
index 438e694..53d0823 100644
--- a/src/components/menu/TimeLine.vue
+++ b/src/components/menu/TimeLine.vue
@@ -82,7 +82,13 @@
inject,
} from "vue";
import dayjs from "dayjs";
-import { createWaterPrimitive, destoryWaterPrimitive } from "@/utils/water";
+import {
+ createWaterPrimitive,
+ destoryWaterPrimitive,
+ pauseWaterSimulation,
+ resumeWaterSimulation,
+ setTimeForWaterSimulation,
+} from "@/utils/water";
import { fetchWaterSimulationData } from "@/api/trApi.js";
import { EventBus } from "@/eventBus";
import { ElMessage } from "element-plus";
@@ -105,13 +111,14 @@
const playbackFinished = ref(true);
const currentTime = ref(0);
const duration = ref(60); // 涓�澶╃殑绉掓暟
-const playbackRate = ref(8);
+const playbackRate = ref(1);
const playbackRates = ref([1, 2, 4, 8]);
const showSpeedMenu = ref(false);
const waterTimestamps = ref([]); // 瀛樺偍鏃堕棿杞存暟鎹�
const timeMarkers = ref([]);
const timelineTrack = ref(null);
-
+// 鏂板鏍囪瘑鍙橀噺
+const isWaterPrimitiveCreated = ref(false);
let playInterval = null;
// 璁＄畻灞炴��
@@ -128,35 +135,46 @@
const currentTimeFormatted = computed(() => formatTime(currentTime.value));
// 鎾斁鎺у埗
+// 鎾斁鎺у埗
const togglePlay = () => {
- // 濡傛灉褰撳墠鏄仠姝㈢姸鎬佷笖宸茬粡鎾斁瀹屾瘯锛岀偣鍑绘椂閲嶇疆鏃堕棿
if (!isPlaying.value && currentTime.value >= duration.value)
- currentTime.value = 0;
+ currentTime.value = 0; // 濡傛灉宸茬粡鎾斁瀹屾瘯锛岄噸缃椂闂�
+
isPlaying.value = !isPlaying.value;
emit("isPlaying", isPlaying.value);
+
if (isPlaying.value) {
startPlayback();
- // 濡傛灉鏄粠澶村紑濮嬫挱鏀�
+ if (!isWaterPrimitiveCreated.value) {
+ // 绗竴娆℃挱鏀炬椂鍒涘缓姘翠綋妯℃嫙灞�
+ createWaterPrimitive({ interval: intervalMap[playbackRate.value] });
+ isWaterPrimitiveCreated.value = true; // 鏍囪涓哄凡鍒涘缓
+ } else {
+ // 鍚庣画鎾斁鏃惰皟鐢ㄦ仮澶嶆帴鍙�
+ resumeWaterSimulation();
+ }
if (currentTime.value === 0) emit("playbackFinished", false);
- } else stopPlayback();
+ } else {
+ stopPlayback();
+ pauseWaterSimulation(); // 璋冪敤鏆傚仠鎺ュ彛
+ }
};
+
+
const intervalMap = {
1: 1000, // 1鍊嶉��
2: 500, // 2鍊嶉��
4: 250, // 4鍊嶉��
8: 125, // 8鍊嶉��
};
+// 鎾斁閫昏緫
const startPlayback = () => {
- // 鏍规嵁褰撳墠鍊嶉�熻幏鍙栧搴旂殑 interval
const interval = intervalMap[playbackRate.value] || 1000; // 榛樿涓�1000
- // 璋冪敤 createWaterPrimitive 骞朵紶閫� interval
- createWaterPrimitive({ interval });
- clearInterval(playInterval);
+ clearInterval(playInterval); // 纭繚娓呴櫎涔嬪墠鐨勫畾鏃跺櫒
playInterval = setInterval(() => {
- // 璁＄畻姣忔澧炲姞鐨勬椂闂撮噺
- const timeIncrement = playbackRate.value; // 鍊嶉�熺洿鎺ヤ綔涓哄閲�
+ const timeIncrement = playbackRate.value; // 鍊嶉�熶綔涓哄閲�
currentTime.value += timeIncrement;
- // 濡傛灉瓒呰繃鎬绘椂闀匡紝鍒欏仠姝㈡挱鏀�
+
if (currentTime.value >= duration.value) {
currentTime.value = duration.value; // 鍋滃湪鏈�鍚庝竴甯�
stopPlayback();
@@ -164,39 +182,93 @@
emit("isPlaying", false);
emit("playbackFinished", true);
}
- // 瑙﹀彂鏃堕棿鏇存柊浜嬩欢
+
emit("timeUpdate", progressPercentage.value);
- }, 1000); // 姣忕鏇存柊涓�娆�
+ }, interval); // 鏍规嵁閫熺巼璋冩暣闂撮殧
};
-const stopPlayback = () => clearInterval(playInterval);
+const stopPlayback = () => {
+ clearInterval(playInterval);
+};
+
const skipForward = () =>
(currentTime.value = Math.min(currentTime.value + 1, duration.value)); // 鍚戝墠璺宠浆1绉�
+
const skipBackward = () =>
(currentTime.value = Math.max(currentTime.value - 1, 0)); // 鍚戝悗璺宠浆1绉�
+
const toggleSpeedMenu = () => (showSpeedMenu.value = !showSpeedMenu.value);
+
+// 璁剧疆鎾斁閫熺巼
const setPlaybackRate = (rate) => {
playbackRate.value = rate;
showSpeedMenu.value = false;
- if (isPlaying.value) stopPlayback(), startPlayback(); // 濡傛灉姝ｅ湪鎾斁锛屽垯閲嶆柊鍚姩浠ュ簲鐢ㄦ柊鐨勯�熺巼
+ // 鍋滄褰撳墠鎾斁
+ stopPlayback();
+
+ // 閲嶇疆鏃堕棿杞村埌鍒濆鐘舵��
+ currentTime.value = 0; // 鏃堕棿褰掗浂
+ emit("timeUpdate", progressPercentage.value);
+ isPlaying.value = false;
+ // 閿�姣佺幇鏈夌殑姘翠綋妯℃嫙灞�
+ if (isWaterPrimitiveCreated.value) {
+ destoryWaterPrimitive();
+ isWaterPrimitiveCreated.value = false; // 閲嶇疆鏍囧織鍙橀噺
+ }
+ isPlaying.value = false;
+ pauseWaterSimulation(); // 璋冪敤鏆傚仠鎺ュ彛
};
+// 鏃堕棿杞磋烦杞�
const seekToPosition = (event) => {
+ // 妫�鏌ユ槸鍚﹀凡缁忓垱寤轰簡姘翠綋妯℃嫙灞�
+ if (!isWaterPrimitiveCreated.value) {
+ ElMessage({
+ message: "璇峰厛鍚姩姘翠綋妯℃嫙鍚庡啀杩涜鏃堕棿杞磋烦杞��",
+ type: "warning",
+ });
+ return; // 闃绘鍚庣画閫昏緫鎵ц
+ }
const rect = timelineTrack.value.getBoundingClientRect();
const percentage = (event.clientX - rect.left) / rect.width;
+ // 璁＄畻褰撳墠鐐瑰嚮浣嶇疆瀵瑰簲鐨勬椂闂村��
currentTime.value = Math.round(percentage * duration.value);
emit("timeUpdate", progressPercentage.value);
if (waterTimestamps.value.length > 0) {
- const clickedTimestamp = dayjs(waterTimestamps.value[0]).add(
- currentTime.value,
- "second"
- );
+ // 鎵惧埌鏈�鎺ヨ繎鐨勬椂闂存埑绱㈠紩
+ const closestIndex = findClosestTimestampIndex(currentTime.value);
console.log(
- "Clicked timestamp:",
- clickedTimestamp.valueOf(),
- clickedTimestamp.format("YYYY-MM-DD HH:mm:ss")
+ "Clicked timestamp index:",
+ closestIndex,
+ "Time:",
+ dayjs(waterTimestamps.value[closestIndex]).format("YYYY-MM-DD HH:mm:ss")
);
+
+ // 璋冪敤璺宠浆鎺ュ彛锛屼紶閫掔储寮曞��
+ setTimeForWaterSimulation(closestIndex);
+
+ // 濡傛灉褰撳墠鏄殏鍋滅姸鎬侊紝璋冪敤 pauseWaterSimulation
+ if (!isPlaying.value) {
+ pauseWaterSimulation();
+ }
}
};
+
+// 杈呭姪鍑芥暟锛氭壘鍒版渶鎺ヨ繎鐨勬椂闂存埑绱㈠紩
+function findClosestTimestampIndex(currentTimeValue) {
+ let closestIndex = 0;
+ let minDiff = Infinity;
+
+ waterTimestamps.value.forEach((timestamp, index) => {
+ const diff = Math.abs(dayjs(timestamp).diff(dayjs(waterTimestamps.value[0]), "second") - currentTimeValue);
+ if (diff < minDiff) {
+ minDiff = diff;
+ closestIndex = index;
+ }
+ });
+
+ return closestIndex;
+}
+
watch(
() => currentTime.value,
() => {
@@ -209,6 +281,7 @@
}
}
);
+
// 鏃堕棿鏍囪鐢熸垚
function generateTimeMarkers(timestamps) {
if (!timestamps || timestamps.length === 0) return [];
@@ -222,6 +295,7 @@
.format("mm:ss")
);
}
+
watch(
() => waterTimestamps.value,
(newTimestamps) => {
@@ -264,15 +338,18 @@
});
}
}
+
onBeforeUnmount(() => {
stopPlayback();
- // destoryWaterPrimitive();
+ destoryWaterPrimitive();
});
+
const { endSimulate } = inject("simulateActions");
function handleBack() {
ElMessage({ message: "妯℃嫙杩涚▼姝ｅ湪鍏抽棴涓�...", type: "success" }); // 鏄剧ず娑堟伅閫氱煡鐢ㄦ埛妯℃嫙杩涚▼姝ｅ湪鍏抽棴
endSimulate();
- // destoryWaterPrimitive();
+ isWaterPrimitiveCreated.value = false
+ destoryWaterPrimitive();
EventBus.emit("hide-schemeInfo");
}
</script>
diff --git a/src/utils/water.js b/src/utils/water.js
index a130c77..7acbb37 100644
--- a/src/utils/water.js
+++ b/src/utils/water.js
@@ -1,110 +1,39 @@
import { cartesianToXY } from "@/utils/map";
+
let water = null;
+
+/**
+ * 閿�姣佹按浣撴ā鎷熷眰
+ */
export function destoryWaterPrimitive() {
if (water) {
water.destroy();
water = null;
+ console.log("Water simulation destroyed.");
}
}
-// export function createWaterPrimitive(rainfall) {
-// if (water) {
-// water.rainfall = rainfall;
-// return;
-// }
-// // let positionArray = [
-// // {
-// // x: -2172418.4199554003,
-// // y: 4339741.174232391,
-// // z: 4124707.9687457774,
-// // },
-// // {
-// // x: -2173054.1197314346,
-// // y: 4339420.091643301,
-// // z: 4124710.896091218,
-// // },
-// // {
-// // x: -2172832.10576698,
-// // y: 4338665.615224519,
-// // z: 4125615.341361447,
-// // },
-// // {
-// // x: -2171464.714295606,
-// // y: 4337884.628113293,
-// // z: 4127145.919793182,
-// // },
-// // {
-// // x: -2170738.824348358,
-// // y: 4338621.865525843,
-// // z: 4126755.442367371,
-// // },
-// // {
-// // x: -2171270.181257778,
-// // y: 4338967.11477535,
-// // z: 4126117.1692552743,
-// // },
-// // {
-// // x: -2171120.444962885,
-// // y: 4339310.237335228,
-// // z: 4125837.0031219805,
-// // },
-// // {
-// // x: -2171911.8873938583,
-// // y: 4339707.853907823,
-// // z: 4125007.7462886167,
-// // },
-// // {
-// // x: -2171934.494218292,
-// // y: 4339685.285760623,
-// // z: 4125019.506657141,
-// // },
-// // ];
-// // const coordinates = [];
-// // positionArray.forEach((item) => {
-// // const result = cartesianToXY(item);
-// // coordinates.push(result.longitude, result.latitude, result.height);
-// // });
-// // water = earthCtrl.analysis.createWaterSimulateGPU({
-// // //isDraw: true, // 鏄惁缁樺埗姘撮潰
-// // height: -5,
-// // maxHeight: 2000,
-// // coordinates: coordinates,
-// // // coordinates: [
-// // // 116.57628914253382, 40.5654461866556, 0, 116.57628914253382, 40.552898897029046, 0,
-// // // 116.60855621443835, 40.552898897029046, 0, 116.60855621443835, 40.5654461866556, 0,
-// // // ],
-// // // coordinates: [
-// // // 116.568865, 40.590729, 0, 116.568865, 40.533505, 0,
-// // // 116.608505, 40.533505, 0, 116.608505, 40.590729, 0,
-// // // ],
-// // })
-// water = earthCtrl.simulate.createWaterSimulateLayer({
-// // baseUrl: "http://192.168.10.187:81/20250412",
-// // baseUrl: "http://192.168.56.107:8088/simu/c2h1d", //浠跨湡鏈嶅姟url
-// baseUrl: "/simu/c2h1dc", //浠跨湡鏈嶅姟url
-// interval: 125, //涓ゅ抚璇锋眰鐨勬椂闂撮棿闅旓紝鍗曚綅ms
-// // color: new SmartEarth.Cesium.Color.fromCssColorString('#f4a460'),
-// //娓呮按鑹�
-// color: new SmartEarth.Cesium.Color.fromCssColorString("#D4F2E7"),
-// //娴戞按鑹�
-// // color: new SmartEarth.Cesium.Color.fromCssColorString('#DEB887'),
-// });
-// console.log("water", water);
-// // water.rainfall = 0.0001; // 璋冭妭闆ㄩ噺
-// // water.rainPointMax = 2.0; // 娓楁按闃堝��
-// // water.attenuation = 0.995; // 琛板噺
-// // water.strenght = 0.25 // 姘存祦寮哄害
-// }
+/**
+ * 鍒涘缓姘翠綋妯℃嫙灞�
+ * @param {Object} options - 鍙�夊弬鏁�
+ * @param {number} options.interval - 姘翠綋妯℃嫙鐨勬椂闂撮棿闅旓紙鍗曚綅锛氭绉掞級
+ */
export function createWaterPrimitive(options = {}) {
- const { interval = 1000 } = options; // 榛樿 interval 涓� 1000
-
- water = earthCtrl.simulate.createWaterSimulateLayer({
- baseUrl: "/simu/c2h1dc", // 浠跨湡鏈嶅姟url
- interval, // 鍔ㄦ�佽缃� interval
- color: new SmartEarth.Cesium.Color.fromCssColorString("#D4F2E7"),
- });
- console.log(`Water simulation started with interval: ${interval}ms`);
- }
+ const { interval = 1000 } = options; // 榛樿 interval 涓� 1000
+
+ water = earthCtrl.simulate.createWaterSimulateLayer({
+ baseUrl: "/simu/c2h1dc", // 浠跨湡鏈嶅姟 URL
+ interval, // 鍔ㄦ�佽缃� interval
+ color: new SmartEarth.Cesium.Color.fromCssColorString("#D4F2E7"),
+ loop: false, // 鏄惁寰幆鎾斁
+ callback: timeCallback, // 鍥炶皟鍑芥暟
+ });
+ console.log(`Water simulation started with interval: ${interval}ms`);
+}
+
+/**
+ * 鍒濆鍖栨按浣撴ā鎷熻鍥�
+ */
export function initeWaterPrimitiveView() {
let view = {
destination: {
@@ -119,5 +48,60 @@
},
};
viewer.scene.camera.flyTo(view);
+ console.log("Camera view initialized for water simulation.");
}
+/**
+ * 鏆傚仠姘翠綋妯℃嫙
+ */
+export function pauseWaterSimulation() {
+ if (water) {
+ water.pause();
+ console.log("Water simulation paused.");
+ } else {
+ console.warn("No water simulation to pause.");
+ }
+}
+
+/**
+ * 鎭㈠姘翠綋妯℃嫙
+ */
+export function resumeWaterSimulation() {
+ if (water) {
+ water.resume();
+ console.log("Water simulation resumed.");
+ } else {
+ console.warn("No water simulation to resume.");
+ }
+}
+
+/**
+ * 璺宠浆鍒版煇涓椂闂寸偣鐨勬按闈㈢姸鎬�
+ */
+export function setTimeForWaterSimulation(closestIndex) {
+ console.log(closestIndex,'index');
+
+ if (water) {
+ const imageList = water.getTimeList(); // 鑾峰彇鎵�鏈夊彲鐢ㄦ椂闂存埑
+ if (imageList.length === 0) {
+ console.warn("No timestamps available for water simulation.");
+ return;
+ }
+ const idx = Math.floor(Math.random() * imageList.length); // 闅忔満閫夋嫨涓�涓椂闂存埑
+ console.log(
+ `Jumping to timestamp: count:[${imageList.length}], index:[${idx}]`
+ );
+
+ water.setTime(imageList[closestIndex]); // 璁剧疆鏃堕棿鎴筹紝璺宠浆鍒板搴旀椂鍒�
+ } else {
+ console.warn("No water simulation to set time for.");
+ }
+}
+
+/**
+ * 鏃堕棿鎴冲洖璋冨嚱鏁�
+ * @param {number} timeStamp - 褰撳墠鏃堕棿鎴�
+ */
+function timeCallback(timeStamp) {
+ console.log(`Current timestamp: ${timeStamp}`);
+}
\ No newline at end of file
--
Gitblit v1.9.3