| | |
| | | @is-playing="isPlaying" |
| | | :waterSimulateParams="waterSimulateParams" |
| | | @playbackFinished="playbackFinished" |
| | | @end="endSimulate" |
| | | /> |
| | | <DebuffDetail |
| | | v-if="showDebuffDetail" |
| | |
| | | </template> |
| | | |
| | | <script setup> |
| | | import { ref, onMounted, onUnmounted } from "vue"; |
| | | 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 danger from "@/assets/img/left/danger.png"; |
| | | import { checkedKeys } from "@/store/index"; |
| | | const waterSimulateParams = ref({}); |
| | | const showWaterSimulate = 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 |
| | | |
| | | showDebuffDetail.value = false |
| | | clearTrailLine(); |
| | | removeDataSources(); |
| | | setTimeout(() => { |
| | | showWaterSimulate.value = false; |
| | |
| | | const MaxInfluenceAreaList = ref([]); |
| | | const dataSources = []; |
| | | function getTimeMarkers() { |
| | | // 将改 list数据的 gemo EPSG:4548 坐标 转为 wgs84 坐标系的 geojson 数据 |
| | | // 将 list 数据的 geom EPSG:4326 坐标转换为 WGS84 坐标系的 GeoJSON 数据 |
| | | const list = MaxInfluenceAreaList.value; |
| | | list.forEach((item, index) => { |
| | | const geosjon = geomToGeoJSON(item.geom); |
| | | Cesium.GeoJsonDataSource.load(geosjon).then((dataSource) => { |
| | | const geojson = JSON.parse(item.geom); // 解析 geom 字段为 GeoJSON 对象 |
| | | 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.material = new Cesium.Color.YELLOW; // 红色,80% 不透明度 |
| | | 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米) |
| | | }, |
| | | }); |
| | | |
| | | // 将图标实体与当前数据源关联 |
| | | dataSource.entities.add(billboardEntity); |
| | | }); |
| | | |
| | | // 添加数据源到 viewer |
| | | viewer.dataSources.add(dataSource); |
| | | dataSources.push(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 clearTrailLine() { |
| | | TrailLine.forEach((item, index) => { |
| | | if (item && typeof item.deleteObject === 'function') { |
| | | item.deleteObject(); |
| | | } else if (item && typeof item.clear === 'function') { |
| | | item.clear(); |
| | | } else if (item && earthCtrl && earthCtrl.coreMap) { |
| | | earthCtrl.coreMap.entities.remove(item); |
| | | } |
| | | }); |
| | | 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) { |
| | |
| | | checkedKeys.value = ["避险点"]; |
| | | showDebuffDetail.value = true; |
| | | getTimeMarkers(); |
| | | showLine(); |
| | | } |
| | | } |
| | | function openDetail() { |