137 lines
4.5 KiB
JavaScript
137 lines
4.5 KiB
JavaScript
import React, { useEffect, useReducer, useRef, useState } from 'react';
|
||
import { useDispatch, useSelector } from 'react-redux';
|
||
import FeaturePops from './Pops';
|
||
import FeatureTip from './FeatureTip';
|
||
import './index.less';
|
||
import Map2D from './M2D/Map2D';
|
||
import Map3D from './Map3D/Map3D';
|
||
import Markers from './Markers';
|
||
import { useLocation, useNavigate } from "react-router";
|
||
// const { Cesium } = window;
|
||
|
||
let id_factory_index = 1;
|
||
|
||
export default function MapCtrl({mode}) {
|
||
const location = useLocation();
|
||
const pathname = location.pathname;
|
||
const ctrlIdRef = useRef(`cloudowr_mapdiv_${id_factory_index++}`);
|
||
const mapobjRef = useRef();
|
||
const [_, forceRender] = useReducer(s => s + 1, 1);
|
||
const cameraTarget = useSelector(s => s.runtime.cameraTarget);
|
||
const layerVisible = useSelector(s => s.map.layerVisible);
|
||
// const map = useSelector(s => s.map.map);
|
||
const layerSetting = useSelector(s => s.map.layerSetting);
|
||
const clickLoopBtn = useSelector(s => s.map.clickLoopBtn);
|
||
const layerSetting1 = useSelector(s => s.runtime.layerSetting);
|
||
const layerSettingLoop = useSelector(s => s.runtime.layerSettingLoop);
|
||
const smallSkRiskTime = useSelector(s => s.runtime.smallSkRiskTime);
|
||
const dispatch = useDispatch();
|
||
|
||
useEffect(() => {
|
||
const mapCtrl = mapobjRef.current;
|
||
if (!mapCtrl) {
|
||
return;
|
||
}
|
||
mapCtrl.layerMgr.setSetting(layerSetting || {});
|
||
mapCtrl.layerMgr.setVisible(layerVisible || {});
|
||
|
||
}, [mode,layerVisible, layerSetting, mapobjRef.current]);
|
||
|
||
|
||
useEffect(() => {
|
||
const mapCtrl = mapobjRef.current;
|
||
if (!mapCtrl) {
|
||
return;
|
||
}
|
||
mapCtrl.zoomTo(cameraTarget);
|
||
}, [cameraTarget])
|
||
|
||
const [mapObj, setMapObj] = useState(null);
|
||
|
||
useEffect(() => {
|
||
const params = {
|
||
divid: ctrlIdRef.current,
|
||
dispatch
|
||
};
|
||
// const mapobj = new Map2D(params);
|
||
const mapobj = mode === '3d' ? new Map3D(params) : new Map2D(params);
|
||
setMapObj(mapobj);
|
||
|
||
mapobj.init();
|
||
|
||
mapobj.layerMgr.addAppLayers(dispatch, layerVisible, layerSetting, smallSkRiskTime);
|
||
|
||
mapobjRef.current = mapobj;
|
||
|
||
forceRender();
|
||
|
||
return () => {
|
||
mapobj.destroy();
|
||
mapobjRef.current = null;
|
||
}
|
||
}, [mode,pathname]);
|
||
|
||
useEffect(() => {
|
||
if (layerVisible["ContourLayer"]) {
|
||
mapObj.layerMgr.addAppLayersC(dispatch, layerVisible, layerSetting1);
|
||
}
|
||
}, [layerSetting1]);
|
||
|
||
//smallSkRiskTime
|
||
useEffect(() => {
|
||
const mapCtrl = mapobjRef.current;
|
||
|
||
if (smallSkRiskTime && smallSkRiskTime.stm && smallSkRiskTime.etm) {
|
||
mapCtrl.layerMgr.addAppLayers(dispatch, layerVisible, layerSetting, smallSkRiskTime);
|
||
}
|
||
}, [smallSkRiskTime]);
|
||
|
||
useEffect(() => {
|
||
const mapCtrl = mapobjRef.current;
|
||
if (mapCtrl) {
|
||
if (clickLoopBtn) {
|
||
mapCtrl.layerMgr.addAppLayersCLoop(dispatch, layerVisible, layerSettingLoop);
|
||
}
|
||
}
|
||
}, [layerSettingLoop, clickLoopBtn]);
|
||
|
||
// const myTest = (flag)=>{
|
||
// const height = flag?1:-1
|
||
// if(map){
|
||
// const primitives = map.scene.primitives;
|
||
// let waterPrimitive = null
|
||
// // //判断是否存在Primitive
|
||
// for (let i = primitives.length - 1; i >= 0; i--) {
|
||
// if (primitives.get(i).id ===('Water1')) {
|
||
// waterPrimitive = primitives.get(i)
|
||
// }
|
||
// }
|
||
// var currentModelMatrix = Cesium.Matrix4.clone(waterPrimitive.modelMatrix);
|
||
// // 定义平移向量（例如，沿x轴平移100单位）
|
||
// var translation = new Cesium.Cartesian3(-height*0.7, height, height*0.8);
|
||
// // 创建一个平移矩阵
|
||
// var translationMatrix = Cesium.Matrix4.fromTranslation(translation);
|
||
// // 计算新的modelMatrix（将平移矩阵应用到当前模型矩阵上）
|
||
// var newModelMatrix = Cesium.Matrix4.multiply(translationMatrix, currentModelMatrix, new Cesium.Matrix4());
|
||
// waterPrimitive.modelMatrix = newModelMatrix;
|
||
// }
|
||
// }
|
||
return (
|
||
<div key={mode} id={ctrlIdRef.current} className="map2d3d">
|
||
<FeaturePops mapobj={mapobjRef.current} />
|
||
<FeatureTip />
|
||
{/*<CoordsText />*/}
|
||
<Markers mapobj={mapobjRef.current} />
|
||
{/* <div style={{background:'#fff',position:'absolute',display:'inline-block',left:'300px',top:"100px",zIndex:99}}>
|
||
<button onClick={()=>myTest(true)}>+</button>
|
||
<button onClick={()=>myTest(false)}>-</button>
|
||
<Input defaultValue={'2000-01-01T04:00:13Z'} onPressEnter={(e)=>{
|
||
if(map){
|
||
map.clock.currentTime = Cesium.JulianDate.fromIso8601(e.target.value);
|
||
}
|
||
}}></Input>
|
||
</div> */}
|
||
</div>
|
||
);
|
||
}
|