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 Markers from './Markers';
import { useLocation, useNavigate } from "react-router";

let id_factory_index = 1;

export default function MapCtrl() {
  const location = useLocation();
  const navigate = useNavigate();

  const pathname = location.pathname;

  const ctrlIdRef = useRef(`cloudowr_mapdiv_${id_factory_index++}`);
  const mapobjRef = useRef();
  const [_, forceRender] = useReducer(s => s + 1, 1);

  const dispatch = useDispatch();

  const cameraTarget = useSelector(s => s.runtime.cameraTarget);
  const mapIn = useSelector(s => s.runtime.mapIn);
  const mapOut = useSelector(s => s.runtime.mapOut);
  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);

  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.zoomIn()
  //    const a = mapCtrl.getView().getZoom()
  //    debugger
  // },[mapIn,mapOut])

  useEffect(() => {
    const mapCtrl = mapobjRef.current;
    if (!mapCtrl) {
      return;
    }
    console.log("75", layerVisible);
    // || !layerVisible["forecastPoints"]
    // if (layerVisible["HLLayer"]) {
    //   mapCtrl.zoomTo(cameraTarget);
    // }
    mapCtrl.zoomTo(cameraTarget);
  }, [cameraTarget])

  const [mapObj, setMapObj] = useState(null);

  useEffect(() => {
    const params = {
      divid: ctrlIdRef.current,
      dispatch
    };
    const mapobj = new Map2D(params);
    setMapObj(mapobj);

    mapobj.init();

    mapobj.layerMgr.addAppLayers(dispatch, layerVisible, layerSetting, smallSkRiskTime);

    mapobjRef.current = mapobj;

    forceRender();

    return () => {
      mapobj.destroy();
      mapobjRef.current = null;
    }
  }, [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) {
      console.log("mapCtrl.layerMgr 100++++++++++++++", layerVisible["ContourLayerLoop"]);

      //console.log("clickLoopBtn",clickLoopBtn);

      if (clickLoopBtn) {
        mapCtrl.layerMgr.addAppLayersCLoop(dispatch, layerVisible, layerSettingLoop);
      }
    }
  }, [layerSettingLoop, clickLoopBtn]);

  return (
    <div id={ctrlIdRef.current} className="map2d3d">
      <FeaturePops mapobj={mapobjRef.current} />
      <FeatureTip />
      {/*<CoordsText />*/}
      <Markers mapobj={mapobjRef.current} />
    </div>
  );
}