105 lines
3.0 KiB
JavaScript
105 lines
3.0 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";
|
|
|
|
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 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 || {});
|
|
|
|
}, [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]);
|
|
|
|
return (
|
|
<div key={mode} id={ctrlIdRef.current} className="map2d3d">
|
|
<FeaturePops mapobj={mapobjRef.current} />
|
|
<FeatureTip />
|
|
{/*<CoordsText />*/}
|
|
<Markers mapobj={mapobjRef.current} />
|
|
</div>
|
|
);
|
|
}
|