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

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,
  clickMarkPointMittKey,
  clickPortPointMittKey,
  deletePeoplePositionPointMittKey,
  resetAllBottomUtilsCheckMittKey,
  resetBottomCurrentIndexMittKey,
} from "./mittKey";

export default class PointClickEvent {
  #viewer;
  #popup;
  #mapMethods;

  constructor(viewer, mapMethods) {
    this.#viewer = viewer;
    this.#mapMethods = mapMethods;
  }

  // 关闭弹窗
  closePopup = () => {
    if (this.#popup) {
      this.#popup.remove();
      this.#popup = null;
    }
  };

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

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

  // 港口点位点击进入
  #clickPortPointEnter = (data) => {
    this.closePopup();
    this.#mapMethods.removePortPoint();
    setTimeout(() => {
      if (data.id === "00003") {
        this.#mapMethods.flyTo({ longitude: data.position.x, latitude: data.position.y, height: 10000 });
        this.#mapMethods.addBranchOfficePoint();
        mitt.emit(clickPortPointMittKey, data);
      }
      else {
        this.#mapMethods.flyTo({ longitude: data.position.x, latitude: data.position.y, height: 2000 });
        this.#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(resetBottomCurrentIndexMittKey);
    mitt.emit(resetAllBottomUtilsCheckMittKey);
  };

  // 分公司点位点击
  #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);
    this.#popup = new PopupInfo(this.#viewer, {
      component: BranchOffice,
      position,
      props: {
        info,
        close: this.closePopup,
        enter: () => {
          this.#clickBranchOfficePointEnter(data);
        },
      },
    });
  };

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

  // 标记点位点击
  #clickMarkPoint = (data) => {
    mitt.emit(clickMarkPointMittKey, data);
  };
}