zcloud-gbs-bi-react/src/pages/Container/Map/index.js

import { useFullscreen, useMount } from "ahooks";
import { message } from "antd";
import autoFit from "autofit.js";
import { useEffect, useMemo, useReducer, useRef, useState } from "react";
import useGetUrlQuery from "zy-react-library/hooks/useGetUrlQuery";
import BottomUtils from "./components/BottomUtils";
import CenterUtils from "./components/CenterUtils";
import Content from "./components/Content";
import CustomModal from "./components/Content/modal";
import Header from "./components/Header";
import RightUtils from "./components/RightUtils";
import { Context, initialMapState, MAP_ACTION, mapReducer } from "./js/context";
import useInitMap from "./js/initMap";
import mitt from "./js/mitt";
import {
  changeCoverMaskVisibleMittKey,
  clickBranchOfficePointMittKey,
  clickMarkPointMittKey,
  clickPortPointMittKey,
  resetBottomUtilsMittKey,
} from "./js/mittKey";
import "./index.less";

function Map(props) {
  const query = useGetUrlQuery();
  const { viewer, mapMethods, initMap, externalEntryPort } = useInitMap();

  const [isRenderContent, setIsRenderContent] = useState(false);
  const fullscreenRef = useRef(null); // 全屏容器的ref
  const [isFullscreen, { toggleFullscreen }] = useFullscreen(fullscreenRef);
  const [state, dispatch] = useReducer(mapReducer, initialMapState);

  // 页面组件只调用语义化 actions，不直接感知 reducer action 或 mitt 事件名。
  const actions = useMemo(() => ({
    selectPort: data => dispatch({ type: MAP_ACTION.SELECT_PORT, payload: data }),
    selectBranchOffice: data => dispatch({ type: MAP_ACTION.SELECT_BRANCH_OFFICE, payload: data }),
    selectMark: data => dispatch({ type: MAP_ACTION.SELECT_MARK, payload: data }),
    resetMark: () => dispatch({ type: MAP_ACTION.RESET_MARK }),
    setPortArea: portArea => dispatch({ type: MAP_ACTION.SET_PORT_AREA, payload: portArea }),
    setBottomUtilsIndex: index => dispatch({ type: MAP_ACTION.SET_BOTTOM_UTILS_INDEX, payload: index }),
    resetBottomUtils: () => dispatch({ type: MAP_ACTION.RESET_BOTTOM_UTILS }),
    resetRightUtils: () => dispatch({ type: MAP_ACTION.RESET_RIGHT_UTILS }),
    setPureMap: visible => dispatch({ type: MAP_ACTION.SET_PURE_MAP, payload: visible }),
    setCoverMaskVisible: visible => dispatch({ type: MAP_ACTION.SET_COVER_MASK_VISIBLE, payload: visible }),
  }), []);

  useMount(() => {
    autoFit.init({ dw: 1920, dh: 1080, el: "#contentContainer", resize: true });

    sessionStorage.removeItem("mapCurrentBranchOfficeId");

    initMap();

    if (query.markType === "港口") {
      const entered = externalEntryPort(query);
      if (!entered)
        message.warning("港口入口参数不完整，无法定位到对应港口");
    }
    else {
      setTimeout(() => {
        mapMethods.current.flyTo();
        mapMethods.current.addPortPoint();
      }, 500);
    }

    // Cesium 工具层暂时通过 mitt 通知；所有事件在根组件统一转成 reducer action。
    const handlePortClick = data => actions.selectPort(data);
    const handleBranchOfficeClick = data => actions.selectBranchOffice(data);
    const handleMarkClick = data => actions.selectMark(data);
    const handleCoverMaskVisible = (visible) => {
      actions.setCoverMaskVisible(visible);
      if (!visible) {
        message.success("地图绘制完成");
      }
    };
    const handleResetBottomUtils = () => actions.resetBottomUtils();
    mitt.on(clickPortPointMittKey, handlePortClick);
    mitt.on(clickBranchOfficePointMittKey, handleBranchOfficeClick);
    mitt.on(clickMarkPointMittKey, handleMarkClick);
    mitt.on(changeCoverMaskVisibleMittKey, handleCoverMaskVisible);
    mitt.on(resetBottomUtilsMittKey, handleResetBottomUtils);

    return () => {
      autoFit.off();
      mitt.off(clickPortPointMittKey, handlePortClick);
      mitt.off(clickBranchOfficePointMittKey, handleBranchOfficeClick);
      mitt.off(clickMarkPointMittKey, handleMarkClick);
      mitt.off(changeCoverMaskVisibleMittKey, handleCoverMaskVisible);
      mitt.off(resetBottomUtilsMittKey, handleResetBottomUtils);
    };
  });

  useEffect(() => {
    query.accessTicket && window.sessionStorage.setItem("accessTicket", query.accessTicket);
    query.clientId && window.sessionStorage.setItem("clientId", query.clientId);
    query.orgId && window.sessionStorage.setItem("orgId", query.orgId);
    query.token && window.sessionStorage.setItem("token", query.token);
    setTimeout(() => {
      if (window.sessionStorage.getItem("token"))
        setIsRenderContent(true);
    });
  }, []);

  const providerValues = useMemo(
    () => ({ viewer, mapMethods, ...state, actions }),
    [viewer, mapMethods, state, actions],
  );

  return (
    <div ref={fullscreenRef}>
      <Context.Provider value={providerValues}>
        <div id="cesiumContainer" />
        <div id="contentContainer">
          {isRenderContent && (
            <>
              <Header />
              <CenterUtils />
              <RightUtils history={props.history} isFullscreen={isFullscreen} toggleFullscreen={toggleFullscreen} />
              <BottomUtils />
              <Content history={props.history} />
              <CustomModal />
            </>
          )}
        </div>
      </Context.Provider>
      <div
        style={{ display: state.coverMaskVisible ? "block" : "none" }}
        className="coverMaskContainer"
        onClick={() => message.warning("正在绘制地图，请等待绘制完成在进行操作")}
      />
    </div>
  );
}

export default Map;