From 929fafe9afa000fd99049937c4d68e8cb0fd930f Mon Sep 17 00:00:00 2001 From: JIANG Date: Mon, 10 Nov 2025 14:45:45 +0800 Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E7=8E=AF=E5=A2=83=E5=8F=98?= =?UTF-8?q?=E9=87=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/OlMap/MapComponent.tsx | 27 ++++++++++--------- .../SchemeQuery.tsx | 2 +- src/components/olmap/SCADADataPanel.tsx | 17 ++++++------ src/components/olmap/SCADADeviceList.tsx | 4 +-- src/components/olmap/ZonePropsPanel.tsx | 4 +-- src/config/config.ts | 9 ++++--- src/utils/mapQueryService.ts | 4 +-- 7 files changed, 33 insertions(+), 34 deletions(-) diff --git a/src/app/OlMap/MapComponent.tsx b/src/app/OlMap/MapComponent.tsx index 942669a..97d6128 100644 --- a/src/app/OlMap/MapComponent.tsx +++ b/src/app/OlMap/MapComponent.tsx @@ -81,8 +81,9 @@ class DeckLayer extends Layer { const MapContext = createContext(undefined); const DataContext = createContext(undefined); -const extent = config.mapExtent; -const mapUrl = config.mapUrl; +const MAP_EXTENT = config.MAP_EXTENT; +const MAP_URL = config.MAP_URL; +const MAP_WORKSPACE = config.MAP_WORKSPACE; // 添加防抖函数 function debounce any>(func: F, waitFor: number) { @@ -176,7 +177,7 @@ const MapComponent: React.FC = ({ children }) => { } }; // 配置地图数据源、图层和样式 - const defaultFlatStyle: FlatStyleLike = config.mapDefaultStyle; + const defaultFlatStyle: FlatStyleLike = config.MAP_DEFAULT_STYLE; // 定义 SCADA 图层的样式函数，根据 type 字段选择不同图标 const scadaStyle = (feature: any) => { const type = feature.get("type"); @@ -239,32 +240,32 @@ const MapComponent: React.FC = ({ children }) => { }; // 矢量瓦片数据源和图层 const junctionSource = new VectorTileSource({ - url: `${mapUrl}/gwc/service/tms/1.0.0/TJWater:geo_junctions_mat@WebMercatorQuad@pbf/{z}/{x}/{-y}.pbf`, // 替换为你的 MVT 瓦片服务 URL + url: `${MAP_URL}/gwc/service/tms/1.0.0/${MAP_WORKSPACE}:geo_junctions_mat@WebMercatorQuad@pbf/{z}/{x}/{-y}.pbf`, // 替换为你的 MVT 瓦片服务 URL format: new MVT(), projection: "EPSG:3857", }); const pipeSource = new VectorTileSource({ - url: `${mapUrl}/gwc/service/tms/1.0.0/TJWater:geo_pipes_mat@WebMercatorQuad@pbf/{z}/{x}/{-y}.pbf`, // 替换为你的 MVT 瓦片服务 URL + url: `${MAP_URL}/gwc/service/tms/1.0.0/${MAP_WORKSPACE}:geo_pipes_mat@WebMercatorQuad@pbf/{z}/{x}/{-y}.pbf`, // 替换为你的 MVT 瓦片服务 URL format: new MVT(), projection: "EPSG:3857", }); const scadaSource = new VectorSource({ - url: `${mapUrl}/TJWater/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=TJWater:geo_scada&outputFormat=application/json`, + url: `${MAP_URL}/${MAP_WORKSPACE}/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=${MAP_WORKSPACE}:geo_scada&outputFormat=application/json`, format: new GeoJson(), }); const reservoirsSource = new VectorSource({ - url: `${mapUrl}/TJWater/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=TJWater:geo_reservoirs&outputFormat=application/json`, + url: `${MAP_URL}/${MAP_WORKSPACE}/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=${MAP_WORKSPACE}:geo_reservoirs&outputFormat=application/json`, format: new GeoJson(), }); const valvesSource = new VectorSource({ - url: `${mapUrl}/TJWater/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=TJWater:geo_valves&outputFormat=application/json`, + url: `${MAP_URL}/${MAP_WORKSPACE}/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=${MAP_WORKSPACE}:geo_valves&outputFormat=application/json`, format: new GeoJson(), }); // WebGL 渲染优化显示 const junctionLayer = new WebGLVectorTileLayer({ source: junctionSource as any, // 使用 WebGL 渲染 style: defaultFlatStyle, - extent: extent, // 设置图层范围 + extent: MAP_EXTENT, // 设置图层范围 maxZoom: 24, minZoom: 12, properties: { @@ -284,7 +285,7 @@ const MapComponent: React.FC = ({ children }) => { const pipeLayer = new WebGLVectorTileLayer({ source: pipeSource as any, // 使用 WebGL 渲染 style: defaultFlatStyle, - extent: extent, // 设置图层范围 + extent: MAP_EXTENT, // 设置图层范围 maxZoom: 24, minZoom: 12, properties: { @@ -322,7 +323,7 @@ const MapComponent: React.FC = ({ children }) => { const reservoirsLayer = new VectorLayer({ source: reservoirsSource, style: reservoirsStyle, - extent: extent, // 设置图层范围 + extent: MAP_EXTENT, // 设置图层范围 maxZoom: 24, minZoom: 12, properties: { @@ -335,7 +336,7 @@ const MapComponent: React.FC = ({ children }) => { const valvesLayer = new VectorLayer({ source: valvesSource, style: valvesStyle, - extent: extent, // 设置图层范围 + extent: MAP_EXTENT, // 设置图层范围 maxZoom: 24, minZoom: 12, properties: { @@ -492,7 +493,7 @@ const MapComponent: React.FC = ({ children }) => { controls: [], }); setMap(map); - map.getView().fit(extent, { + map.getView().fit(MAP_EXTENT, { padding: [50, 50, 50, 50], // 添加一些内边距 duration: 1000, // 动画持续时间 }); diff --git a/src/components/olmap/MonitoringPlaceOptimization/SchemeQuery.tsx b/src/components/olmap/MonitoringPlaceOptimization/SchemeQuery.tsx index f0f7b05..4536677 100644 --- a/src/components/olmap/MonitoringPlaceOptimization/SchemeQuery.tsx +++ b/src/components/olmap/MonitoringPlaceOptimization/SchemeQuery.tsx @@ -148,7 +148,7 @@ const SchemeQuery: React.FC = ({ setLoading(true); try { const response = await axios.get( - `${config.backendUrl}/getallsensorplacements/?network=${network}` + `${config.BACKEND_URL}/getallsensorplacements/?network=${network}` ); let filteredResults = response.data; diff --git a/src/components/olmap/SCADADataPanel.tsx b/src/components/olmap/SCADADataPanel.tsx index aec3d5a..e3929f5 100644 --- a/src/components/olmap/SCADADataPanel.tsx +++ b/src/components/olmap/SCADADataPanel.tsx @@ -92,12 +92,11 @@ const fetchFromBackend = async ( const starttime = dayjs(range.from).format("YYYY-MM-DD HH:mm:ss"); const endtime = dayjs(range.to).format("YYYY-MM-DD HH:mm:ss"); // 清洗数据接口 - const cleaningSCADAUrl = `${config.backendUrl}/querycleaningscadadatabydeviceidandtimerange/?ids=${ids}&starttime=${starttime}&endtime=${endtime}`; + const cleaningSCADAUrl = `${config.BACKEND_URL}/querycleaningscadadatabydeviceidandtimerange/?ids=${ids}&starttime=${starttime}&endtime=${endtime}`; // 原始数据 - const rawSCADAUrl = `${config.backendUrl}/queryscadadatabydeviceidandtimerange/?ids=${ids}&starttime=${starttime}&endtime=${endtime}`; + const rawSCADAUrl = `${config.BACKEND_URL}/queryscadadatabydeviceidandtimerange/?ids=${ids}&starttime=${starttime}&endtime=${endtime}`; // 模拟数据接口 - const simulationSCADAUrl = `${config.backendUrl}/querysimulationscadadatabydeviceidandtimerange/?ids=${ids}&starttime=${starttime}&endtime=${endtime}`; - + const simulationSCADAUrl = `${config.BACKEND_URL}/querysimulationscadadatabydeviceidandtimerange/?ids=${ids}&starttime=${starttime}&endtime=${endtime}`; try { let response; response = await fetch(cleaningSCADAUrl); @@ -274,9 +273,9 @@ const SCADADataPanel: React.FC = ({ const starttime = dayjs(range.from).format("YYYY-MM-DD HH:mm:ss"); const endtime = dayjs(range.to).format("YYYY-MM-DD HH:mm:ss"); - const cleaningUrl = `${config.backendUrl}/querycleaningscadadatabydeviceidandtimerange/?ids=${ids}&starttime=${starttime}&endtime=${endtime}`; - const rawUrl = `${config.backendUrl}/queryscadadatabydeviceidandtimerange/?ids=${ids}&starttime=${starttime}&endtime=${endtime}`; - const simUrl = `${config.backendUrl}/querysimulationscadadatabydeviceidandtimerange/?ids=${ids}&starttime=${starttime}&endtime=${endtime}`; + const cleaningUrl = `${config.BACKEND_URL}/querycleaningscadadatabydeviceidandtimerange/?ids=${ids}&starttime=${starttime}&endtime=${endtime}`; + const rawUrl = `${config.BACKEND_URL}/queryscadadatabydeviceidandtimerange/?ids=${ids}&starttime=${starttime}&endtime=${endtime}`; + const simUrl = `${config.BACKEND_URL}/querysimulationscadadatabydeviceidandtimerange/?ids=${ids}&starttime=${starttime}&endtime=${endtime}`; try { const [cleanRes, rawRes, simRes] = await Promise.all([ @@ -357,7 +356,7 @@ const SCADADataPanel: React.FC = ({ useEffect(() => { const fetchDeviceLabels = async () => { try { - const url = `${config.mapUrl}/TJWater/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=TJWater:geo_scada&outputFormat=application/json`; + const url = `${config.MAP_URL}/${config.MAP_WORKSPACE}/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=${config.MAP_WORKSPACE}:geo_scada&outputFormat=application/json`; const response = await fetch(url); if (!response.ok) return; @@ -466,7 +465,7 @@ const SCADADataPanel: React.FC = ({ // 调用后端清洗接口 const response = await axios.post( - `${config.backendUrl}/scadadevicedatacleaning/`, + `${config.BACKEND_URL}/scadadevicedatacleaning/`, null, { params: { diff --git a/src/components/olmap/SCADADeviceList.tsx b/src/components/olmap/SCADADeviceList.tsx index 9644142..55bcfda 100644 --- a/src/components/olmap/SCADADeviceList.tsx +++ b/src/components/olmap/SCADADeviceList.tsx @@ -183,7 +183,7 @@ const SCADADeviceList: React.FC = ({ const fetchScadaDevices = async () => { setLoading(true); try { - const url = `${config.mapUrl}/TJWater/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=TJWater:geo_scada&outputFormat=application/json`; + const url = `${config.MAP_URL}/${config.MAP_WORKSPACE}/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=${config.MAP_WORKSPACE}:geo_scada&outputFormat=application/json`; const response = await fetch(url); if (!response.ok) throw new Error("Failed to fetch SCADA devices"); const json = await response.json(); @@ -607,7 +607,7 @@ const SCADADeviceList: React.FC = ({ // 调用后端清洗接口 const response = await axios.post( - `${config.backendUrl}/scadadevicedatacleaning/`, + `${config.BACKEND_URL}/scadadevicedatacleaning/`, null, { params: { diff --git a/src/components/olmap/ZonePropsPanel.tsx b/src/components/olmap/ZonePropsPanel.tsx index ba79b74..935dd88 100644 --- a/src/components/olmap/ZonePropsPanel.tsx +++ b/src/components/olmap/ZonePropsPanel.tsx @@ -20,8 +20,6 @@ interface ZonePropsPanelProps { onClose?: () => void; } -const mapUrl = config.mapUrl; - const ZonePropsPanel: React.FC = ({ title = "分区属性信息", isVisible = true, @@ -107,7 +105,7 @@ const ZonePropsPanel: React.FC = ({ } const networkZoneLayer = new VectorLayer({ source: new VectorSource({ - url: `${mapUrl}/TJWater/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=TJWater:network_zone&outputFormat=application/json`, + url: `${config.MAP_URL}/${config.MAP_WORKSPACE}/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=${config.MAP_WORKSPACE}:network_zone&outputFormat=application/json`, format: new GeoJson(), }), style: new Style({ diff --git a/src/config/config.ts b/src/config/config.ts index 81a4ddf..8102556 100644 --- a/src/config/config.ts +++ b/src/config/config.ts @@ -1,10 +1,11 @@ export const config = { - backendUrl: process.env.BACKEND_URL || "http://192.168.1.42:8000", - mapUrl: process.env.MAP_URL || "http://127.0.0.1:8080/geoserver", - mapExtent: process.env.MAP_EXTENT + BACKEND_URL: process.env.BACKEND_URL || "http://192.168.1.42:8000", + MAP_URL: process.env.MAP_URL || "http://127.0.0.1:8080/geoserver", + MAP_WORKSPACE: process.env.MAP_WORKSPACE || "TJWater", + MAP_EXTENT: process.env.MAP_EXTENT ? process.env.MAP_EXTENT.split(",").map(Number) : [13508849, 3608035.75, 13555781, 3633812.75], - mapDefaultStyle: { + MAP_DEFAULT_STYLE: { "stroke-width": 3, "stroke-color": "rgba(51, 153, 204, 0.9)", "circle-fill-color": "rgba(255,138, 92,0.8)", diff --git a/src/utils/mapQueryService.ts b/src/utils/mapQueryService.ts index 4768128..0933d99 100644 --- a/src/utils/mapQueryService.ts +++ b/src/utils/mapQueryService.ts @@ -43,8 +43,8 @@ interface MapClickEvent { * GeoServer 服务配置 */ const GEOSERVER_CONFIG = { - url: config.mapUrl, - workspace: "TJWater", + url: config.MAP_URL, + workspace: config.MAP_WORKSPACE, layers: ["geo_pipes_mat", "geo_junctions_mat"], wfsVersion: "1.0.0", outputFormat: "application/json",