tsg-web/src/views/Home/MapCtrl/index.js

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>
  );
}