From f16045cde17854377084335c478e3cae0d08d6b8 Mon Sep 17 00:00:00 2001
From: wangjuncheng <1>
Date: 星期四, 15 五月 2025 14:18:38 +0800
Subject: [PATCH] change
---
src/components/tools/Legend_zhjc.vue | 2
src/components/monifangzhen/schemeInfo.vue | 150 +++++++-------
src/assets/img/timeline/流速.png | 0
src/assets/img/timeline/坐标.png | 0
src/components/tools/Legend_mnfz.vue | 73 +++++++
src/api/trApi.js | 2
src/views/mnfz.vue | 16 +
src/components/menu/flowRate_waterLevel.vue | 192 +++++++++++++++++++
src/components/tools/Legend_yhgl.vue | 2
src/views/GisView.vue | 2
src/assets/img/timeline/水位.png | 0
src/assets/img/timeline/清除.png | 0
src/utils/water.js | 67 ++++--
src/components/menu/TimeLine.vue | 89 ++++++--
14 files changed, 470 insertions(+), 125 deletions(-)
diff --git a/src/api/trApi.js b/src/api/trApi.js
index 806a96e..144dcd8 100644
--- a/src/api/trApi.js
+++ b/src/api/trApi.js
@@ -94,7 +94,7 @@
// 閫氳繃鎺ュ彛鍘昏姹俲son锛屽皢璇锋眰鐨刯son瑙ｆ瀽鑾峰彇娉ョ煶娴佸弬鏁�
export async function fetchWaterSimulationData() {
try {
- const response = await fetch("/simu/c2h1dc/layer.json"); // 鍙戣捣璇锋眰
+ const response = await fetch("/simu/20250515111549/layer.json"); // 鍙戣捣璇锋眰
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
diff --git "a/src/assets/img/timeline/\345\235\220\346\240\207.png" "b/src/assets/img/timeline/\345\235\220\346\240\207.png"
new file mode 100644
index 0000000..82416d2
--- /dev/null
+++ "b/src/assets/img/timeline/\345\235\220\346\240\207.png"
Binary files differ
diff --git "a/src/assets/img/timeline/\346\260\264\344\275\215.png" "b/src/assets/img/timeline/\346\260\264\344\275\215.png"
new file mode 100644
index 0000000..e25e49a
--- /dev/null
+++ "b/src/assets/img/timeline/\346\260\264\344\275\215.png"
Binary files differ
diff --git "a/src/assets/img/timeline/\346\265\201\351\200\237.png" "b/src/assets/img/timeline/\346\265\201\351\200\237.png"
new file mode 100644
index 0000000..4ecced5
--- /dev/null
+++ "b/src/assets/img/timeline/\346\265\201\351\200\237.png"
Binary files differ
diff --git "a/src/assets/img/timeline/\346\270\205\351\231\244.png" "b/src/assets/img/timeline/\346\270\205\351\231\244.png"
new file mode 100644
index 0000000..2861484
--- /dev/null
+++ "b/src/assets/img/timeline/\346\270\205\351\231\244.png"
Binary files differ
diff --git a/src/components/menu/TimeLine.vue b/src/components/menu/TimeLine.vue
index ed7aebc..a020297 100644
--- a/src/components/menu/TimeLine.vue
+++ b/src/components/menu/TimeLine.vue
@@ -28,6 +28,10 @@
<div v-for="(date, index) in visibleDates" :key="index" class="date-label">
<!-- {{ formatDate(date) }} -->
</div>
+ <!-- 涓撻娓叉煋:
+ <el-switch v-model="isColorRenderEnabled" @change="handleColorRenderChange" style="margin-top:-3px"
+ :disabled="!isPlaying || !isWaterPrimitiveCreated" /> -->
+ <!-- active-text="寮�" inactive-text="鍏�" -->
</div>
<div class="timeline-track" ref="timelineTrack" @click="seekToPosition">
<div class="timeline-progress" :style="{ width: progressPercentage + '%' }"></div>
@@ -39,7 +43,12 @@
</div>
</div>
</div>
- <el-button @click="handleBack" style="margin-top: 26px; margin-left: 30px; margin-right: 10px">缁撴潫妯℃嫙</el-button>
+ <div>
+ <ratelevel ref="ratelevelRef" :playing-time="sendCurrentPlayingTime" @finish-calculation="handleFinishCalculation"
+ style="margin-top: 8px; margin-left: 28px; margin-right: 10px;justify-content: flex-end;"></ratelevel>
+ <el-button @click="handleBack" style="margin-top: 3px; margin-left: 30px; margin-right: 10px">缁撴潫妯℃嫙</el-button>
+ </div>
+
</div>
</template>
@@ -54,14 +63,16 @@
inject,
reactive
} from "vue";
+import ratelevel from "@/components/menu/flowRate_waterLevel.vue";
+
import dayjs from "dayjs";
-import { getRainfall } from "@/api/index";
import {
createWaterPrimitive,
destoryWaterPrimitive,
pauseWaterSimulation,
resumeWaterSimulation,
setTimeForWaterSimulation,
+ toggleWaterColorRender,
} from "@/utils/water";
import mapUtils from "@/utils/tools.js";
import { fetchWaterSimulationData } from "@/api/trApi.js";
@@ -71,9 +82,7 @@
import { storeToRefs } from "pinia";
const simStore = useSimStore();
const { selectedScheme } = storeToRefs(simStore);
-
-const emit = defineEmits(["timeUpdate", "isPlaying", "playbackFinished"]);
-
+const emit = defineEmits(["timeUpdate", "isPlaying", "playbackFinished", "isColorRender"]);
// 瀹氫箟props
const props = defineProps({
waterSimulateParams: {
@@ -83,9 +92,10 @@
}),
},
});
-
// 鍝嶅簲寮忕姸鎬�
+const ratelevelRef = ref(null); // 鑾峰彇瀛愮粍浠跺疄渚嬬殑寮曠敤
const currentPlayingTime = ref(""); // 褰撳墠鎾斁鏃堕棿
+const sendCurrentPlayingTime = ref(""); // 褰撳墠鎾斁鏃堕棿
const isPlaying = ref(false);
const playbackFinished = ref(true);
const currentTime = ref(0);
@@ -96,7 +106,7 @@
const waterTimestamps = ref([]); // 瀛樺偍鏃堕棿杞存暟鎹�
const timeMarkers = ref([]);
const timelineTrack = ref(null);
-// 鏂板鏍囪瘑鍙橀噺
+const isColorRenderEnabled = ref(false); // 鍋囪杩欐槸浣犵殑棰滆壊娓叉煋寮�鍏崇姸鎬�
const isWaterPrimitiveCreated = ref(false);
let playInterval = null;
const isRainEnabled = ref(false);
@@ -107,8 +117,6 @@
rainDensity: 30 // 闆ㄧ殑瀵嗗害
});
// 璁＄畻灞炴��
-const startDate = computed(() => dayjs(props.waterSimulateParams.date[0]));
-const endDate = computed(() => dayjs(props.waterSimulateParams.date[1]));
const progressPercentage = computed(
() => (currentTime.value / duration.value) * 100
);
@@ -117,40 +125,62 @@
new Set(waterTimestamps.value.map((ts) => dayjs(ts).format("YYYY-MM-DD")))
).map((date) => dayjs(date).toDate())
);
-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) {
- // 绗竴娆℃挱鏀炬椂鍒涘缓姘翠綋妯℃嫙灞�
console.log(selectedScheme.value, '杩欓噷鏄綋鍓嶆柟妗堢殑鍏ㄩ儴淇℃伅');
- createWaterPrimitive({ interval: intervalMap[playbackRate.value], baseUrl: "/simu/c2h1dc" });
- isWaterPrimitiveCreated.value = true; // 鏍囪涓哄凡鍒涘缓
+ // 杩欓噷閫氳繃water.js涓幓鍙戦�佽姹傝幏鍙栨按闈㈡ā鎷�
+ createWaterPrimitive({
+ baseUrl: "/simu/20250515111549",
+ interval: intervalMap[playbackRate.value],
+ colorRender: isColorRenderEnabled.value
+ });
+ isWaterPrimitiveCreated.value = true;
} else {
- // 鍚庣画鎾斁鏃惰皟鐢ㄦ仮澶嶆帴鍙�
resumeWaterSimulation();
+ toggleWaterColorRender(isColorRenderEnabled.value); // 鏇存柊棰滆壊娓叉煋
}
+
if (currentTime.value === 0) emit("playbackFinished", false);
- // 鎭㈠涓嬮洦鏁堟灉
+
if (isRainEnabled.value) {
mapUtils.toggleRain(rainParams, true);
}
} else {
stopPlayback();
- pauseWaterSimulation(); // 璋冪敤鏆傚仠鎺ュ彛
- // 鍋滄涓嬮洦鏁堟灉
- isRainEnabled.value = true; // 淇濆瓨褰撳墠闇�瑕佷笅闆ㄧ殑鐘舵��
+ pauseWaterSimulation();
+
+ isRainEnabled.value = true;
setTimeout(() => {
mapUtils.delRain();
}, 3000);
}
};
+// 棰滆壊娓叉煋鍒囨崲浜嬩欢
+const handleColorRenderChange = (enabled) => {
+ if (!isPlaying.value) {
+ ElMessage({
+ message: "璇峰厛鍚姩姘翠綋妯℃嫙鍚庡啀杩涜涓撻鏁堟灉鍒囨崲銆�",
+ type: "warning",
+ });
+ return; // 闃绘鍚庣画閫昏緫鎵ц
+ }
+ if (isWaterPrimitiveCreated.value) {
+ console.log('褰撳墠鏄惁寮�鍚笓棰樻覆鏌擄細', enabled);
+ emit("isColorRender", enabled)
+ toggleWaterColorRender(enabled);
+ }
+};
const intervalMap = {
1: 1000, // 1鍊嶉��
2: 500, // 2鍊嶉��
@@ -159,7 +189,7 @@
};
// 鎾斁閫昏緫
const startPlayback = () => {
- const interval = intervalMap[playbackRate.value] || 1000; // 榛樿涓�1000
+ // const interval = intervalMap[playbackRate.value] || 1000; // 榛樿涓�1000
clearInterval(playInterval); // 娓呴櫎涔嬪墠鐨勫畾鏃跺櫒
playInterval = setInterval(() => {
const timeIncrement = playbackRate.value; // 鍊嶉�熶綔涓哄閲�
@@ -419,9 +449,12 @@
() => currentTime.value,
() => {
if (waterTimestamps.value.length > 0) {
- currentPlayingTime.value = dayjs(waterTimestamps.value[0])
+ sendCurrentPlayingTime.value = dayjs(waterTimestamps.value[0])
.add(currentTime.value, "second")
- .format("YYYY-MM-DD mm:ss");
+ .valueOf(); // 浣跨敤 valueOf() 鑾峰彇鍘熷鏃堕棿鎴�
+
+ // 鏇存柊 currentPlayingTime 鏍煎紡鍖栧悗鐨勬椂闂村瓧绗︿覆
+ currentPlayingTime.value = dayjs(sendCurrentPlayingTime.value).format("YYYY-MM-DD HH:mm:ss");
EventBus.emit("time-update", currentPlayingTime.value);
}
}
@@ -432,12 +465,12 @@
if (!timestamps || timestamps.length === 0) return [];
const sorted = [...timestamps].sort((a, b) => dayjs(a).diff(dayjs(b)));
const interval = Math.floor(
- dayjs(sorted.at(-1)).diff(dayjs(sorted[0]), "second") / 7
+ dayjs(sorted.at(-1)).diff(dayjs(sorted[0]), "second") / 5
);
- return Array.from({ length: 8 }, (_, i) =>
+ return Array.from({ length: 6 }, (_, i) =>
dayjs(sorted[0])
.add(i * interval, "second")
- .format("mm:ss")
+ .format("HH:mm:ss")
);
}
@@ -453,11 +486,13 @@
onMounted(async () => {
try {
getRainfallData()
+ // 鏍规嵁layer.json鍘昏幏鍙栨椂闂磋酱淇℃伅
const { waterTimestamps: timestamps } = await fetchWaterSimulationData();
if (timestamps) {
waterTimestamps.value = timestamps;
updateTimelineRange();
timeMarkers.value = generateTimeMarkers(timestamps);
+ sendCurrentPlayingTime.value = timestamps[0]
currentPlayingTime.value = dayjs(timestamps[0]).format(
"YYYY-MM-DD HH:mm:ss"
);
@@ -492,6 +527,10 @@
const { endSimulate } = inject("simulateActions");
function handleBack() {
+ if (ratelevelRef.value) {
+ ratelevelRef.value.endCalculation();
+ }
+ emit("isColorRender", false);
setTimeout(() => {
mapUtils.delRain();
}, 3000);
diff --git a/src/components/menu/flowRate_waterLevel.vue b/src/components/menu/flowRate_waterLevel.vue
new file mode 100644
index 0000000..297c445
--- /dev/null
+++ b/src/components/menu/flowRate_waterLevel.vue
@@ -0,0 +1,192 @@
+<template>
+ <div style="display: flex;justify-content: space-between;">
+ <!-- 閫夌偣鎸夐挳 -->
+ <div @click="togglePick" :class="['pick-button', { active: isPickingActive }]">
+ <img src="@/assets/img/timeline/鍧愭爣.png" style="width: 26px;height: 26px;" />
+ <!-- <span v-if="isPickingActive">鍋滄鎷惧彇</span>
+ <span v-else>寮�濮嬫嬀鍙�</span> -->
+ </div>
+ <!-- 寮�濮嬭绠楁寜閽� -->
+ <!-- <div @click="startCalculation">
+ <img src="@/assets/img/timeline/姘翠綅.png" style="margin-top: -4px;width: 34px;height: 34px;" />
+ </div> -->
+ <!-- 缁撴潫璁＄畻鎸夐挳 -->
+ <div @click="endCalculation">
+ <img src="@/assets/img/timeline/娓呴櫎.png" style="width: 26px;height: 26px;" />
+ </div>
+ </div>
+</template>
+
+<script setup>
+import { defineProps, watch, ref, onMounted, defineExpose } from "vue";
+import { ElMessage } from 'element-plus';
+
+const pickedPoints = ref([]);
+const handler = ref(null);
+const isPickingActive = ref(false);
+const currentTime = ref(0);
+
+const props = defineProps({
+ playingTime: {
+ type: String,
+ required: true
+ }
+});
+
+watch(
+ () => props.playingTime,
+ (newVal) => {
+ currentTime.value = newVal;
+ },
+ { immediate: true }
+);
+// Cesium viewer 鍒濆鍖栫浉鍏抽�昏緫
+const viewer = window.viewer;
+
+function getPickPosition(windowPosition) {
+ if (!viewer) return null;
+ viewer.scene.globe.depthTestAgainstTerrain = true;
+ const cartesian = viewer.scene.pickPosition(windowPosition);
+ if (!cartesian) return null;
+ const cartographic = Cesium.Cartographic.fromCartesian(cartesian);
+ cartographic.height += 200.0;
+ return {
+ cartesian: Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, cartographic.height),
+ longitude: Cesium.Math.toDegrees(cartographic.longitude),
+ latitude: Cesium.Math.toDegrees(cartographic.latitude),
+ height: cartographic.height
+ };
+}
+function addPointToViewer(point, index) {
+ // 纭繚 currentTime 鏈夊悎鐞嗗��
+ const displayTime = currentTime.value || "鏈缃椂闂�";
+
+ // 娣诲姞鏍囩锛堢‘淇濆疄浣撳垱寤烘椂鍖呭惈label灞炴�э級
+ const entity = viewer.entities.add({
+ position: point.cartesian,
+ label: {
+ text: `娴嬮噺鐐� ${index + 1}\n缁忓害: ${point.longitude.toFixed(6)}\n绾害: ${point.latitude.toFixed(6)}\n鏃堕棿: ${displayTime}`,
+ font: '14pt monospace', // 鍑忓皬瀛椾綋澶у皬
+ style: Cesium.LabelStyle.FILL_AND_OUTLINE,
+ fillColor: Cesium.Color.YELLOW,
+ outlineColor: Cesium.Color.BLACK,
+ outlineWidth: 2, // 鍑忓皬杞粨瀹藉害
+ verticalOrigin: Cesium.VerticalOrigin.CENTER,
+ horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+ backgroundColor: Cesium.Color.fromCssColorString('rgba(0,0,0,0.7)'),
+ backgroundPadding: new Cesium.Cartesian2(10, 10), // 鍑忓皬鑳屾櫙濉厖
+ showBackground: true,
+ scale: 1, // 璁剧疆缂╂斁姣斾緥
+ maximumScale: 1.5, // 璁剧疆鏈�澶х缉鏀炬瘮渚�
+ }
+ });
+
+ // 娣诲姞鍨傜洿绾�
+ viewer.entities.add({
+ polyline: {
+ positions: [point.cartesian, Cesium.Cartesian3.fromRadians(point.longitude * Math.PI / 180, point.latitude * Math.PI / 180, 0)],
+ width: 2,
+ material: new Cesium.PolylineOutlineMaterialProperty({
+ outlineWidth: 4,
+ outlineColor: Cesium.Color.WHITE
+ })
+ }
+ });
+
+ // 瀛樺偍鐐圭殑淇℃伅锛堝寘鍚畬鏁寸殑entity寮曠敤锛�
+ pickedPoints.value.push({
+ entity: entity,
+ longitude: point.longitude,
+ latitude: point.latitude,
+ });
+}
+
+function initPickHandler() {
+ if (!viewer?.scene?.canvas) return;
+
+ if (handler.value) {
+ handler.value.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
+ handler.value.destroy();
+ handler.value = null;
+ }
+
+ handler.value = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
+
+ handler.value.setInputAction((movement) => {
+ const position = getPickPosition(movement.position);
+ if (position) {
+ const index = pickedPoints.value.length;
+ addPointToViewer(position, index);
+ }
+ }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
+}
+
+function startPicking() {
+ // pickedPoints.value = [];
+ // viewer.entities.removeAll();
+ if (!handler.value) {
+ initPickHandler(); // 鍙湁绗竴娆℃墠鍒濆鍖�
+ }
+
+ isPickingActive.value = true;
+ ElMessage.success('寮�濮嬫嬀鍙栧潗鏍囷紝璇风偣鍑诲湴鍥鹃�夋嫨鐐逛綅锛�');
+}
+
+function stopPicking() {
+ if (handler.value) {
+ handler.value.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
+ handler.value.destroy();
+ handler.value = null;
+ }
+ isPickingActive.value = false;
+}
+
+function togglePick() {
+ if (isPickingActive.value) {
+ stopPicking(); // 璋冪敤 stopPicking 鏉ユ纭湴鍋滄閫夊彇杩囩▼
+ isPickingActive.value = false; // 纭繚 isPickingActive 璁剧疆涓� false
+ ElMessage.success('褰撳墠鍧愭爣宸查�夊彇瀹屾垚锛佹按浣嶆祦閫熸祴閲忓噯澶囧畬姣曪紒');
+ console.log(pickedPoints.value, '鏈�缁堥�夊彇鐨勭偣');
+ } else {
+ startPicking();
+ isPickingActive.value = true; // 鍦ㄥ紑濮嬮�夊彇鍓嶈缃负 true
+ }
+}
+// 褰� currentTime 鏀瑰彉鏃舵洿鏂版墍鏈夌偣鐨� label 涓殑鏃堕棿鎴�
+// 淇敼watch閫昏緫
+watch(
+ () => props.playingTime,
+ (newVal) => {
+ currentTime.value = newVal || "鏈缃椂闂�";
+ updateAllLabels();
+ },
+ { immediate: true }
+);
+
+function updateAllLabels() {
+ pickedPoints.value.forEach((pointInfo, index) => {
+ if (pointInfo.entity && pointInfo.entity.label) {
+ pointInfo.entity.label.text =
+ `娴嬮噺鐐� ${index + 1}\n缁忓害: ${pointInfo.longitude.toFixed(6)}\n绾害: ${pointInfo.latitude.toFixed(6)}\n鏃堕棿: ${currentTime.value}`;
+ }
+ });
+}
+
+function startCalculation() {
+ console.log('閫夊彇鐨勫潗鏍囩偣锛�', pickedPoints.value);
+ console.log(`褰撳墠鏃堕棿锛�${currentTime.value}`);
+}
+
+function endCalculation() {
+ ElMessage.success('娓呴櫎鎵�鏈夋祴閲忕偣锛�');
+ pickedPoints.value = [];
+ viewer.entities.removeAll();
+ // currentTime.value = 0;
+}
+defineExpose({
+ endCalculation
+});
+
+</script>
+
+<style lang="less" scoped></style>
\ No newline at end of file
diff --git a/src/components/monifangzhen/schemeInfo.vue b/src/components/monifangzhen/schemeInfo.vue
index cdbbb72..d03fcde 100644
--- a/src/components/monifangzhen/schemeInfo.vue
+++ b/src/components/monifangzhen/schemeInfo.vue
@@ -1,9 +1,9 @@
<template>
<div class="listCard">
<div class="top"><span>鏂规璇︽儏</span>
- <div @click="togglePick" :class="['pick-button', { active: isPickingActive }]">
+ <!-- <div @click="togglePick" :class="['pick-button', { active: isPickingActive }]">
{{ isPickingActive ? '杩涜璁＄畻' : '寮�濮嬫嬀鍙�' }}
- </div>
+ </div> -->
</div>
<div class="details">
<div v-if="formattedData.length" class="input-group">
@@ -34,9 +34,7 @@
// 鐘舵�佺鐞�
const formattedData = ref([]);
-const pickedPoints = ref([]);
-const handler = ref(null);
-const isPickingActive = ref(false);
+
// 鏄犲皠琛�
const areaTypeMap = {
@@ -148,88 +146,90 @@
},
{ immediate: true }
);
+// const pickedPoints = ref([]);
+// const handler = ref(null);
+// const isPickingActive = ref(false);
+// // 鎷惧彇鐩稿叧閫昏緫
+// const viewer = window.viewer;
-// 鎷惧彇鐩稿叧閫昏緫
-const viewer = window.viewer;
+// function getPickPosition(windowPosition) {
+// if (!viewer) return null;
+// viewer.scene.globe.depthTestAgainstTerrain = true;
+// const cartesian = viewer.scene.pickPosition(windowPosition);
+// if (!cartesian) return null;
-function getPickPosition(windowPosition) {
- if (!viewer) return null;
- viewer.scene.globe.depthTestAgainstTerrain = true;
- const cartesian = viewer.scene.pickPosition(windowPosition);
- if (!cartesian) return null;
-
- const cartographic = Cesium.Cartographic.fromCartesian(cartesian);
+// const cartographic = Cesium.Cartographic.fromCartesian(cartesian);
- // 鍦ㄥ師鏈夐珮搴︿笂澧炲姞300绫�
- cartographic.height += 80.0;
+// // 鍦ㄥ師鏈夐珮搴︿笂澧炲姞300绫�
+// cartographic.height += 80.0;
- return {
- cartesian: Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, cartographic.height),
- longitude: Cesium.Math.toDegrees(cartographic.longitude),
- latitude: Cesium.Math.toDegrees(cartographic.latitude),
- height: cartographic.height
- };
-}
+// return {
+// cartesian: Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, cartographic.height),
+// longitude: Cesium.Math.toDegrees(cartographic.longitude),
+// latitude: Cesium.Math.toDegrees(cartographic.latitude),
+// height: cartographic.height
+// };
+// }
-function addPointToViewer(point, index) {
- const entity = viewer.entities.add({
- position: point.cartesian,
- billboard: {
- // image: '../path/to/your/icon.png', // 鏇挎崲涓轰綘鐨勫浘鏍囪矾寰�
- width: 32, // 鍥炬爣瀹藉害
- height: 32, // 鍥炬爣楂樺害
- verticalOrigin: Cesium.VerticalOrigin.BOTTOM
- },
- label: {
- text: `Point ${index + 1}\n缁忓害: ${point.longitude.toFixed(6)}\n绾害: ${point.latitude.toFixed(6)}`,
- font: '14pt monospace',
- style: Cesium.LabelStyle.FILL_AND_OUTLINE,
- outlineWidth: 2,
- verticalOrigin: Cesium.VerticalOrigin.TOP,
- pixelOffset: new Cesium.Cartesian2(0, -40), // 璋冩暣鏍囩鐩稿浜庡浘鏍囩殑鍋忕Щ閲�
- fillColor: Cesium.Color.WHITE,
- outlineColor: Cesium.Color.BLACK
- }
- });
+// function addPointToViewer(point, index) {
+// const entity = viewer.entities.add({
+// position: point.cartesian,
+// billboard: {
+// // image: '../path/to/your/icon.png', // 鏇挎崲涓轰綘鐨勫浘鏍囪矾寰�
+// width: 32, // 鍥炬爣瀹藉害
+// height: 32, // 鍥炬爣楂樺害
+// verticalOrigin: Cesium.VerticalOrigin.BOTTOM
+// },
+// label: {
+// text: `Point ${index + 1}\n缁忓害: ${point.longitude.toFixed(6)}\n绾害: ${point.latitude.toFixed(6)}`,
+// font: '14pt monospace',
+// style: Cesium.LabelStyle.FILL_AND_OUTLINE,
+// outlineWidth: 2,
+// verticalOrigin: Cesium.VerticalOrigin.TOP,
+// pixelOffset: new Cesium.Cartesian2(0, -40), // 璋冩暣鏍囩鐩稿浜庡浘鏍囩殑鍋忕Щ閲�
+// fillColor: Cesium.Color.WHITE,
+// outlineColor: Cesium.Color.BLACK
+// }
+// });
- // 鍙�夛細瀛樺偍瀹炰綋寮曠敤浠ヤ究鍚庣画鎿嶄綔
- pickedPoints.value.push(entity);
-}
+// // 鍙�夛細瀛樺偍瀹炰綋寮曠敤浠ヤ究鍚庣画鎿嶄綔
+// pickedPoints.value.push(entity);
+// }
-function initPickHandler() {
- if (!viewer?.scene?.canvas) return;
- handler.value = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
+// function initPickHandler() {
+// if (!viewer?.scene?.canvas) return;
+// handler.value = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
- handler.value.setInputAction((movement) => {
- const position = getPickPosition(movement.position);
- if (position) {
- const index = pickedPoints.value.length;
- pickedPoints.value.push(position);
- addPointToViewer(position, index);
- }
- }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
-}
+// handler.value.setInputAction((movement) => {
+// const position = getPickPosition(movement.position);
+// if (position) {
+// const index = pickedPoints.value.length;
+// pickedPoints.value.push(position);
+// addPointToViewer(position, index);
+// }
+// }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
+// }
-function togglePick() {
- isPickingActive.value ? stopPicking() : startPicking();
-}
+// function togglePick() {
+// isPickingActive.value ? stopPicking() : startPicking();
+// }
-function startPicking() {
- pickedPoints.value = [];
- viewer.entities.removeAll();
- !handler.value && initPickHandler();
- isPickingActive.value = true;
-}
+// function startPicking() {
+// pickedPoints.value = [];
+// viewer.entities.removeAll();
+// !handler.value && initPickHandler();
+// isPickingActive.value = true;
+// }
-function stopPicking() {
- if (handler.value) {
- handler.value.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
- handler.value.destroy();
- handler.value = null;
- }
+// function stopPicking() {
+// if (handler.value) {
+// handler.value.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
+// handler.value.destroy();
+// handler.value = null;
+// }
- isPickingActive.value = false;
-}
+// isPickingActive.value = false;
+// }
</script>
<style lang="less" scoped>
diff --git a/src/components/tools/Legend_mnfz.vue b/src/components/tools/Legend_mnfz.vue
new file mode 100644
index 0000000..eb1f228
--- /dev/null
+++ b/src/components/tools/Legend_mnfz.vue
@@ -0,0 +1,73 @@
+<template>
+ <div class="legend-container">
+ <div class="legend-title">姘翠綅楂樺害鍥句緥</div>
+ <ul class="legend-list">
+ <li v-for="(item, index) in waterHeightLevels" :key="index" class="legend-item">
+ <span class="legend-color-box" :style="{ 'background-color': item.color }"></span>
+ <span class="legend-label">{{ item.height }} 绫�</span>
+ </li>
+ </ul>
+ </div>
+</template>
+
+<script setup>
+import { onMounted, ref } from "vue";
+
+// 瀹氫箟姘翠綅楂樺害鏁版嵁
+const waterHeightLevels = ref([
+ { height: 0.5, color: "#09a2dc" },
+ { height: 1.0, color: "#58c196" },
+ { height: 1.5, color: "#bedf74" },
+ { height: 2.0, color: "#d7f06e" },
+ { height: 2.5, color: "#ffe930" },
+ { height: 3.0, color: "#fdd10a" },
+ { height: 4.0, color: "#feb652" },
+ { height: 5.0, color: "#fd7f06" },
+ { height: 10.0, color: "#fe2b07" },
+]);
+onMounted(()=>{
+})
+</script>
+
+<style lang="less" scoped>
+.legend-container {
+ padding: 1rem;
+ border: 1px solid #ddd;
+ border-radius: 8px;
+ max-width: 100%;
+ width: auto;
+ font-size: clamp(10px, 1vw, 14px);
+}
+
+.legend-title {
+ width: 100%;
+ text-align: center;
+ letter-spacing: 2px;
+ font-weight: 600;
+ font-size: clamp(16px, 1vw, 20px);
+}
+
+.legend-list {
+ list-style: none;
+ padding: 0;
+ display: flex;
+ flex-direction: column;
+ gap: 0.5rem;
+}
+
+.legend-item {
+ display: flex;
+ align-items: center;
+}
+
+.legend-color-box {
+ width: 60px;
+ height: 10px;
+ margin-right: 0.5rem;
+ display: inline-block;
+}
+
+.legend-label {
+ font-size: inherit;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/tools/Legend_yhgl.vue b/src/components/tools/Legend_yhgl.vue
index 5bfe823..1fc72d8 100644
--- a/src/components/tools/Legend_yhgl.vue
+++ b/src/components/tools/Legend_yhgl.vue
@@ -1,6 +1,6 @@
<template>
<div class="legend-container">
- <div class="legend-title">鍥句緥璇存槑</div>
+ <div class="legend-title">鐩戞祴浣嶇疆鍥句緥</div>
<ul class="legend-list">
<li v-for="(item, index) in legendItems" :key="index" class="legend-item">
<img :src="getImageUrl(item.icon)" :alt="item.label" class="legend-icon" />
diff --git a/src/components/tools/Legend_zhjc.vue b/src/components/tools/Legend_zhjc.vue
index 242d1f9..b98d545 100644
--- a/src/components/tools/Legend_zhjc.vue
+++ b/src/components/tools/Legend_zhjc.vue
@@ -1,6 +1,6 @@
<template>
<div class="legend-container">
- <div class="legend-title">鍥句緥璇存槑</div>
+ <div class="legend-title">鐩戞祴璁惧鍥句緥</div>
<ul class="legend-list">
<li v-for="(item, index) in legendItems" :key="index" class="legend-item">
<img :src="getImageUrl(item.icon)" :alt="item.label" class="legend-icon" />
diff --git a/src/utils/water.js b/src/utils/water.js
index 15ed4fb..22723c3 100644
--- a/src/utils/water.js
+++ b/src/utils/water.js
@@ -17,20 +17,34 @@
* 鍒涘缓姘翠綋妯℃嫙灞�
* @param {Object} options - 鍙�夊弬鏁�
* @param {number} options.interval - 姘翠綋妯℃嫙鐨勬椂闂撮棿闅旓紙鍗曚綅锛氭绉掞級
+ * @param {string} options.baseUrl - 浠跨湡鏈嶅姟鍦板潃
+ * @param {boolean} options.colorRender - 鏄惁鍚敤棰滆壊娓叉煋
*/
export function createWaterPrimitive(options = {}) {
- const { baseUrl = "/simu/c2h1dc", interval = 1000 } = options; // 榛樿 baseUrl 鍜� interval
-
- water = earthCtrl.simulate.createWaterSimulateLayer({
- baseUrl, // 浠跨湡鏈嶅姟 URL
- interval, // 鍔ㄦ�佽缃� interval
- color: new SmartEarth.Cesium.Color.fromCssColorString("#D4F2E7"),
- loop: false, // 鏄惁寰幆鎾斁
- callback: timeCallback, // 鍥炶皟鍑芥暟
- });
- console.log(`Water simulation started with baseUrl: ${baseUrl}, interval: ${interval}ms`);
-}
+ const { baseUrl = "/simu/c2h1dc", interval = 1000, colorRender = true } = options;
+ water = earthCtrl.simulate.createWaterSimulateLayer({
+ baseUrl,
+ interval,
+ color: new SmartEarth.Cesium.Color.fromCssColorString("#D4F2E7"),
+ loop: false,
+ callback: timeCallback,
+ waterHeightLevels: [
+ { height: 0.5, color: "#09a2dc" },
+ { height: 1.0, color: "#58c196" },
+ { height: 1.5, color: "#bedf74" },
+ { height: 2.0, color: "#d7f06e" },
+ { height: 2.5, color: "#ffe930" },
+ { height: 3.0, color: "#fdd10a" },
+ { height: 4.0, color: "#feb652" },
+ { height: 5.0, color: "#fd7f06" },
+ { height: 10.0, color: "#fe2b07" },
+ ],
+ colorRender, // 鎺у埗鏄惁鍚敤棰滆壊娓叉煋
+ });
+
+ console.log(`Water simulation started with baseUrl: ${baseUrl}, interval: ${interval}ms, colorRender: ${colorRender}`);
+}
/**
* 鍒濆鍖栨按浣撴ā鎷熻鍥�
*/
@@ -77,28 +91,39 @@
/**
* 璺宠浆鍒版煇涓椂闂寸偣鐨勬按闈㈢姸鎬�
+ * @param {number} closestIndex - 鐩爣鏃堕棿鎴崇储寮�
*/
export function setTimeForWaterSimulation(closestIndex) {
- console.log(closestIndex,'index');
-
if (water) {
- const imageList = water.getTimeList(); // 鑾峰彇鎵�鏈夊彲鐢ㄦ椂闂存埑
- if (imageList.length === 0) {
+ const imageList = water.getTimeList();
+
+ if (!imageList.length) {
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]); // 璁剧疆鏃堕棿鎴筹紝璺宠浆鍒板搴旀椂鍒�
+
+ const idx = Math.floor(Math.random() * imageList.length);
+ console.log(`Jumping to timestamp: count:[${imageList.length}], index:[${closestIndex}]`);
+ water.setTime(imageList[closestIndex]);
} else {
console.warn("No water simulation to set time for.");
}
}
/**
+ * 璁剧疆鎴栧叧闂鑹叉覆鏌�
+ * @param {boolean} enabled
+ */
+export function toggleWaterColorRender(enabled) {
+ if (water) {
+ water.colorRender = enabled;
+ console.log(`Water color render set to: ${enabled}`);
+ } else {
+ console.warn("No water simulation to toggle color rendering.");
+ }
+}
+
+/**
* 鏃堕棿鎴冲洖璋冨嚱鏁�
* @param {number} timeStamp - 褰撳墠鏃堕棿鎴�
*/
diff --git a/src/views/GisView.vue b/src/views/GisView.vue
index 322259a..71f268b 100644
--- a/src/views/GisView.vue
+++ b/src/views/GisView.vue
@@ -444,7 +444,7 @@
initMap();
// 鍦ㄤ綘鐨勫垵濮嬪寲浠ｇ爜涓皟鐢ㄨ繖涓嚱鏁�
addCityPolygon();
- initHandler();
+ // initHandler();
// initView()
loadAreaPolygon("/json/nsl_area.geojson");
loadAreaPolygonAll("/json/geometry.json", true);
diff --git a/src/views/mnfz.vue b/src/views/mnfz.vue
index 2c3352b..141a4de 100644
--- a/src/views/mnfz.vue
+++ b/src/views/mnfz.vue
@@ -12,7 +12,9 @@
:waterSimulateParams="waterSimulateParams"
@playbackFinished="playbackFinished"
@end="endSimulate"
+ @isColorRender="isColorRender"
/>
+ <LegendMNFZ class="legend" v-if="isShowLegend"></LegendMNFZ>
<DebuffDetail
v-if="showDebuffDetail"
@open="openDetail"
@@ -25,6 +27,7 @@
import { EventBus } from "@/eventBus"; // 寮曞叆浜嬩欢鎬荤嚎
import { ref, onMounted, onUnmounted, provide } from "vue";
import TimeLine from "@/components/menu/TimeLine.vue";
+import LegendMNFZ from "@/components/tools/Legend_mnfz.vue";
import Left from "./left/Left.vue";
import echartInfo from "@/components/monifangzhen/echartInfo.vue";
import DebuffDetail from "@/components/tools/DebuffDetail.vue";
@@ -49,6 +52,7 @@
const showDebuffTable = ref(false);
const isDynamicMode = ref(false);
const isFinish = ref(true);
+const isShowLegend = ref(false);
const treeMap = new Map();
@@ -538,6 +542,10 @@
function playbackFinished(val) {
isFinish.value = val;
}
+function isColorRender(val){
+ console.log('杩欓噷鎵撳嵃鏄惁鏄剧ず姘翠綅鍥句緥鐨勫�硷細',val);
+ isShowLegend.value = val
+}
// 瀹氫箟鍏ㄥ眬鍙橀噺瀛樺偍褰撳墠姝ｅ湪闂姩鐨勯潰鐗�
let flashingPolygon = null;
@@ -645,4 +653,12 @@
</script>
<style lang="less" scoped>
@import url("../assets/css/home.css");
+.legend {
+ // background: url("@/assets/img/right/rightbg.png");
+ color: white;
+ position: fixed;
+ bottom: 6%;
+ right: 20%;
+ z-index: 3333;
+}
</style>
--
Gitblit v1.9.3