映射地图 切换到 场站

src/components/Map.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState, useMemo, useImperativeHandle, forwardRef, useCallback } from 'react';
+import React, { useEffect, useRef, useState, useMemo, useImperativeHandle, forwardRef, useCallback } from 'react';
 import carImg from '../assets/images/carplane.png';
 import inspectImg from "../assets/images/inspectCar.png"
 import planeImg from '../assets/images/planeicon.png';
@@ -27,7 +27,7 @@ const CYAN_GLOW_COLOR = new window.Cesium.Color(
 );
 window.Cesium.Ion.defaultAccessToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJmNjk0NjI1MC0wZGYyLTQ1YzItYjJmZi0wY2M5ODEwODllYzIiLCJpZCI6Mzk3MTQxLCJpYXQiOjE3NzI1MjkwMjV9.U6qmakhDgXJVXwLFyWzSxAUOFZRrDkIsRUPP6CCdnKg";
 
-const CesiumMap = React.forwardRef(({ ifClear, ifClearPlanLine, ifClearNavLine, finishPoint, drawRealTime, realtimePosition, realtimeType, pathPoints = [], devices = [], onCameraClick, focusLocation, points = [], markedPoints = [], onPathChange, from, onClearDraw, onMarkPoint, routeMode = '', polyPoints }, ref) => {
+const CesiumMap = React.forwardRef(({ ifClear, ifClearPlanLine, ifClearNavLine, finishPoint, drawRealTime, realtimePosition, realtimeType, pathPoints = [], devices = [], onCameraClick, focusLocation, points = [], markedPoints = [], onPathChange, from, onClearDraw, onMarkPoint, routeMode = '', polyPoints, mapLayer }, ref) => {
 	const containerRef = useRef(null);
 	const viewerRef = useRef(null);
 	const tooltipRef = useRef(null);
@@ -948,6 +948,12 @@ const CesiumMap = React.forwardRef(({ ifClear, ifClearPlanLine, ifClearNavLine,
 		};
 	}, []);
 
+	// 根据场站映射图层定位地图
+	useEffect(() => {
+		if (!mapLayer || !viewerRef.current) return;
+		flyToLayer(mapLayer, envConfig.geoserver_url, 1000);
+	}, [mapLayer]);
+
 
 	useEffect(() => {
 		// 如果有 realtimePosition，不显示 focusEntity

src/components/SystemSetting/StationManage.tsx

@@ -263,7 +263,7 @@ export default function StationManage() {
 		{ title: t('systemSetting.siteName'), dataIndex: 'siteName' },
 		{
 			title: t('systemSetting.mappingLayer'),
-			dataIndex: 'site_map_name',
+			dataIndex: 'siteMapName',
 			render: (value) => value ? (
 				<Tag color="blue">{value}</Tag>
 			) : (
@@ -387,7 +387,7 @@ export default function StationManage() {
 						<Input placeholder={t('systemSetting.s14')} />
 					</Form.Item>
 
-					<Form.Item name="site_map_name" label={t('systemSetting.mappingLayer')}>
+					<Form.Item name="siteMapName" label={t('systemSetting.mappingLayer')}>
 						<Select
 							placeholder={t('systemSetting.mappingLayerPlaceholder')}
 							loading={layerLoading}

src/pages/Home.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { Card, Row, Col, Statistic, Button, Space, Tag, Typography, Table, message } from 'antd';
 import {
 	CloudOutlined, ThunderboltOutlined, BarChartOutlined,
@@ -371,7 +371,7 @@ export default function StationDashboard() {
 									title={t('home.s20')}
 								/>*/}
 
-								<CesiumMap from="other" />
+								<CesiumMap from="other" mapLayer={currentStation?.siteMapName} />
 
 							</div>
 						</Card>

src/pages/RealTimeMonitor.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState } from 'react';
 import {
 	Card, Row, Col, Table, Select, Input, Tag,
 	Typography, Button, Space, Avatar, Pagination
@@ -17,6 +17,7 @@ import bgMain from '../assets/images/bgmain.jpg';
 import { UniversalBarChart, UniversalLineChart, UniversalPieChart } from '../components/recharts';
 import CesiumMap from '../components/Map';
 import { useTranslation } from 'react-i18next';
+import { useSelector } from 'react-redux';
 
 const { Option } = Select;
 const { Search } = Input;
@@ -47,6 +48,7 @@ const heatmapColors = ['#52c41a', '#1890ff', '#faad14', '#1890ff', '#52c41a'];
 
 const RealTimeMonitorPage = () => {
 	const { t } = useTranslation();
+	const { currentStation } = useSelector((state: any) => state.station);
 	const [filterStatus, setFilterStatus] = useState('all');
 	const [filterType, setFilterType] = useState(undefined);
 	const [searchName, setSearchName] = useState('');
@@ -141,7 +143,7 @@ const RealTimeMonitorPage = () => {
 								/>*/}
 
 
-								<CesiumMap from="other" />
+								<CesiumMap from="other" mapLayer={currentStation?.siteMapName} />
 
 							</div>
 						</Card>