141 lines
4.4 KiB
JavaScript
141 lines
4.4 KiB
JavaScript
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'
|
|
import Ymtj from './ymtj'
|
|
import Player from './Player'
|
|
import Demo3D from '../../Home/MapCtrl/Map3D/demo'
|
|
import moment from 'moment';
|
|
const { Cesium } = window;
|
|
|
|
const records = [
|
|
{ tm:'2000-01-01 04:00:00', data:[], text:'测试' },
|
|
{ tm:'2000-01-01 04:00:01', data:[], text:'测试' },
|
|
{ tm:'2000-01-01 04:00:02', data:[], text:'测试' },
|
|
{ tm:'2000-01-01 04:00:03', data:[], text:'测试' },
|
|
{ tm:'2000-01-01 04:00:04', data:[], text:'测试' },
|
|
{ tm:'2000-01-01 04:00:05', data:[], text:'测试' },
|
|
{ tm:'2000-01-01 04:00:06', data:[], text:'测试' },
|
|
{ tm:'2000-01-01 04:00:07', data:[], text:'测试' },
|
|
{ tm:'2000-01-01 04:00:08', data:[], text:'测试' },
|
|
{ tm:'2000-01-01 04:00:09', data:[], text:'测试' },
|
|
{ tm:'2000-01-01 04:00:10', data:[], text:'测试' },
|
|
{ tm:'2000-01-01 04:00:11', data:[], text:'测试' },
|
|
{ tm:'2000-01-01 04:00:12', data:[], text:'测试' },
|
|
{ tm:'2000-01-01 04:00:13', data:[], text:'测试' },
|
|
{ tm:'2000-01-01 04:00:14', data:[], text:'测试' },
|
|
{ tm:'2000-01-01 04:00:15', data:[], text:'测试' },
|
|
{ tm:'2000-01-01 04:00:16', data:[], text:'测试' },
|
|
{ tm:'2000-01-01 04:00:17', data:[], text:'测试' },
|
|
{ tm:'2000-01-01 04:00:18', data:[], text:'测试' },
|
|
{ tm:'2000-01-01 04:00:19', data:[], text:'测试' },
|
|
{ tm:'2000-01-01 04:00:20', data:[], text:'测试' },
|
|
]
|
|
|
|
|
|
const Page = ({ showPanels, mode }) => {
|
|
const dispatch = useDispatch();
|
|
let mapObj = useSelector(s => s.map.map)
|
|
const [ map, setMap ] = useState(null)
|
|
const [ ctx, setCtx ] = useState({mode:'预报方案',data:{}})
|
|
const [ clock, setClock ] = useState(null)
|
|
const [ testData, setTestData ] = useState([])
|
|
useEffect(()=>{
|
|
setTimeout(() => {
|
|
setTestData(records)
|
|
}, 2000);
|
|
},[])
|
|
|
|
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)
|
|
}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
|
|
}
|
|
});
|
|
}
|
|
|
|
return ()=>{
|
|
dispatch.map.setLayerVisible({
|
|
RealDrpLayer: false,
|
|
PicStLayer: false,
|
|
ShuiKuLayer: false,
|
|
GongShuiLayer: false,
|
|
AZDLayer: false,
|
|
QSYDWLayer: false,
|
|
YHJMHLayer: false
|
|
});
|
|
}
|
|
}, [mapObj,ctx])
|
|
|
|
|
|
useEffect(()=>{
|
|
if(clock!==null && mapObj?._cesiumWidget && testData?.length>0){
|
|
const tm = testData[clock].tm
|
|
if(tm){
|
|
const str = `${moment(tm).format('YYYY-MM-DD')}T${moment(tm).format('HH:mm:ss')}Z`
|
|
mapObj.clock.currentTime = Cesium.JulianDate.fromIso8601(str);
|
|
}
|
|
}
|
|
if(clock===null){return}
|
|
},[clock,mapObj,testData])
|
|
|
|
|
|
|
|
|
|
return (
|
|
<div className='homePage'>
|
|
<div className='homePage_rightBox' style={{ display: !showPanels ? 'none' : 'block', padding: '0px' }}>
|
|
{ ctx.mode==='预报方案'?<Ybfa setCtx={setCtx}/>:null }
|
|
{ ctx.mode==='淹没统计'?<Ymtj setCtx={setCtx} ctx={ctx}/>:null}
|
|
</div>
|
|
{
|
|
ctx.mode==='淹没统计' && mode==='3d'?
|
|
<div className='homePage_playerBox' style={!showPanels?{left:'50%'}:{}}>
|
|
<Player data={testData} setClock={setClock}/>
|
|
</div>:null
|
|
}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Page
|