From 37e94a178ca3d02e17d708f3086f0445f43e4629 Mon Sep 17 00:00:00 2001 From: LiuJiaNan <15703339975@163.com> Date: Mon, 3 Aug 2026 10:07:50 +0800 Subject: [PATCH] =?UTF-8?q?feat(map):=20=E4=BC=98=E5=8C=96=E5=9C=B0?= =?UTF-8?q?=E5=9B=BE=E7=BB=84=E4=BB=B6=E5=8F=8A=E6=8E=A5=E5=8F=A3=E8=AF=B7?= =?UTF-8?q?=E6=B1=82=E6=80=A7=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 新增获取码头人员车辆统计接口getScreenPortPersonVehicleStat - 中心工具组件引入数据加载及界面loading状态展示 - 中心工具统计数据显示人数及车辆数动态渲染 - 所有分页请求pageSize由9999调整为99，减少数据加载压力 - useInitMap、useMapMethods及usePointClickEvent中getViewer调用优化，避免多次重复调用 - 统一使用viewer变量缓存getViewer返回值，代码结构更清晰易维护 --- src/api/biStatistics/index.js | 4 ++ .../Map/components/CenterUtils/index.js | 70 +++++++++++-------- .../LeftPanel/RectificationPanel/index.js | 2 +- .../IndexInfo/LeftPanel/WeatherPanel/index.js | 2 +- .../IndexInfo/RightPanel/AlarmPanel/index.js | 2 +- .../RightPanel/PartnerPanel/index.js | 2 +- .../Content/branchOffice/Camera/index.js | 2 +- .../IndexRight/AreaAlarmPanel/index.js | 2 +- .../IndexRight/VideoPatrolPanel/index.js | 2 +- .../MenJin/GateApplicationPanel/index.js | 2 +- .../RenYuan/AlarmHandlingPanel/index.js | 2 +- .../RenYuan/PersonnelLocationPanel/index.js | 2 +- .../WeiXian/DepartmentWorkPanel/index.js | 2 +- .../XiaoFang/FireAlarmRecordPanel/index.js | 2 +- .../FireInspectionRecordPanel/index.js | 2 +- .../XiaoFang/VolunteerFireTeamPanel/index.js | 2 +- .../ZhongDian/ContractProjectPanel/index.js | 2 +- .../ZhongDian/MobileMonitoringPanel/index.js | 2 +- .../port/Index/PersonnelStatsPanel/index.js | 2 +- .../port/RenYuan/AlarmListPanel/index.js | 2 +- .../port/WeiXian/WorkRecordPanel/index.js | 2 +- .../XiaoFang/FireDeviceListPanel/index.js | 2 +- src/pages/Container/Map/js/useInitMap.js | 18 ++--- src/pages/Container/Map/js/useMapMethods.js | 47 ++++++++----- .../Container/Map/js/usePointClickEvent.js | 6 +- 25 files changed, 108 insertions(+), 77 deletions(-) diff --git a/src/api/biStatistics/index.js b/src/api/biStatistics/index.js index cd244d7..a642052 100644 --- a/src/api/biStatistics/index.js +++ b/src/api/biStatistics/index.js @@ -208,3 +208,7 @@ export const getScreenRelatedCorpStatistics = declareRequest( "getScreenRelatedCorpStatisticsLoading", "Post > @/xgfManager/project/relatedCorpStatistics", ); +export const getScreenPortPersonVehicleStat = declareRequest( + "getScreenPortPersonVehicleStatLoading", + "Get > /personnelPosition/bi/personLocation/portPersonVehicleStat", +); diff --git a/src/pages/Container/Map/components/CenterUtils/index.js b/src/pages/Container/Map/components/CenterUtils/index.js index 83bced9..9975eb5 100644 --- a/src/pages/Container/Map/components/CenterUtils/index.js +++ b/src/pages/Container/Map/components/CenterUtils/index.js @@ -1,5 +1,7 @@ +import { Connect } from "@cqsjjb/jjb-dva-runtime"; +import { Spin } from "antd"; import { AnimatePresence, motion } from "motion/react"; -import { useContext } from "react"; +import { useContext, useEffect, useState } from "react"; import statisticsTitleImg from "~/assets/images/map_bi/center_utils/statistics_title.png"; import guangImg from "~/assets/images/map_bi/center_utils/tabguang.png"; import tabLeftImg from "~/assets/images/map_bi/center_utils/tableft.png"; @@ -8,6 +10,7 @@ import tabMidImg from "~/assets/images/map_bi/center_utils/tabmid.png"; import tabMidOnImg from "~/assets/images/map_bi/center_utils/tabmid_on.png"; import tabRightImg from "~/assets/images/map_bi/center_utils/tabright.png"; import tabRightOnImg from "~/assets/images/map_bi/center_utils/tabright_on.png"; +import { NS_BI_STATISTICS } from "~/enumerate/namespace"; import { Context } from "~/pages/Container/Map/js/context"; import "./index.less"; @@ -42,9 +45,11 @@ const statisticAnimation = { }, }; -function CenterUtils() { +function CenterUtils(props) { const { currentPort, currentBranchOffice, pureMap, mapMethods, actions, portArea } = useContext(Context); + const [data, setData] = useState([]); + const list = [ { label: "秦皇岛西", portArea: 3 }, { label: "秦皇岛港区", portArea: "" }, @@ -62,6 +67,16 @@ function CenterUtils() { actions.resetBottomUtils(); }; + useEffect(() => { + const loadData = async () => { + if (!isVisible) + return; + const { data } = await props.getScreenPortPersonVehicleStat(); + setData(data || []); + }; + loadData(); + }, [isVisible]); + return (
@@ -87,34 +102,27 @@ function CenterUtils() {
))} -
- - {["", 3].includes(portArea) && ( - -
-
西港区
-
-
人数：33人
-
车辆：33辆
-
-
- - )} - - - {["", 2].includes(portArea) && ( - -
-
东港区
-
-
人数：33人
-
车辆：33辆
-
-
- - )} - -
+ +
+ { + data.map((item, index) => ( + + {["", item.portArea].includes(portArea) && ( + +
+
{item.portName}
+
+
{`人数：${item.onlinePersonCount}人`}
+
{`车辆：${item.onlineVehicleCount}辆`}
+
+
+ + )} + + )) + } +
+ )} @@ -122,4 +130,4 @@ function CenterUtils() { ); } -export default CenterUtils; +export default Connect([NS_BI_STATISTICS], true)(CenterUtils); diff --git a/src/pages/Container/Map/components/Content/IndexInfo/LeftPanel/RectificationPanel/index.js b/src/pages/Container/Map/components/Content/IndexInfo/LeftPanel/RectificationPanel/index.js index bc40d6f..9898e0f 100644 --- a/src/pages/Container/Map/components/Content/IndexInfo/LeftPanel/RectificationPanel/index.js +++ b/src/pages/Container/Map/components/Content/IndexInfo/LeftPanel/RectificationPanel/index.js @@ -15,7 +15,7 @@ function RectificationPanel(props) { const loadData = async () => { const { data } = await props.getHiddenStatisticsByPortArea({ pageIndex: 1, - pageSize: 9999, + pageSize: 99, }); setData(data || []); }; diff --git a/src/pages/Container/Map/components/Content/IndexInfo/LeftPanel/WeatherPanel/index.js b/src/pages/Container/Map/components/Content/IndexInfo/LeftPanel/WeatherPanel/index.js index 6ed4e70..07e012c 100644 --- a/src/pages/Container/Map/components/Content/IndexInfo/LeftPanel/WeatherPanel/index.js +++ b/src/pages/Container/Map/components/Content/IndexInfo/LeftPanel/WeatherPanel/index.js @@ -26,7 +26,7 @@ function WeatherPanel(props) { const { data } = await props.getEventReportListUnfinished({ pageIndex: 1, - pageSize: 9999, + pageSize: 99, }); setEmergencyList(data || []); }; diff --git a/src/pages/Container/Map/components/Content/IndexInfo/RightPanel/AlarmPanel/index.js b/src/pages/Container/Map/components/Content/IndexInfo/RightPanel/AlarmPanel/index.js index c6f0ecd..b811656 100644 --- a/src/pages/Container/Map/components/Content/IndexInfo/RightPanel/AlarmPanel/index.js +++ b/src/pages/Container/Map/components/Content/IndexInfo/RightPanel/AlarmPanel/index.js @@ -15,7 +15,7 @@ function AlarmPanel(props) { const loadData = async () => { const { data } = await props.getAlarmRecordScreenIotDeviceAlarmPage({ pageIndex: 1, - pageSize: 9999, + pageSize: 99, }); setData(data || []); }; diff --git a/src/pages/Container/Map/components/Content/IndexInfo/RightPanel/PartnerPanel/index.js b/src/pages/Container/Map/components/Content/IndexInfo/RightPanel/PartnerPanel/index.js index 9f54d8b..8773fc0 100644 --- a/src/pages/Container/Map/components/Content/IndexInfo/RightPanel/PartnerPanel/index.js +++ b/src/pages/Container/Map/components/Content/IndexInfo/RightPanel/PartnerPanel/index.js @@ -15,7 +15,7 @@ function PartnerPanel(props) { const loadData = async () => { const { data } = await props.getXgfStatisticsListCorpStatistics({ pageIndex: 1, - pageSize: 9999, + pageSize: 99, }); setData(data || []); }; diff --git a/src/pages/Container/Map/components/Content/branchOffice/Camera/index.js b/src/pages/Container/Map/components/Content/branchOffice/Camera/index.js index 42e0bd1..da8b5d9 100644 --- a/src/pages/Container/Map/components/Content/branchOffice/Camera/index.js +++ b/src/pages/Container/Map/components/Content/branchOffice/Camera/index.js @@ -33,7 +33,7 @@ function Camera(props) { portArea, corpinfoId: currentBranchOffice, pageIndex: 1, - pageSize: 9999, + pageSize: 99, }), ]); setLevelList(dictionaryData); diff --git a/src/pages/Container/Map/components/Content/branchOffice/IndexRight/AreaAlarmPanel/index.js b/src/pages/Container/Map/components/Content/branchOffice/IndexRight/AreaAlarmPanel/index.js index 4377c20..22fecfd 100644 --- a/src/pages/Container/Map/components/Content/branchOffice/IndexRight/AreaAlarmPanel/index.js +++ b/src/pages/Container/Map/components/Content/branchOffice/IndexRight/AreaAlarmPanel/index.js @@ -20,7 +20,7 @@ function AreaAlarmPanel(props) { portArea, corpinfoId: currentBranchOffice, pageIndex: 1, - pageSize: 9999, + pageSize: 99, }); setData(data || []); }; diff --git a/src/pages/Container/Map/components/Content/branchOffice/IndexRight/VideoPatrolPanel/index.js b/src/pages/Container/Map/components/Content/branchOffice/IndexRight/VideoPatrolPanel/index.js index ded26fc..eaf5a59 100644 --- a/src/pages/Container/Map/components/Content/branchOffice/IndexRight/VideoPatrolPanel/index.js +++ b/src/pages/Container/Map/components/Content/branchOffice/IndexRight/VideoPatrolPanel/index.js @@ -36,7 +36,7 @@ function VideoPatrolPanel(props) { portArea, corpinfoId: currentBranchOffice, pageIndex: 1, - pageSize: 9999, + pageSize: 99, }); const videos = formatVideoList(data || []); setVideoList(videos); diff --git a/src/pages/Container/Map/components/Content/branchOffice/MenJin/GateApplicationPanel/index.js b/src/pages/Container/Map/components/Content/branchOffice/MenJin/GateApplicationPanel/index.js index 8caa99f..05a548d 100644 --- a/src/pages/Container/Map/components/Content/branchOffice/MenJin/GateApplicationPanel/index.js +++ b/src/pages/Container/Map/components/Content/branchOffice/MenJin/GateApplicationPanel/index.js @@ -21,7 +21,7 @@ function GateApplicationPanel(props) { setIsVisible(false); const { data } = await props[activeIndex === 1 ? "getPrimeportClosedAreaCarApplyScreenList" : "getPrimeportClosedAreaPersonApplyScreenList"]({ pageIndex: 1, - pageSize: 9999, + pageSize: 99, portArea, corpinfoId: currentBranchOffice, }); diff --git a/src/pages/Container/Map/components/Content/branchOffice/RenYuan/AlarmHandlingPanel/index.js b/src/pages/Container/Map/components/Content/branchOffice/RenYuan/AlarmHandlingPanel/index.js index 3ea1164..272d3f7 100644 --- a/src/pages/Container/Map/components/Content/branchOffice/RenYuan/AlarmHandlingPanel/index.js +++ b/src/pages/Container/Map/components/Content/branchOffice/RenYuan/AlarmHandlingPanel/index.js @@ -17,7 +17,7 @@ function AlarmHandlingPanel(props) { useEffect(() => { const loadData = async () => { - const { data } = await props.getAlarmRecordList({ portArea, corpinfoId: currentBranchOffice }); + const { data } = await props.getAlarmRecordList({ portArea, corpinfoId: currentBranchOffice, pageIndex: 1, pageSize: 99 }); setData(data || []); }; diff --git a/src/pages/Container/Map/components/Content/branchOffice/RenYuan/PersonnelLocationPanel/index.js b/src/pages/Container/Map/components/Content/branchOffice/RenYuan/PersonnelLocationPanel/index.js index 59c78fa..13c7d87 100644 --- a/src/pages/Container/Map/components/Content/branchOffice/RenYuan/PersonnelLocationPanel/index.js +++ b/src/pages/Container/Map/components/Content/branchOffice/RenYuan/PersonnelLocationPanel/index.js @@ -15,7 +15,7 @@ function PersonnelLocationPanel(props) { useEffect(() => { const loadData = async () => { - const { data } = await props.getPersonLocationPositioning({ portArea, corpinfoId: currentBranchOffice }); + const { data } = await props.getPersonLocationPositioning({ portArea, corpinfoId: currentBranchOffice, pageIndex: 1, pageSize: 99 }); setData(data || []); }; diff --git a/src/pages/Container/Map/components/Content/branchOffice/WeiXian/DepartmentWorkPanel/index.js b/src/pages/Container/Map/components/Content/branchOffice/WeiXian/DepartmentWorkPanel/index.js index c85d8a2..c225a7a 100644 --- a/src/pages/Container/Map/components/Content/branchOffice/WeiXian/DepartmentWorkPanel/index.js +++ b/src/pages/Container/Map/components/Content/branchOffice/WeiXian/DepartmentWorkPanel/index.js @@ -14,7 +14,7 @@ function DepartmentWorkPanel(props) { useEffect(() => { const loadData = async () => { - const { data } = await props.getScreenWorkPage({ portArea, corpinfoId: currentBranchOffice, pageIndex: 1, pageSize: 9999 }); + const { data } = await props.getScreenWorkPage({ portArea, corpinfoId: currentBranchOffice, pageIndex: 1, pageSize: 99 }); setData(data); }; loadData(); diff --git a/src/pages/Container/Map/components/Content/branchOffice/XiaoFang/FireAlarmRecordPanel/index.js b/src/pages/Container/Map/components/Content/branchOffice/XiaoFang/FireAlarmRecordPanel/index.js index 0ffdc6e..31de3f9 100644 --- a/src/pages/Container/Map/components/Content/branchOffice/XiaoFang/FireAlarmRecordPanel/index.js +++ b/src/pages/Container/Map/components/Content/branchOffice/XiaoFang/FireAlarmRecordPanel/index.js @@ -20,7 +20,7 @@ function FireAlarmRecordPanel(props) { portArea, corpinfoId: currentBranchOffice, pageIndex: 1, - pageSize: 9999, + pageSize: 99, }); setData(data || []); }; diff --git a/src/pages/Container/Map/components/Content/branchOffice/XiaoFang/FireInspectionRecordPanel/index.js b/src/pages/Container/Map/components/Content/branchOffice/XiaoFang/FireInspectionRecordPanel/index.js index 47988fc..8408e8d 100644 --- a/src/pages/Container/Map/components/Content/branchOffice/XiaoFang/FireInspectionRecordPanel/index.js +++ b/src/pages/Container/Map/components/Content/branchOffice/XiaoFang/FireInspectionRecordPanel/index.js @@ -16,7 +16,7 @@ function FireInspectionRecordPanel(props) { useEffect(() => { const loadData = async () => { - const { data } = await props.getScreenFireCheckList({ portArea, corpinfoId: currentBranchOffice, pageIndex: 1, pageSize: 9999 }); + const { data } = await props.getScreenFireCheckList({ portArea, corpinfoId: currentBranchOffice, pageIndex: 1, pageSize: 99 }); setData(data); }; loadData(); diff --git a/src/pages/Container/Map/components/Content/branchOffice/XiaoFang/VolunteerFireTeamPanel/index.js b/src/pages/Container/Map/components/Content/branchOffice/XiaoFang/VolunteerFireTeamPanel/index.js index 4936e28..3952880 100644 --- a/src/pages/Container/Map/components/Content/branchOffice/XiaoFang/VolunteerFireTeamPanel/index.js +++ b/src/pages/Container/Map/components/Content/branchOffice/XiaoFang/VolunteerFireTeamPanel/index.js @@ -18,7 +18,7 @@ function VolunteerFireTeamPanel(props) { portArea, corpinfoId: currentBranchOffice, pageIndex: 1, - pageSize: 9999, + pageSize: 99, }); setData(data || []); }; diff --git a/src/pages/Container/Map/components/Content/branchOffice/ZhongDian/ContractProjectPanel/index.js b/src/pages/Container/Map/components/Content/branchOffice/ZhongDian/ContractProjectPanel/index.js index de556e6..a9e9a0b 100644 --- a/src/pages/Container/Map/components/Content/branchOffice/ZhongDian/ContractProjectPanel/index.js +++ b/src/pages/Container/Map/components/Content/branchOffice/ZhongDian/ContractProjectPanel/index.js @@ -163,7 +163,7 @@ function ContractProjectPanel(props) { portArea, corpinfoId: currentBranchOffice, pageIndex: 1, - pageSize: 9999, + pageSize: 99, }); initEcharts(data || []); }; diff --git a/src/pages/Container/Map/components/Content/branchOffice/ZhongDian/MobileMonitoringPanel/index.js b/src/pages/Container/Map/components/Content/branchOffice/ZhongDian/MobileMonitoringPanel/index.js index bb58451..f82195e 100644 --- a/src/pages/Container/Map/components/Content/branchOffice/ZhongDian/MobileMonitoringPanel/index.js +++ b/src/pages/Container/Map/components/Content/branchOffice/ZhongDian/MobileMonitoringPanel/index.js @@ -27,7 +27,7 @@ function MobileMonitoringPanel(props) { portArea, corpinfoId: currentBranchOffice, pageIndex: 1, - pageSize: 9999, + pageSize: 99, }); if (data?.length) { loadPlayUrl(data[Math.floor(randoms(0, data.length - 1))].cameraNumber); diff --git a/src/pages/Container/Map/components/Content/port/Index/PersonnelStatsPanel/index.js b/src/pages/Container/Map/components/Content/port/Index/PersonnelStatsPanel/index.js index 4096d4e..cf11aa8 100644 --- a/src/pages/Container/Map/components/Content/port/Index/PersonnelStatsPanel/index.js +++ b/src/pages/Container/Map/components/Content/port/Index/PersonnelStatsPanel/index.js @@ -24,7 +24,7 @@ function PersonnelStatsPanel(props) { portArea, enterpriseType, pageIndex: 1, - pageSize: 9999, + pageSize: 99, }); setData(data || []); setIsVisible(true); diff --git a/src/pages/Container/Map/components/Content/port/RenYuan/AlarmListPanel/index.js b/src/pages/Container/Map/components/Content/port/RenYuan/AlarmListPanel/index.js index 656ff94..0f8be18 100644 --- a/src/pages/Container/Map/components/Content/port/RenYuan/AlarmListPanel/index.js +++ b/src/pages/Container/Map/components/Content/port/RenYuan/AlarmListPanel/index.js @@ -15,7 +15,7 @@ function AlarmListPanel(props) { useEffect(() => { const loadData = async () => { - const { data } = await props.getAlarmRecordList({ portArea }); + const { data } = await props.getAlarmRecordList({ portArea, pageIndex: 1, pageSize: 99 }); setData(data || []); }; diff --git a/src/pages/Container/Map/components/Content/port/WeiXian/WorkRecordPanel/index.js b/src/pages/Container/Map/components/Content/port/WeiXian/WorkRecordPanel/index.js index f95d183..bb3c389 100644 --- a/src/pages/Container/Map/components/Content/port/WeiXian/WorkRecordPanel/index.js +++ b/src/pages/Container/Map/components/Content/port/WeiXian/WorkRecordPanel/index.js @@ -19,7 +19,7 @@ function WorkRecordPanel(props) { const { data } = await props.getEightWorkInfoScreenWorkRecord({ portArea, pageIndex: 1, - pageSize: 9999, + pageSize: 99, }); setData(data || []); }; diff --git a/src/pages/Container/Map/components/Content/port/XiaoFang/FireDeviceListPanel/index.js b/src/pages/Container/Map/components/Content/port/XiaoFang/FireDeviceListPanel/index.js index b5d9cdb..93f42da 100644 --- a/src/pages/Container/Map/components/Content/port/XiaoFang/FireDeviceListPanel/index.js +++ b/src/pages/Container/Map/components/Content/port/XiaoFang/FireDeviceListPanel/index.js @@ -21,7 +21,7 @@ function FireDeviceListPanel(props) { portArea, ...queryParams, pageIndex: 1, - pageSize: 9999, + pageSize: 99, }); setData(data || []); setIsVisible(true); diff --git a/src/pages/Container/Map/js/useInitMap.js b/src/pages/Container/Map/js/useInitMap.js index 6be44da..457c36d 100644 --- a/src/pages/Container/Map/js/useInitMap.js +++ b/src/pages/Container/Map/js/useInitMap.js @@ -54,11 +54,12 @@ export default function useInitMap(options) { // 注册点击事件 const registerClickEvent = () => { - getViewer().cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK); - getViewer().cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK); - const screenSpaceEventHandler = new Cesium.ScreenSpaceEventHandler(getViewer().scene.canvas); + const viewer = getViewer(); + viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK); + viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK); + const screenSpaceEventHandler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas); screenSpaceEventHandler.setInputAction((movement) => { - const pick = getViewer().scene.pick(movement.position); + const pick = viewer.scene.pick(movement.position); if (Cesium.defined(pick) && pick.id?.id) { pointClickEventRef.current.pointClickEvent(pick.id); } @@ -98,8 +99,9 @@ export default function useInitMap(options) { show: true, }), }); + const viewer = getViewer(); // 调整 Cesium 默认相机操作：左键旋转地图，右键调整俯仰角，实现从平面俯视到立体视角的切换。 - const cameraController = getViewer().scene.screenSpaceCameraController; + const cameraController = viewer.scene.screenSpaceCameraController; cameraController.rotateEventTypes = Cesium.CameraEventType.LEFT_DRAG; cameraController.tiltEventTypes = [ Cesium.CameraEventType.RIGHT_DRAG, @@ -110,8 +112,8 @@ export default function useInitMap(options) { Cesium.CameraEventType.WHEEL, Cesium.CameraEventType.PINCH, ]; - getViewer()._cesiumWidget._creditContainer.style.display = "none"; // 隐藏cesium ion - getViewer().imageryLayers.addImageryProvider( + viewer._cesiumWidget._creditContainer.style.display = "none"; // 隐藏cesium ion + viewer.imageryLayers.addImageryProvider( new Cesium.WebMapTileServiceImageryProvider({ // 影像注记 url: @@ -127,7 +129,7 @@ export default function useInitMap(options) { ); initObliquePhotography(); registerClickEvent(); - return { mapMethods: mapMethods.current, viewer: getViewer() }; + return { mapMethods: mapMethods.current, viewer }; }; return { diff --git a/src/pages/Container/Map/js/useMapMethods.js b/src/pages/Container/Map/js/useMapMethods.js index 91ec82b..1de6b0e 100644 --- a/src/pages/Container/Map/js/useMapMethods.js +++ b/src/pages/Container/Map/js/useMapMethods.js @@ -99,27 +99,31 @@ export default function useMapMethods(viewerRef, request) { // 设置中心点 const flyTo = ({ longitude, latitude, height } = defineCenterPoint) => { - getViewer().camera.flyTo({ destination: getPosition(longitude, latitude, height), duration: 2 }); + const viewer = getViewer(); + viewer.camera.flyTo({ destination: getPosition(longitude, latitude, height), duration: 2 }); previousCenterPointRef.current = { ...currentCenterPointRef.current }; currentCenterPointRef.current = { longitude, latitude, height }; }; // 返回当前中心点 const returnCurrentCenterPoint = () => { + const viewer = getViewer(); const { longitude, latitude, height } = currentCenterPointRef.current; - getViewer().camera.flyTo({ destination: getPosition(longitude, latitude, height), duration: 2 }); + viewer.camera.flyTo({ destination: getPosition(longitude, latitude, height), duration: 2 }); }; // 返回上一次中心点 const returnPreviousCenterPoint = () => { + const viewer = getViewer(); const { longitude, latitude, height } = previousCenterPointRef.current; - getViewer().camera.flyTo({ destination: getPosition(longitude, latitude, height), duration: 2 }); + viewer.camera.flyTo({ destination: getPosition(longitude, latitude, height), duration: 2 }); currentCenterPointRef.current = { longitude, latitude, height }; }; // 切换场景模式 const changeSceneMode = (type = "3d") => { - getViewer().scene.mode = { "2d": Cesium.SceneMode.COLUMBUS_VIEW, "3d": Cesium.SceneMode.SCENE3D }[type]; + const viewer = getViewer(); + viewer.scene.mode = { "2d": Cesium.SceneMode.COLUMBUS_VIEW, "3d": Cesium.SceneMode.SCENE3D }[type]; }; // 添加港口点 @@ -143,7 +147,8 @@ export default function useMapMethods(viewerRef, request) { // 移除港口点 const removePortPoint = () => { - removeEntityCollection(getViewer(), "portEntityCollectionMerged"); + const viewer = getViewer(); + removeEntityCollection(viewer, "portEntityCollectionMerged"); }; // 添加分公司点 @@ -183,7 +188,8 @@ export default function useMapMethods(viewerRef, request) { // 删除分公司点 const removeBranchOfficePoint = () => { - removeEntityCollection(getViewer(), "branchOfficeEntityCollectionMerged"); + const viewer = getViewer(); + removeEntityCollection(viewer, "branchOfficeEntityCollectionMerged"); }; // 添加四色图 @@ -197,10 +203,11 @@ export default function useMapMethods(viewerRef, request) { if (!edgeMap[id]) return; + const viewer = getViewer(); mitt.emit(changeCoverMaskVisibleMittKey, true); const currentEdge = edgeMap[id](); const entityCollection = createEntityCollection("fourColorDiagramEntityCollection"); - getViewer().dataSources.add(entityCollection); + viewer.dataSources.add(entityCollection); // 先收集需要渲染的数据 const itemsToRender = []; @@ -244,7 +251,8 @@ export default function useMapMethods(viewerRef, request) { // 删除四色图 const removeFourColorDiagram = () => { - removeEntityCollection(getViewer(), "fourColorDiagramEntityCollection"); + const viewer = getViewer(); + removeEntityCollection(viewer, "fourColorDiagramEntityCollection"); }; // 添加墙 @@ -294,7 +302,8 @@ export default function useMapMethods(viewerRef, request) { // 删除墙 const removeWall = () => { - removeEntityCollection(getViewer(), "wallEntityCollection"); + const viewer = getViewer(); + removeEntityCollection(viewer, "wallEntityCollection"); }; // 点位聚合 @@ -406,12 +415,14 @@ export default function useMapMethods(viewerRef, request) { // 删除点位 const removeMarkPoint = (markType) => { - removeEntityCollection(getViewer(), `markEntityCollectionMerged${markType ? `_${markType}` : ""}`); + const viewer = getViewer(); + removeEntityCollection(viewer, `markEntityCollectionMerged${markType ? `_${markType}` : ""}`); }; // 查询新轨迹前先移除旧轨迹，确保地图上始终只展示当前筛选结果。 const removePeopleTrajectory = () => { - getViewer().entities.removeById("peopleTrajectoryEntity"); + const viewer = getViewer(); + viewer.entities.removeById("peopleTrajectoryEntity"); }; // 将接口返回的经纬高点位绘制为动态轨迹线，少于两个点时不创建无意义的线段。 @@ -420,13 +431,14 @@ export default function useMapMethods(viewerRef, request) { if (points.length < 2) return; + const viewer = getViewer(); const coordinates = points.flatMap(point => [point.lon, point.lat, point.alt || 0]); - getViewer().entities.add({ + viewer.entities.add({ id: "peopleTrajectoryEntity", polyline: { positions: Cesium.Cartesian3.fromDegreesArrayHeights(coordinates), width: 5, - material: new Cesium.TrajectoryPolylineTrailLinkMaterialProperty(getViewer()), + material: new Cesium.TrajectoryPolylineTrailLinkMaterialProperty(viewer), clampToGround: true, }, }); @@ -451,6 +463,7 @@ export default function useMapMethods(viewerRef, request) { return; if (!options.markType) throw new Error("请传入markType（扎点类型）"); + const viewer = getViewer(); const clonePoint = { ...point }; point.property = new Cesium.SampledPositionProperty(); // 下一条实时定位到达前保持最后有效位置，避免全局时钟前进后点位短暂消失。 @@ -463,7 +476,7 @@ export default function useMapMethods(viewerRef, request) { point.lastTime = start; point.lastIconType = point.icon_type; peopleId.current.push(point.id); - getViewer().entities.add({ + viewer.entities.add({ id: point.id, name: point.name, position: point.property, @@ -507,14 +520,16 @@ export default function useMapMethods(viewerRef, request) { // 删除人员定位点 const removePeoplePoint = (id) => { - getViewer().entities.removeById(id); + const viewer = getViewer(); + viewer.entities.removeById(id); peopleId.current = peopleId.current.filter(item => item !== id); }; // 删除所有人员定位点 const removePeoplePointAll = () => { + const viewer = getViewer(); peopleId.current.forEach((id) => { - getViewer().entities.removeById(id); + viewer.entities.removeById(id); }); peopleId.current = []; peoplePositionStartTime.current = null; diff --git a/src/pages/Container/Map/js/usePointClickEvent.js b/src/pages/Container/Map/js/usePointClickEvent.js index 9197229..65b41d5 100644 --- a/src/pages/Container/Map/js/usePointClickEvent.js +++ b/src/pages/Container/Map/js/usePointClickEvent.js @@ -55,8 +55,9 @@ export default function usePointClickEvent(viewerRef, mapMethods) { // 港口点位点击 const clickPortPoint = (data) => { + const viewer = getViewer(); const position = getPosition(data.position.x, data.position.y); - popupRef.current = new PopupInfo(getViewer(), { + popupRef.current = new PopupInfo(viewer, { component: Port, position, props: { @@ -88,8 +89,9 @@ export default function usePointClickEvent(viewerRef, mapMethods) { if (data.id === sessionStorage.getItem("mapCurrentBranchOfficeId")) return; + const viewer = getViewer(); const position = getPosition(data.longitude, data.latitude); - popupRef.current = new PopupInfo(getViewer(), { + popupRef.current = new PopupInfo(viewer, { component: BranchOffice, position, props: {