114 lines
4.1 KiB
JavaScript
114 lines
4.1 KiB
JavaScript
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() {
|
|
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 />
|
|
</div>
|
|
</Context.Provider>
|
|
<div
|
|
style={{ display: coverMaskVisible ? "block" : "none" }}
|
|
className="coverMaskContainer"
|
|
onClick={() => message.warning("正在绘制地图，请等待绘制完成在进行操作")}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default Map;
|