| | |
| | | :waterSimulateParams="waterSimulateParams" |
| | | @playbackFinished="playbackFinished" |
| | | @end="endSimulate" |
| | | @isColorRender="isColorRender" |
| | | /> |
| | | <LegendMNFZ class="legend" v-if="isShowLegend"></LegendMNFZ> |
| | | <DebuffDetail |
| | | v-if="showDebuffDetail" |
| | | @open="openDetail" |
| | |
| | | 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"; |
| | | 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 { |
| | | loadAreaPolygon, |
| | | clearAreaPolygon, |
| | | convertToGeoJson, |
| | | } from "@/utils/area"; |
| | | |
| | | import colors from "@/assets/img/left/colors3.png"; |
| | | |
| | |
| | | |
| | | import { useSimStore } from "@/store/simulation"; |
| | | import { storeToRefs } from "pinia"; |
| | | import { getSafePoint } from "@/api/hpApi"; |
| | | const simStore = useSimStore(); |
| | | const { rightRiverShow } = storeToRefs(simStore); |
| | | |
| | |
| | | const showDebuffTable = ref(false); |
| | | const isDynamicMode = ref(false); |
| | | const isFinish = ref(true); |
| | | const isShowLegend = ref(false); |
| | | |
| | | const treeMap = new Map(); |
| | | |
| | |
| | | }); |
| | | |
| | | function startSimulate(form) { |
| | | // console.log("form", form); |
| | | showWaterSimulate.value = true; |
| | | rightRiverShow.value = true; |
| | | waterSimulateParams.value = form; |
| | |
| | | clearTrailLine(); |
| | | removeEmergencyPoints(); |
| | | removeDataSources(); |
| | | showWaterSimulate.value = false; |
| | | setTimeout(() => { |
| | | showWaterSimulate.value = false; |
| | | isDynamicMode.value = false; |
| | | // 清除威胁对象表格内容 |
| | | EventBus.emit("reset-table"); |
| | |
| | | }); |
| | | 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" |
| | | // 避险场所,绿色富文本 |
| | | async function addTetrahedron(visible) { |
| | | const emergencyAreaList = []; |
| | | |
| | | try { |
| | | let codesToFetch = []; |
| | | |
| | | // 判断当前选择区域是否为“区” |
| | | if (simStore.selectedScheme.areaName.includes("区")) { |
| | | // 从 simStore.townCodeAll 中拿到该区下的所有乡镇 code |
| | | const townList = simStore.townCodeAll[simStore.selectedScheme.areaName]; |
| | | |
| | | // 假设 townList 是一个数组,里面每个元素有 .code 字段 |
| | | if (Array.isArray(townList)) { |
| | | codesToFetch = townList.map((item) => item.code); |
| | | } else { |
| | | console.warn("未找到对应的乡镇列表"); |
| | | return; |
| | | } |
| | | } else { |
| | | // 不是“区”,就使用默认 code |
| | | codesToFetch = ["110116110218"]; |
| | | } |
| | | |
| | | // 并发请求所有 code 的避险点数据 |
| | | const allRes = await Promise.all( |
| | | codesToFetch.map((code) => getSafePoint(code)) |
| | | ); |
| | | console.log("point", point); |
| | | emergencyAreaList.push(point); |
| | | }); |
| | | treeMap.set("避险场所", emergencyAreaList); |
| | | |
| | | // 合并结果(假设每个 res.data 是一个数组) |
| | | const allSafePoints = allRes.flatMap((res) => res.data); |
| | | |
| | | // 转换为 GeoJSON(如果每个 data 都需要单独处理) |
| | | const geoJsonData = convertToGeoJson(allSafePoints); |
| | | |
| | | // 加载底层面片(多边形) |
| | | const polygonEntities = await loadAreaPolygon(geoJsonData, true); |
| | | emergencyAreaList.push(...polygonEntities); |
| | | |
| | | // 添加绿色富文本标注 |
| | | const textPromises = allSafePoints.map(async (item) => { |
| | | const point = earthCtrl.factory.createRichTextPoint( |
| | | "避险场所", |
| | | [item.lon, item.lat, 540], |
| | | { |
| | | distanceDisplayCondition: |
| | | new SmartEarth.Cesium.DistanceDisplayCondition(0, 2000), |
| | | fontColor: "#fff", |
| | | fontSize: 20, |
| | | }, |
| | | "0" |
| | | ); |
| | | emergencyAreaList.push(point); |
| | | }); |
| | | |
| | | await Promise.all(textPromises); |
| | | |
| | | // 将结果保存到 treeMap |
| | | treeMap.set("避险场所", emergencyAreaList); |
| | | } catch (error) { |
| | | console.error("加载避险场所失败:", error); |
| | | } |
| | | } |
| | | |
| | | // 删除避险场所的富文本实体 |
| | | function removeEmergencyPoints() { |
| | | const emergencyAreaList = treeMap.get("避险场所"); // 获取存储的避险场所实体列表 |
| | |
| | | url: "/json/line.json", |
| | | color: "#00FF00", |
| | | width: 12.0, |
| | | pointColor: "#73FFA7", |
| | | pointColor: "#FFFF73", |
| | | speed: 2, |
| | | far: 50000, |
| | | }); |
| | |
| | | function playbackFinished(val) { |
| | | isFinish.value = val; |
| | | } |
| | | function isColorRender(val) { |
| | | // console.log('这里打印是否显示水位图例的值:',val); |
| | | isShowLegend.value = val; |
| | | } |
| | | // 定义全局变量存储当前正在闪动的面片 |
| | | let flashingPolygon = null; |
| | | |
| | |
| | | </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> |