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 { useMemo, 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 Header from "./components/Header";
import RightUtils from "./components/RightUtils";
import { Context } from "./js/context";
import InitMap from "./js/initMap";
import mitt from "./js/mitt";
import {
  changeCoverMaskVisibleMittKey,
  clickBranchOfficePointMittKey,
  clickPortPointMittKey,
} from "./js/mittKey";
import "./index.less";

function Map(props) {
  const query = useGetUrlQuery();

  const viewer = useRef(null); // cesium地图实例
  const mapMethods = useRef(null); // cesium地图方法实例
  const fullscreenRef = useRef(null); // 全屏容器的ref
  const [isFullscreen, { toggleFullscreen }] = useFullscreen(fullscreenRef);

  const [coverMaskVisible, setCoverMaskVisible] = useState(false); // 是否显示透明遮罩，用于分片加载点位时阻止点击事件
  const [currentPort, setCurrentPort] = useState(""); // 当前选中的港口
  const [currentBranchOffice, setCurrentBranchOffice] = useState(""); // 当前选中的分公司
  const [area, setArea] = useState(""); // 当前选中的港口为秦皇岛港时的区域
  const [bottomUtilsCurrentIndex, setBottomUtilsCurrentIndex] = useState(""); // 当前选中的下方按钮的索引
  const [pureMap, setPureMap] = useState(false); // 是否选中了右侧的纯净地图
  const [headerTitle, setHeaderTitle] = useState("秦港股份安全监管平台"); // 当前头部的标题

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

    sessionStorage.removeItem("mapCurrentBranchOfficeId");

    const initMap = new InitMap();
    const { viewer: viewerInstance, mapMethods: mapMethodsInstance }
      = initMap.initMap();
    viewer.current = viewerInstance;
    mapMethods.current = mapMethodsInstance;

    if (query.mapType === "港口") {
      initMap.externalEntryPort(query);
    }
    else {
      setTimeout(() => {
        mapMethodsInstance.flyTo();
        mapMethodsInstance.addPortPoint();
      }, 500);
    }

    mitt.on(clickPortPointMittKey, (data) => {
      setCurrentPort(data.id);
      if (data.id === "00003") {
        setHeaderTitle("秦港股份安全监管平台");
      }
      else {
        setCurrentBranchOffice(data.corpinfoId);
        setHeaderTitle(`${data.name}安全监管平台`);
      }
    });
    mitt.on(clickBranchOfficePointMittKey, (data) => {
      setCurrentBranchOffice(data.id);
      setHeaderTitle(`${data.corpName || data.name}安全监管平台`);
    });
    mitt.on(changeCoverMaskVisibleMittKey, (data) => {
      setCoverMaskVisible(data);
      if (!data) {
        message.success("地图绘制完成");
      }
    });

    return () => {
      autoFit.off();
      mitt.off(clickPortPointMittKey);
      mitt.off(clickBranchOfficePointMittKey);
      mitt.off(changeCoverMaskVisibleMittKey);
    };
  });

  const providerValues = useMemo(
    () => ({ viewer, mapMethods, currentPort, currentBranchOffice, area, bottomUtilsCurrentIndex, pureMap }),
    [viewer, mapMethods, currentPort, currentBranchOffice, area, bottomUtilsCurrentIndex, pureMap],
  );

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

export default Map;