From 51af02271fe8a6d3e2db7bef90df1ea5f571a173 Mon Sep 17 00:00:00 2001
From: wangjuncheng <1>
Date: 星期一, 21 四月 2025 13:06:07 +0800
Subject: [PATCH] change
---
src/views/mnfz.vue | 280 ++++++++++++++++++++++++++++++++++++--------------------
1 files changed, 180 insertions(+), 100 deletions(-)
diff --git a/src/views/mnfz.vue b/src/views/mnfz.vue
index 13ba119..12afddf 100644
--- a/src/views/mnfz.vue
+++ b/src/views/mnfz.vue
@@ -1,23 +1,14 @@
<template>
<Left @start="startSimulate" @end="endSimulate" />
- <echartInfo :isDynamicMode="isDynamicMode" :isFinish="isFinish" />
- <TimeLine
- v-if="showWaterSimulate"
- @time-update="timeUpdate"
- @is-playing="isPlaying"
- :waterSimulateParams="waterSimulateParams"
- @playbackFinished="playbackFinished"
- @end="endSimulate"
- />
- <DebuffDetail
- v-if="showDebuffDetail"
- @open="openDetail"
- @close="showDebuffDetail = false"
- />
+ <echartInfo :isDynamicMode="isDynamicMode" :isFinish="isFinish" v-if="loadingSim" />
+ <TimeLine v-if="showWaterSimulate" @time-update="timeUpdate" @is-playing="isPlaying"
+ :waterSimulateParams="waterSimulateParams" @playbackFinished="playbackFinished" @end="endSimulate" />
+ <DebuffDetail v-if="showDebuffDetail" @open="openDetail" @close="showDebuffDetail = false" />
<DebuffTable v-if="showDebuffTable" @close="closeDebuffTable" />
</template>
<script setup>
+import { EventBus } from "@/eventBus"; // 寮曞叆浜嬩欢鎬荤嚎
import { ref, onMounted, onUnmounted, provide } from "vue";
import TimeLine from "@/components/menu/TimeLine.vue";
import Left from "./left/Left.vue";
@@ -26,6 +17,7 @@
import DebuffTable from "@/components/tools/DebuffTable.vue";
import { getMaxInfluenceArea } from "@/api/index";
import { createPoint, geomToGeoJSON } from "@/utils/map.js";
+import { loadAreaPolygon, clearAreaPolygon } from "@/utils/area";
import colors from "@/assets/img/left/colors3.png";
import danger from "@/assets/img/left/danger.png";
@@ -36,6 +28,9 @@
const showDebuffTable = ref(false);
const isDynamicMode = ref(false);
const isFinish = ref(true);
+const loadingSim = ref(false);
+
+const treeMap = new Map();
// 鎻愪緵鏂规硶缁欐墍鏈夊瓙缁勪欢
provide("simulateActions", {
@@ -46,63 +41,138 @@
function startSimulate(form) {
// console.log("form", form);
showWaterSimulate.value = true;
+ loadingSim.value = true
waterSimulateParams.value = form;
}
function endSimulate() {
-
+ loadingSim.value = false
showDebuffDetail.value = false
clearTrailLine();
+ removeEmergencyPoints()
removeDataSources();
setTimeout(() => {
showWaterSimulate.value = false;
isDynamicMode.value = false;
- }, 2000);
+ // 娓呴櫎濞佽儊瀵硅薄琛ㄦ牸鍐呭
+ EventBus.emit("reset-table");
+ // 娓呴櫎闄嶉洦鏁版嵁鍐呭
+ EventBus.emit("clear-echart");
+ }, 1000);
}
const MaxInfluenceAreaList = ref([]);
+// 鍒濆鍖� dataSources 鍏ㄥ眬鏁扮粍
const dataSources = [];
-function getTimeMarkers() {
- // 灏� list 鏁版嵁鐨� geom EPSG:4326 鍧愭爣杞崲涓� WGS84 鍧愭爣绯荤殑 GeoJSON 鏁版嵁
+async function getTimeMarkers() {
const list = MaxInfluenceAreaList.value;
- list.forEach((item, index) => {
- const geojson = JSON.parse(item.geom); // 瑙ｆ瀽 geom 瀛楁涓� GeoJSON 瀵硅薄
- Cesium.GeoJsonDataSource.load(geojson).then((dataSource) => {
- // 璁剧疆鏍峰紡锛屽皢棰滆壊鏀逛负绾㈣壊
+ try {
+ const loadPromises = list.map(async (item) => {
+ const geojson = JSON.parse(item.geom);
+ const dataSource = await Cesium.GeoJsonDataSource.load(geojson);
dataSource.entities.values.forEach((entity) => {
- // entity.polygon.material = new Cesium.Color(1.0, 0.0, 0.0, 0.6); // 绾㈣壊锛�80% 涓嶉�忔槑搴�
- // entity.polygon.material = new Cesium.Color.YELLOW; // 绾㈣壊锛�80% 涓嶉�忔槑搴�
+ if (!entity.properties) {
+ entity.properties = new Cesium.PropertyBag();
+ }
+ entity.properties.addProperty("id", item.id);
+ entity.properties.addProperty("warningLevel", item.warningLevel);
+ entity.properties.addProperty("zoneId", item.zoneId);
entity.polygon.outlineColor = Cesium.Color.YELLOW;
entity.polygon.outline = true;
-
- // 浣跨敤鎻愪緵鐨� X, Y, Z 鍧愭爣浣滀负鍥炬爣浣嶇疆
const position = Cesium.Cartesian3.fromDegrees(item.X, item.Y, item.Z);
-
- // 鍦ㄤ腑蹇冪偣涓婃柟娣诲姞涓�涓浘鏍囧疄浣�
const billboardEntity = viewer.entities.add({
position: position,
billboard: {
- image: danger, // 鍥炬爣鐨勮矾寰�
- scale: 1.0, // 鍥炬爣缂╂斁姣斾緥
- verticalOrigin: Cesium.VerticalOrigin.BOTTOM, // 鍥炬爣搴曢儴瀵归綈鍒颁腑蹇冪偣
- heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, // 鍥炬爣璐村湴
- distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 1500), // 鎺у埗鍙璺濈鑼冨洿 (0绫冲埌1500绫�)
+ image: danger,
+ scale: 1.0,
+ verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+ heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
+ distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 1500),
},
});
-
- // 灏嗗浘鏍囧疄浣撲笌褰撳墠鏁版嵁婧愬叧鑱�
dataSource.entities.add(billboardEntity);
});
-
- // 娣诲姞鏁版嵁婧愬埌 viewer
viewer.dataSources.add(dataSource);
dataSources.push(dataSource);
});
- });
+ await Promise.all(loadPromises);
+ setupRowClickListener(dataSources);
+ } catch (error) {
+ }
}
+// 娓呴櫎闅愭偅鐐�
function removeDataSources() {
- dataSources.forEach((dataSource) => {
+ dataSources.forEach((dataSource, index) => {
+ // 閬嶅巻褰撳墠鏁版嵁婧愮殑鎵�鏈夊疄浣�
+ const entities = dataSource.entities.values;
+ entities.forEach((entity, entityIndex) => {
+ if (entity.billboard) {
+ viewer.entities.remove(entity);
+ }
+ });
viewer.dataSources.remove(dataSource);
});
+ dataSources.length = 0;
}
+// 閬块櫓鐐癸紝缁胯壊瀵屾枃鏈�
+function addTetrahedron(visible) {
+ const emergencyAreaList = [];
+ // 杩欓噷鏄坊鍔犻伩闄╃偣搴曞眰闈㈢墖
+ loadAreaPolygon("/json/emergency_area.geojson", true).then((entities) => {
+ emergencyAreaList.push(...entities);
+ });
+ // console.log('polygon', polygon);
+
+ let list = [
+ {
+ name: "灏瑰缓鍗庡",
+ longitude: 116.593517,
+ latitude: 40.568391,
+ altitude: 528.45,
+ },
+ // {
+ // name: "鑼冩尟姹熷",
+ // longitude: 116.591059,
+ // latitude: 40.574068,
+ // altitude: 528,
+ // },
+ // {
+ // name: "鍚庡潯",
+ // longitude: 116.597975,
+ // latitude: 40.558199,
+ // altitude: 528,
+ // },
+ ];
+ // 杩欓噷鏄坊鍔犻伩闄╃偣瀵屾枃鏈珮浜樉绀�
+ list.forEach((item) => {
+ let point = earthCtrl.factory.createRichTextPoint("閬块櫓鐐�", [item.longitude, item.latitude, item.altitude - 10], {
+ distanceDisplayCondition: new SmartEarth.Cesium.DistanceDisplayCondition(0, 2000),
+ fontColor: "#ffffff",
+ fontSize: 20
+ }, "0");
+ console.log("point", point);
+ emergencyAreaList.push(point);
+ });
+ treeMap.set("閬块櫓鐐�", emergencyAreaList);
+}
+// 鍒犻櫎閬块櫓鐐圭殑瀵屾枃鏈疄浣�
+function removeEmergencyPoints() {
+ const emergencyAreaList = treeMap.get("閬块櫓鐐�"); // 鑾峰彇瀛樺偍鐨勯伩闄╃偣瀹炰綋鍒楄〃
+ if (emergencyAreaList && emergencyAreaList.length > 0) {
+ emergencyAreaList.forEach((entity) => {
+ if (entity && typeof entity.deleteObject === 'function') {
+ // 濡傛灉鏈� deleteObject 鏂规硶锛屼紭鍏堣皟鐢�
+ entity.deleteObject();
+ } else if (entity && typeof entity.clear === 'function') {
+ // 濡傛灉鏈� clear 鏂规硶锛岃皟鐢� clear
+ entity.clear();
+ } else if (entity && earthCtrl && earthCtrl.coreMap) {
+ // 濡傛灉鏄� Cesium 瀹炰綋锛屼娇鐢� coreMap.entities.remove 绉婚櫎
+ earthCtrl.coreMap.entities.remove(entity);
+ }
+ });
+ treeMap.set("閬块櫓鐐�", []); // 娓呯┖瀛樺偍鐨勯伩闄╃偣鍒楄〃
+ }
+}
+
let TrailLine = [];
async function showLine() {
const position = [
@@ -190,67 +260,6 @@
});
TrailLine = [];
}
-// function showLine() {
-// earthCtrl.factory.createSimpleGraphic(
-// "polyline",
-// { clampToGround: true },
-// (entity) => {
-// if (entity) {
-// const position = [
-// {
-// x: -2172540.8322597803,
-// y: 4339064.62665997,
-// z: 4126183.3895281963,
-// },
-// {
-// x: -2172480.18394144,
-// y: 4339033.15167176,
-// z: 4126240.9529584926,
-// },
-// {
-// x: -2172454.114348403,
-// y: 4339020.0398392705,
-// z: 4126261.946960697,
-// },
-// {
-// x: -2172377.9670952093,
-// y: 4338976.609385458,
-// z: 4126333.862357211,
-// },
-// {
-// x: -2172299.4142002705,
-// y: 4338951.971578909,
-// z: 4126397.5205803993,
-// },
-// {
-// x: -2172245.1703274297,
-// y: 4338940.86037857,
-// z: 4126436.276389208,
-// },
-// {
-// x: -2172176.7332184147,
-// y: 4338930.525741544,
-// z: 4126477.629952572,
-// },
-// {
-// x: -2172173.8151051304,
-// y: 4338939.043883864,
-// z: 4126469.336927342,
-// },
-// {
-// x: -2172173.7151194704,
-// y: 4338939.023235937,
-// z: 4126469.4107743693,
-// },
-// ];
-// // console.log("positions", positions);
-// addWall(position, [entity]);
-
-// earthCtrl.factory.SimpleGraphic.remove(entity.id);
-// }
-// }
-// );
-// }
function timeUpdate(percentage) {
if (percentage > 99) {
if (showDebuffDetail.value) {
@@ -259,6 +268,7 @@
checkedKeys.value = ["閬块櫓鐐�"];
showDebuffDetail.value = true;
getTimeMarkers();
+ addTetrahedron();
showLine();
}
}
@@ -282,7 +292,77 @@
function playbackFinished(val) {
isFinish.value = val;
}
+// 瀹氫箟鍏ㄥ眬鍙橀噺瀛樺偍褰撳墠姝ｅ湪闂姩鐨勯潰鐗�
+let flashingPolygon = null;
+// 娣诲姞浜嬩欢鐩戝惉鍣紝鎺ユ敹鏉ヨ嚜琛ㄦ牸缁勪欢鐨勪簨浠�
+function setupRowClickListener(dataSources) {
+ if (!Array.isArray(dataSources) || dataSources.length === 0) {
+ console.error("Data sources array is undefined or empty!");
+ return;
+ }
+
+ EventBus.on("row-clicked", (id) => {
+ const clickedEntity = findEntityById(id, dataSources);
+ if (clickedEntity) {
+ if (flashingPolygon && flashingPolygon !== clickedEntity) {
+ stopFlashing(flashingPolygon);
+ }
+
+ startFlashing(clickedEntity);
+ flashingPolygon = clickedEntity;
+ } else {
+ }
+ });
+}
+function findEntityById(id, dataSources) {
+ if (!Array.isArray(dataSources) || dataSources.length === 0) {
+ console.error("Data sources array is undefined or empty!");
+ return null;
+ }
+
+ console.log("Searching for ID:", id);
+ for (const dataSource of dataSources) {
+ const entities = dataSource.entities.values;
+ for (const entity of entities) {
+ const entityId = entity.properties?.id?.getValue();
+ if (String(entityId) === String(id)) {
+ return entity;
+ }
+ }
+ }
+ return null;
+}
+// 寮�濮嬮棯鍔ㄦ晥鏋�
+function startFlashing(polygonEntity) {
+ // 瀛樺偍鍘熷棰滆壊
+ const originalColor = polygonEntity.polygon.material.color.getValue();
+ polygonEntity._originalColor = originalColor; // 灏嗗師濮嬮鑹蹭繚瀛樺埌瀹炰綋涓�
+ // 鍒涘缓棰滆壊鍙樺寲鐨勫洖璋冨嚱鏁�
+ let isFlashing = true; // 鏍囪鏄惁姝ｅ湪闂姩
+ polygonEntity.polygon.material = new Cesium.ColorMaterialProperty(
+ new Cesium.CallbackProperty(() => {
+ if (!isFlashing) return originalColor; // 濡傛灉鍋滄闂姩锛屾仮澶嶅師濮嬮鑹�
+ // 鍒囨崲棰滆壊锛堜緥濡傜孩鑹插拰鍘熷棰滆壊浜ゆ浛锛�
+ const currentTime = Date.now();
+ const flashColor = Cesium.Color.RED.withAlpha(1); // 闂姩棰滆壊
+ return Math.floor(currentTime / 500) % 2 === 0 ? flashColor : originalColor;
+ }, false)
+ );
+ // 灏嗛棯鍔ㄧ姸鎬佷繚瀛樺埌瀹炰綋涓婏紝渚夸簬鍚庣画鎺у埗
+ polygonEntity._isFlashing = isFlashing;
+}
+
+// 鍋滄闂姩鏁堟灉
+function stopFlashing(polygonEntity) {
+ // 鎭㈠鍘熷棰滆壊
+ const originalColor = polygonEntity._originalColor || Cesium.Color.WHITE; // 濡傛灉娌℃湁鍘熷棰滆壊锛岄粯璁や娇鐢ㄧ櫧鑹�
+ polygonEntity.polygon.material = new Cesium.ColorMaterialProperty(originalColor);
+ // 娓呯┖闂姩鐘舵��
+ polygonEntity._isFlashing = false;
+ polygonEntity._originalColor = null; // 娓呴櫎淇濆瓨鐨勫師濮嬮鑹�
+}
onMounted(() => {
+ setupRowClickListener()
getMaxInfluenceAreaData();
});
onUnmounted(() => {
--
Gitblit v1.9.3