<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"
|
/>
|
<DebuffTable v-if="showDebuffTable" @close="closeDebuffTable" />
|
</template>
|
|
<script setup>
|
import { ref, onMounted, onUnmounted, provide } from "vue";
|
import TimeLine from "@/components/menu/TimeLine.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 colors from "@/assets/img/left/colors3.png";
|
import { checkedKeys } from "@/store/index";
|
const waterSimulateParams = ref({});
|
const showWaterSimulate = ref(false);
|
const showDebuffDetail = ref(false);
|
const showDebuffTable = ref(false);
|
const isDynamicMode = ref(false);
|
const isFinish = ref(true);
|
|
// 提供方法给所有子组件
|
provide("simulateActions", {
|
startSimulate,
|
endSimulate,
|
});
|
|
function startSimulate(form) {
|
// console.log("form", form);
|
showWaterSimulate.value = true;
|
waterSimulateParams.value = form;
|
}
|
function endSimulate() {
|
// showDebuffDetail.value = true
|
removeDataSources();
|
setTimeout(() => {
|
showWaterSimulate.value = false;
|
isDynamicMode.value = false;
|
}, 2000);
|
}
|
const MaxInfluenceAreaList = ref([]);
|
const dataSources = [];
|
function getTimeMarkers() {
|
// 将 list 数据的 geom EPSG:4548 坐标转换为 WGS84 坐标系的 GeoJSON 数据
|
const list = MaxInfluenceAreaList.value;
|
list.forEach((item, index) => {
|
const geojson = geomToGeoJSON(item.geom);
|
Cesium.GeoJsonDataSource.load(geojson).then((dataSource) => {
|
// 设置样式，将颜色改为红色
|
dataSource.entities.values.forEach((entity) => {
|
entity.polygon.material = new Cesium.Color(1.0, 0.0, 0.0, 0.6); // 红色，80% 不透明度
|
entity.polygon.outlineColor = Cesium.Color.YELLOW; // 设置轮廓颜色为红色（如果需要）
|
entity.polygon.outline = true; // 显示轮廓（如果需要）
|
});
|
|
// 添加数据源到 viewer
|
viewer.dataSources.add(dataSource);
|
dataSources.push(dataSource);
|
});
|
});
|
}
|
function removeDataSources() {
|
dataSources.forEach((dataSource) => {
|
viewer.dataSources.remove(dataSource);
|
});
|
}
|
let TrailLine = [];
|
async function showLine() {
|
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,
|
},
|
];
|
let LineInterpolation = earthCtrl.core.LineInterpolation(earthCtrl.coreMap, {
|
positions: position,
|
num: 50,
|
getHeight: true,
|
});
|
// console.log(LineInterpolation.height, "A");
|
|
let min = LineInterpolation.height;
|
let max = min.map((item) => {
|
return item + 35;
|
});
|
|
console.log(min, max);
|
|
let _TrailLine = earthCtrl.factory.createTrailLineWall(
|
LineInterpolation.positions,
|
{
|
maximumHeights: max,
|
minimumHeights: min,
|
color: "#ffffff", //线颜色（可选）
|
url: colors,
|
}
|
);
|
TrailLine.push(_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) {
|
return;
|
}
|
checkedKeys.value = ["避险点"];
|
showDebuffDetail.value = true;
|
getTimeMarkers();
|
showLine();
|
}
|
}
|
function openDetail() {
|
showDebuffTable.value = true;
|
}
|
function closeDebuffTable() {
|
showDebuffTable.value = false;
|
showDebuffDetail.value = true;
|
}
|
function getMaxInfluenceAreaData() {
|
getMaxInfluenceArea().then((res) => {
|
MaxInfluenceAreaList.value = res.data.items;
|
});
|
}
|
|
function isPlaying(val) {
|
isDynamicMode.value = val;
|
}
|
|
function playbackFinished(val) {
|
isFinish.value = val;
|
}
|
onMounted(() => {
|
getMaxInfluenceAreaData();
|
});
|
onUnmounted(() => {
|
endSimulate();
|
});
|
</script>
|
<style lang="less" scoped>
|
@import url("../assets/css/home.css");
|
</style>
|
