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