2025-10-09 09:49:16 +08:00
|
|
|
import React, { useEffect, useState, useRef } from 'react'
|
|
|
|
|
import { useLocation } from 'react-router'
|
|
|
|
|
import { useDispatch, useSelector } from 'react-redux'
|
|
|
|
|
import { Collapse, DatePicker, Input, Modal, message } from 'antd';
|
|
|
|
|
import './index.less'
|
|
|
|
|
import Ybfa from './ybfa'
|
2025-10-09 17:22:42 +08:00
|
|
|
import Ymtj from './ymtj'
|
|
|
|
|
import Demo3D from '../../Home/MapCtrl/Map3D/demo'
|
|
|
|
|
const { Cesium } = window;
|
2025-10-09 09:49:16 +08:00
|
|
|
|
|
|
|
|
|
|
|
|
|
const Page = ({ showPanels }) => {
|
|
|
|
|
const dispatch = useDispatch();
|
|
|
|
|
let mapObj = useSelector(s => s.map.map)
|
2025-10-09 17:22:42 +08:00
|
|
|
const [ map, setMap ] = useState(null)
|
|
|
|
|
const [ ctx, setCtx ] = useState({mode:'预报方案',data:{}})
|
|
|
|
|
useEffect(()=>{
|
|
|
|
|
},[])
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
dispatch.map.setLayerVisible({
|
|
|
|
|
RealDrpLayer: true,
|
|
|
|
|
PicStLayer: true,
|
|
|
|
|
ShuiKuLayer: true,
|
|
|
|
|
GongShuiLayer: true,
|
|
|
|
|
AZDLayer: true,
|
|
|
|
|
QSYDWLayer: true,
|
|
|
|
|
YHJMHLayer: true
|
|
|
|
|
});
|
|
|
|
|
const { mode } = ctx
|
|
|
|
|
//当前map对象是cesium
|
|
|
|
|
if(!mapObj?._cesiumWidget){
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if(mode==='淹没统计'){
|
|
|
|
|
mapObj.camera.setView({
|
|
|
|
|
destination: Cesium.Cartesian3.fromDegrees(114.786546000,31.496518000,1500),
|
|
|
|
|
orientation: {
|
|
|
|
|
heading: Cesium.Math.toRadians(-90),
|
|
|
|
|
pitch: Cesium.Math.toRadians(-35.0),
|
|
|
|
|
roll: 0.0
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
const demo = new Demo3D()
|
|
|
|
|
demo.getCzml2(mapObj)
|
2025-10-20 11:14:29 +08:00
|
|
|
// setTimeout(() => {
|
|
|
|
|
// mapObj.clock.currentTime = Cesium.JulianDate.fromIso8601('2000-01-01T04:00:03Z');
|
|
|
|
|
// }, 2000);
|
2025-10-09 17:22:42 +08:00
|
|
|
}else{
|
|
|
|
|
mapObj.dataSources._dataSources.forEach(dataSource => {
|
|
|
|
|
if (dataSource.name === 'CZML1111') { // 确保你知道你想要移除的数据源名称
|
|
|
|
|
mapObj.dataSources.remove(dataSource);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
mapObj.camera.setView({
|
|
|
|
|
destination: Cesium.Cartesian3.fromDegrees(114.771546000,31.497518000,650),
|
|
|
|
|
orientation: {
|
|
|
|
|
heading: Cesium.Math.toRadians(-90),
|
|
|
|
|
pitch: Cesium.Math.toRadians(-45.0),
|
|
|
|
|
roll: 0.0
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// demo.getCzml2(mapObj)//demo
|
|
|
|
|
// const tm = {
|
|
|
|
|
// "dayNumber": 2460957,
|
|
|
|
|
// "secondsOfDay": 75115.485
|
|
|
|
|
// }
|
|
|
|
|
// debugger
|
|
|
|
|
// setTimeout(() => {
|
|
|
|
|
// mapObj.clock.currentTime = tm;
|
|
|
|
|
// }, 10000);
|
|
|
|
|
// this.demo.getDem(viewer) //地形图
|
|
|
|
|
// this.demo.getGltf(viewer) //模型
|
|
|
|
|
// this.demo.getWater(viewer)//简单淹没分析
|
|
|
|
|
// this.demo.getWater2(viewer)
|
|
|
|
|
// this.demo.getRlt2(viewer)
|
|
|
|
|
// this.demo.getRlt3(viewer) //热力图
|
|
|
|
|
// this.demo.getCzml(viewer) //czml模型
|
|
|
|
|
|
|
|
|
|
return ()=>{
|
|
|
|
|
dispatch.map.setLayerVisible({
|
|
|
|
|
RealDrpLayer: false,
|
|
|
|
|
PicStLayer: false,
|
|
|
|
|
ShuiKuLayer: false,
|
|
|
|
|
GongShuiLayer: false,
|
|
|
|
|
AZDLayer: false,
|
|
|
|
|
QSYDWLayer: false,
|
|
|
|
|
YHJMHLayer: false
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
}, [mapObj,ctx])
|
2025-10-09 09:49:16 +08:00
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<div className='homePage' style={{ display: !showPanels ? 'none' : 'block' }}>
|
|
|
|
|
<div className='homePage_rightBox' style={{ display: !showPanels ? 'none' : 'block', padding: '0px' }}>
|
2025-10-09 17:22:42 +08:00
|
|
|
{ ctx.mode==='预报方案'?<Ybfa setCtx={setCtx}/>:null }
|
|
|
|
|
{ ctx.mode==='淹没统计'?<Ymtj setCtx={setCtx} ctx={ctx}/>:null}
|
2025-10-09 09:49:16 +08:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export default Page
|