131 lines
3.8 KiB
JavaScript
131 lines
3.8 KiB
JavaScript
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,
|
|
clickMarkPointMittKey,
|
|
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 clickMarkPoint = (data) => {
|
|
mitt.emit(clickMarkPointMittKey, 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);
|
|
if (data.mapType.includes("标记点"))
|
|
clickMarkPoint(data);
|
|
};
|
|
|
|
return {
|
|
closePopup,
|
|
pointClickEvent,
|
|
};
|
|
}
|