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

import { useRef } from "react";
import BranchOffice from "../components/popup/components/BranchOffice";
import Port from "../components/popup/components/Port";
import PopupInfo from "../components/popup/js/PopupInfo";
import { getPosition } from "./mapUtils";
import mitt from "./mitt";
import {
  clickBranchOfficePointMittKey,
  clickPortPointMittKey,
  resetBottomUtilsMittKey,
} from "./mittKey";

export default function usePointClickEvent(viewerRef, mapMethods) {
  const popupRef = useRef(null);

  // 获取当前 Cesium 实例：点击事件触发时地图已经完成初始化。
  const getViewer = () => viewerRef.current;

  // 关闭弹窗
  const closePopup = () => {
    if (popupRef.current) {
      popupRef.current.remove();
      popupRef.current = null;
    }
  };

  // 港口点位点击进入
  const clickPortPointEnter = (data) => {
    closePopup();
    mapMethods.removePortPoint();
    // setTimeout(() => {
    if (data.id === "00003") {
      mapMethods.flyTo({ longitude: data.position.x, latitude: data.position.y, height: 10000 });
      mapMethods.addBranchOfficePoint();
      mitt.emit(clickPortPointMittKey, data);
    }
    else {
      mapMethods.removeFourColorDiagram();
      mapMethods.removeWall();
      mapMethods.flyTo({ longitude: data.position.x, latitude: data.position.y, height: 2000 });
      mapMethods.addBranchOfficePoint("", {
        corpName: data.name,
        corpinfoId: data.corpinfoId,
        longitude: data.position.x,
        latitude: data.position.y,
      });
      mitt.emit(clickPortPointMittKey, data);
      mitt.emit(clickBranchOfficePointMittKey, data);
      sessionStorage.setItem("mapCurrentBranchOfficeId", data.corpinfoId);
    }
    // }, 2000);
    mitt.emit(resetBottomUtilsMittKey);
  };

  // 港口点位点击
  const clickPortPoint = (data) => {
    const position = getPosition(data.position.x, data.position.y);
    popupRef.current = new PopupInfo(getViewer(), {
      component: Port,
      position,
      props: {
        info: data,
        close: closePopup,
        enter: () => {
          clickPortPointEnter(data);
        },
      },
    });
  };

  // 分公司点位点击进入
  const clickBranchOfficePointEnter = (data) => {
    closePopup();
    mapMethods.removeBranchOfficePoint();
    mapMethods.removeMarkPoint();
    mapMethods.addBranchOfficePoint("", data);
    mapMethods.removeFourColorDiagram();
    mapMethods.removeWall();
    mapMethods.flyTo({ longitude: data.longitude, latitude: data.latitude, height: 2000 });
    mitt.emit(clickBranchOfficePointMittKey, data);
    sessionStorage.setItem("mapCurrentBranchOfficeId", data.corpinfoId);
    mitt.emit(resetBottomUtilsMittKey);
  };

  // 分公司点位点击
  const clickBranchOfficePoint = async (data) => {
    if (data.id === sessionStorage.getItem("mapCurrentBranchOfficeId"))
      return;
    // const { info } = await getCorpInfo({ id: data.id });
    const info = {};
    const position = getPosition(data.longitude, data.latitude);
    popupRef.current = new PopupInfo(getViewer(), {
      component: BranchOffice,
      position,
      props: {
        info,
        close: closePopup,
        enter: () => {
          clickBranchOfficePointEnter(data);
        },
      },
    });
  };

  // 点位点击
  const pointClickEvent = (pick) => {
    const data = pick.monitorItems.data;
    closePopup();
    if (data.isExternalEntry === "1" && data.mapType === "港口") {
      clickPortPointEnter(data);
      return;
    }
    if (data.mapType === "港口")
      clickPortPoint(data);
    if (data.mapType === "分公司")
      clickBranchOfficePoint(data);
  };

  return {
    closePopup,
    pointClickEvent,
  };
}