OrgTJWater/TJWaterFrontend_Refine
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

更新地图样式；调整时间轴，新增前进/后退一天按钮；新增爆管分析页面

Browse Source
This commit is contained in:
JIANG
2025-10-22 11:50:20 +08:00
parent 69b2e4fb98
commit 720f8a5dc2
12 changed files with 1557 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/app/(main)/burst-pipe-analysis/page.tsx Normal file
View File

@@ -0,0 +1,16 @@
"use client";
import MapComponent from "@app/OlMap/MapComponent";
import MapToolbar from "@app/OlMap/Controls/Toolbar";
import BurstPipeAnalysisPanel from "@/components/olmap/BurstPipeAnalysisPanel";
export default function Home() {
return (
<div className="relative w-full h-full overflow-hidden">
<MapComponent>
{/* <MapToolbar hiddenButtons={["style"]} /> */}
<BurstPipeAnalysisPanel />
</MapComponent>
</div>
);
}

2
src/app/(main)/network-simulation/page.tsx
View File

@@ -78,7 +78,7 @@ export default function Home() {
<div className="relative w-full h-full overflow-hidden">
<MapComponent>
<MapToolbar />
<div className="absolute bottom-4 left-1/2 -translate-x-1/2 z-10 w-[800px] opacity-90 hover:opacity-100 transition-opacity duration-300">
<div className="absolute bottom-4 left-1/2 -translate-x-1/2 z-10 w-[920px] opacity-90 hover:opacity-100 transition-opacity duration-300">
<Timeline />
</div>
</MapComponent>

42
src/app/OlMap/Controls/StyleEditorPanel.tsx
View File

@@ -29,6 +29,7 @@ import { calculateClassification } from "@utils/breaks_classification";
import { parseColor } from "@utils/parseColor";
import { VectorTile } from "ol";
import { useNotification } from "@refinedev/core";
import { config } from "@/config/config";
interface StyleConfig {
property: string;
@@ -64,6 +65,9 @@ const SINGLE_COLOR_PALETTES = [
{
color: "rgba(51, 153, 204, 1)",
},
{
color: "rgba(255, 138, 92, 1)",
},
{
color: "rgba(204, 51, 51, 1)",
},
@@ -405,6 +409,25 @@ const StyleEditorPanel: React.FC = () => {
conditions.push(dimensions[i]);
}
conditions.push(dimensions[dimensions.length - 1]);
console.log("生成的尺寸条件表达式:", conditions);
return conditions;
};
const generateDimensionPointConditions = (property: string): any[] => {
const conditions: any[] = ["case"];
for (let i = 0; i < breaks.length; i++) {
conditions.push(["<=", ["get", property], breaks[i]]);
conditions.push([
"interpolate",
["linear"],
["zoom"],
12,
1, // 使用配置的最小尺寸
24,
dimensions[i],
]);
}
conditions.push(dimensions[dimensions.length - 1]);
console.log("生成的点尺寸条件表达式:", conditions);
return conditions;
};
// 创建基于 breaks 的动态 FlatStyle
@@ -422,7 +445,7 @@ const StyleEditorPanel: React.FC = () => {
dynamicStyle["circle-fill-color"] = generateColorConditions(
styleConfig.property
);
dynamicStyle["circle-radius"] = generateDimensionConditions(
dynamicStyle["circle-radius"] = generateDimensionPointConditions(
styleConfig.property
);
dynamicStyle["circle-stroke-color"] = generateColorConditions(
@@ -456,21 +479,7 @@ const StyleEditorPanel: React.FC = () => {
const resetStyle = useCallback(() => {
if (!selectedRenderLayer) return;
// 重置 WebGL 图层样式
const defaultFlatStyle: FlatStyleLike = {
"stroke-width": 3,
"stroke-color": "rgba(51, 153, 204, 0.9)",
"circle-fill-color": "rgba(255,255,255,0.4)",
"circle-stroke-color": "rgba(255,255,255,0.9)",
"circle-radius": [
"interpolate",
["linear"],
["zoom"],
12,
1, // 在缩放级别 12 时，圆形半径为 1px
24,
12, // 在缩放级别 24 时，圆形半径为 12px
],
};
const defaultFlatStyle: FlatStyleLike = config.mapDefaultStyle;
selectedRenderLayer.setStyle(defaultFlatStyle);
// 删除对应图层的样式状态，从而移除图例显示
@@ -531,6 +540,7 @@ const StyleEditorPanel: React.FC = () => {
const [tileLoadListeners, setTileLoadListeners] = useState<
Map<VectorTileSource, (event: any) => void>
>(new Map());
const attachVectorTileSourceLoadedEvent = (
layerId: string,
property: string,

57
src/app/OlMap/Controls/Timeline.tsx
View File

@@ -23,6 +23,7 @@ import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns";
import { zhCN } from "date-fns/locale";
import { PlayArrow, Pause, Stop, Refresh } from "@mui/icons-material";
import { TbRewindBackward15, TbRewindForward15 } from "react-icons/tb";
import { FiSkipBack, FiSkipForward } from "react-icons/fi";
import { useData } from "../MapComponent";
import { config } from "@/config/config";
import { useMap } from "../MapComponent";
@@ -210,7 +211,7 @@ const Timeline: React.FC = () => {
type: "error",
message: "请至少设定并应用一个图层的样式。",
});
return;
// return;
}
setIsPlaying(true);
@@ -233,7 +234,10 @@ const Timeline: React.FC = () => {
const handleStop = useCallback(() => {
setIsPlaying(false);
setCurrentTime(0);
// 设置为当前时间
const currentTime = new Date();
const minutes = currentTime.getHours() * 60 + currentTime.getMinutes();
setCurrentTime(minutes); // 组件卸载时重置时间
if (intervalRef.current) {
clearInterval(intervalRef.current);
intervalRef.current = null;
@@ -241,6 +245,20 @@ const Timeline: React.FC = () => {
}, []);
// 步进控制
const handleDayStepBackward = useCallback(() => {
setSelectedDate((prev) => {
const newDate = new Date(prev);
newDate.setDate(newDate.getDate() - 1);
return newDate;
});
}, []);
const handleDayStepForward = useCallback(() => {
setSelectedDate((prev) => {
const newDate = new Date(prev);
newDate.setDate(newDate.getDate() + 1);
return newDate;
});
}, []);
const handleStepBackward = useCallback(() => {
setCurrentTime((prev) => {
const next = prev <= 0 ? 1440 : prev - 15;
@@ -299,7 +317,7 @@ const Timeline: React.FC = () => {
type: "error",
message: "请至少设定并应用一个图层的样式。",
});
return;
// return;
}
fetchFrameData(
currentTimeToDate(selectedDate, currentTime),
@@ -311,7 +329,12 @@ const Timeline: React.FC = () => {
// 组件卸载时清理定时器和防抖
useEffect(() => {
setCurrentTime(0); // 组件卸载时重置时间
// 设置为当前时间
const currentTime = new Date();
const minutes = currentTime.getHours() * 60 + currentTime.getMinutes();
// 找到最近的前15分钟刻度
const roundedMinutes = Math.floor(minutes / 15) * 15;
setCurrentTime(roundedMinutes); // 组件卸载时重置时间
return () => {
if (intervalRef.current) {
@@ -363,6 +386,15 @@ const Timeline: React.FC = () => {
alignItems="center"
sx={{ mb: 2, flexWrap: "wrap", gap: 1 }}
>
<Tooltip title="后退一天">
<IconButton
color="primary"
onClick={handleDayStepBackward}
size="small"
>
<FiSkipBack />
</IconButton>
</Tooltip>
{/* 日期选择器 */}
<DatePicker
label="模拟数据日期选择"
@@ -379,9 +411,20 @@ const Timeline: React.FC = () => {
sx={{ width: 180, "& .MuiInputBase-root": { height: 40 } }}
maxDate={new Date()} // 禁止选取未来的日期
/>
<Tooltip title="前进一天">
<IconButton
color="primary"
onClick={handleDayStepForward}
size="small"
disabled={
selectedDate.toDateString() === new Date().toDateString()
}
>
<FiSkipForward />
</IconButton>
</Tooltip>
{/* 播放控制按钮 */}
<Box sx={{ display: "flex", gap: 1 }}>
<Box sx={{ display: "flex", gap: 1 }} className="ml-4">
{/* 播放间隔选择 */}
<FormControl size="small" sx={{ minWidth: 100 }}>
<InputLabel>播放间隔</InputLabel>
@@ -434,7 +477,7 @@ const Timeline: React.FC = () => {
</IconButton>
</Tooltip>
</Box>
<Box sx={{ display: "flex", gap: 1 }}>
<Box sx={{ display: "flex", gap: 1 }} className="ml-4">
{/* 强制计算时间段 */}
<FormControl size="small" sx={{ minWidth: 100 }}>
<InputLabel>计算时间段</InputLabel>

9
src/app/OlMap/Controls/Toolbar.tsx
View File

@@ -21,6 +21,7 @@ import VectorTileSource from "ol/source/VectorTile";
import TileState from "ol/TileState";
import { toLonLat } from "ol/proj";
import { booleanIntersects, buffer, point, toWgs84 } from "@turf/turf";
// import { handleMapClickSelectFeatures as mapClickSelectFeatures } from "@/utils/mapQueryService";
import RenderFeature from "ol/render/Feature";
import { config } from "@/config/config";
@@ -329,7 +330,13 @@ const Toolbar: React.FC<ToolbarProps> = ({ hiddenButtons }) => {
},
[map, highlightLayer, setHighlightFeature]
);
// const handleMapClickSelectFeatures = useCallback(
// (event: { coordinate: number[] }) => {
// if (!map) return;
// mapClickSelectFeatures(event, map, setHighlightFeature); // 调用导入的函数
// },
// [map, setHighlightFeature]
// );
// 添加矢量属性查询事件监听器
useEffect(() => {
if (!activeTools.includes("info") || !map) return;

38
src/app/OlMap/MapComponent.tsx
View File

@@ -104,9 +104,9 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
const [map, setMap] = useState<OlMap>();
// currentCalData 用于存储当前计算结果
const [currentTime, setCurrentTime] = useState<number>(-1); // 默认-1表示未选择时间
const [selectedDate, setSelectedDate] = useState<Date>(new Date("2025-9-17"));
// const [selectedDate, setSelectedDate] = useState<Date>(new Date()); // 默认今天
const [currentTime, setCurrentTime] = useState<number>(-1); // 默认选择当前时间
// const [selectedDate, setSelectedDate] = useState<Date>(new Date("2025-9-17"));
const [selectedDate, setSelectedDate] = useState<Date>(new Date()); // 默认今天
const [currentJunctionCalData, setCurrentJunctionCalData] = useState<any[]>(
[]
@@ -174,21 +174,7 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
setPipeDataState((prev) => [...prev, ...uniqueNewData]);
}
};
const defaultFlatStyle: FlatStyleLike = {
"stroke-width": 3,
"stroke-color": "rgba(51, 153, 204, 0.9)",
"circle-fill-color": "rgba(255,255,255,0.4)",
"circle-stroke-color": "rgba(255,255,255,0.9)",
"circle-radius": [
"interpolate",
["linear"],
["zoom"],
12,
1, // 在缩放级别 12 时，圆形半径为 1px
24,
12, // 在缩放级别 24 时，圆形半径为 12px
],
};
const defaultFlatStyle: FlatStyleLike = config.mapDefaultStyle;
// 矢量瓦片数据源和图层
const junctionSource = new VectorTileSource({
url: `${mapUrl}/gwc/service/tms/1.0.0/TJWater:geo_junctions_mat@WebMercatorQuad@pbf/{z}/{x}/{-y}.pbf`, // 替换为你的 MVT 瓦片服务 URL
@@ -435,9 +421,9 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
fontFamily: "Monaco, monospace",
getText: (d: any) =>
d[junctionText] ? (d[junctionText] as number).toFixed(3) : "",
getSize: 14,
getSize: 18,
fontWeight: "bold",
getColor: [150, 150, 255],
getColor: [255, 138, 92],
getAngle: 0,
getTextAnchor: "middle",
getAlignmentBaseline: "center",
@@ -455,8 +441,8 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
fontSize: 64,
buffer: 6,
},
outlineWidth: 10,
outlineColor: [255, 255, 255, 255],
// outlineWidth: 10,
// outlineColor: [242, 244, 246, 255],
}),
new TextLayer({
id: "pipeTextLayer",
@@ -466,9 +452,9 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
fontFamily: "Monaco, monospace",
getText: (d: any) =>
d[pipeText] ? (d[pipeText] as number).toFixed(3) : "",
getSize: 12,
getSize: 18,
fontWeight: "bold",
getColor: [120, 128, 181],
getColor: [51, 153, 204],
getAngle: (d: any) => d.angle || 0,
getPixelOffset: [0, -8],
getTextAnchor: "middle",
@@ -485,8 +471,8 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
fontSize: 64,
buffer: 6,
},
outlineWidth: 10,
outlineColor: [255, 255, 255, 255],
// outlineWidth: 10,
// outlineColor: [242, 244, 246, 255],
}),
];
deck.setProps({ layers: newLayers });

371
src/components/olmap/BurstPipeAnalysis/AnalysisParameters.tsx Normal file
View File

@@ -0,0 +1,371 @@
"use client";
import React, { useState, useRef, useEffect } from "react";
import {
Box,
TextField,
Button,
Typography,
IconButton,
Stack,
} from "@mui/material";
import { Close as CloseIcon } from "@mui/icons-material";
import { DateTimePicker } from "@mui/x-date-pickers/DateTimePicker";
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
import dayjs, { Dayjs } from "dayjs";
import "dayjs/locale/zh-cn";
import { useMap } from "@app/OlMap/MapComponent";
import VectorLayer from "ol/layer/Vector";
import VectorSource from "ol/source/Vector";
import Style from "ol/style/Style";
import Stroke from "ol/style/Stroke";
import GeoJson from "ol/format/GeoJSON";
import config from "@config/config";
import type { Feature } from "ol";
import type { Geometry } from "ol/geom";
const mapUrl = config.mapUrl;
interface PipePoint {
id: string;
diameter: number;
area: number;
feature?: any; // 存储管道要素用于高亮
}
interface AnalysisParametersProps {
onAnalyze?: (params: AnalysisParams) => void;
}
interface AnalysisParams {
pipePoints: PipePoint[];
startTime: Dayjs | null;
duration: number;
schemeName: string;
}
const AnalysisParameters: React.FC<AnalysisParametersProps> = ({
onAnalyze,
}) => {
const map = useMap();
const [pipePoints, setPipePoints] = useState<PipePoint[]>([
{ id: "541022", diameter: 110, area: 15 },
{ id: "532748", diameter: 110, area: 15 },
]);
const [startTime, setStartTime] = useState<Dayjs | null>(
dayjs("2025-10-21T00:00:00")
);
const [duration, setDuration] = useState<number>(3000);
const [schemeName, setSchemeName] = useState<string>("Fangan1021100506");
const [isSelecting, setIsSelecting] = useState<boolean>(false);
const highlightLayerRef = useRef<VectorLayer<VectorSource> | null>(null);
const clickListenerRef = useRef<((evt: any) => void) | null>(null);
// 初始化管道图层和高亮图层
useEffect(() => {
if (!map) return;
// 创建高亮图层
const highlightLayer = new VectorLayer({
source: new VectorSource(),
style: new Style({
stroke: new Stroke({
color: "#ff0000",
width: 5,
}),
}),
properties: {
name: "高亮管道",
value: "highlight_pipeline",
},
zIndex: 999,
});
map.addLayer(highlightLayer);
highlightLayerRef.current = highlightLayer;
return () => {
map.removeLayer(highlightLayer);
if (clickListenerRef.current) {
map.un("click", clickListenerRef.current);
}
};
}, [map]);
// 开始选择管道
const handleStartSelection = () => {
if (!map) return;
setIsSelecting(true);
// 显示管道图层
// 注册点击事件
const clickListener = (evt: any) => {
let clickedFeature: any = null;
map.forEachFeatureAtPixel(
evt.pixel,
(feature) => {
if (!clickedFeature) {
clickedFeature = feature;
}
return true;
},
{ hitTolerance: 5 }
);
if (clickedFeature) {
const properties = clickedFeature.getProperties();
const pipeId = properties.Id || properties.id || properties.ID;
const diameter = properties.Diameter || properties.diameter || 100;
// 检查是否已存在
const exists = pipePoints.some((pipe) => pipe.id === pipeId);
if (!exists && pipeId) {
const newPipe: PipePoint = {
id: String(pipeId),
diameter: Number(diameter),
area: 15,
feature: clickedFeature,
};
setPipePoints((prev) => [...prev, newPipe]);
// 添加到高亮图层
const highlightSource = highlightLayerRef.current?.getSource();
if (highlightSource) {
highlightSource.addFeature(clickedFeature);
}
}
}
};
clickListenerRef.current = clickListener;
map.on("click", clickListener);
};
// 结束选择管道
const handleEndSelection = () => {
if (!map) return;
setIsSelecting(false);
// 移除点击事件
if (clickListenerRef.current) {
map.un("click", clickListenerRef.current);
clickListenerRef.current = null;
}
};
const handleRemovePipe = (id: string) => {
// 找到要删除的管道
const pipeToRemove = pipePoints.find((pipe) => pipe.id === id);
// 从高亮图层中移除对应的要素
if (pipeToRemove && pipeToRemove.feature && highlightLayerRef.current) {
const highlightSource = highlightLayerRef.current.getSource();
if (highlightSource) {
highlightSource.removeFeature(pipeToRemove.feature);
}
}
// 从状态中移除
setPipePoints((prev) => prev.filter((pipe) => pipe.id !== id));
};
const handleAreaChange = (id: string, value: string) => {
const numValue = parseFloat(value) || 0;
setPipePoints((prev) =>
prev.map((pipe) => (pipe.id === id ? { ...pipe, area: numValue } : pipe))
);
};
const handleAnalyze = () => {
if (onAnalyze) {
onAnalyze({
pipePoints,
startTime,
duration,
schemeName,
});
}
};
return (
<Box className="flex flex-col h-full">
{/* 选择爆管点 */}
<Box className="mb-4">
<Box className="flex items-center justify-between mb-2">
<Typography variant="subtitle2" className="font-medium">
选择爆管点
</Typography>
{/* 开始/结束选择按钮 */}
{!isSelecting ? (
<Button
variant="outlined"
size="small"
onClick={handleStartSelection}
className="border-blue-500 text-blue-600 hover:bg-blue-50"
startIcon={
<svg
className="w-4 h-4"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122"
/>
</svg>
}
>
开始选择
</Button>
) : (
<Button
variant="contained"
size="small"
onClick={handleEndSelection}
className="bg-red-500 hover:bg-red-600"
startIcon={
<svg
className="w-4 h-4"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M6 18L18 6M6 6l12 12"
/>
</svg>
}
>
结束选择
</Button>
)}
</Box>
{isSelecting && (
<Box className="mb-2 p-2 bg-blue-50 border border-blue-200 rounded text-xs text-blue-700">
💡 点击地图上的管道添加爆管点
</Box>
)}
<Stack spacing={2}>
{pipePoints.map((pipe) => (
<Box
key={pipe.id}
className="flex items-center gap-2 p-2 bg-gray-50 rounded"
>
<Typography className="flex-shrink-0 text-sm">
{pipe.id}
</Typography>
<Typography className="flex-shrink-0 text-sm text-gray-600">
管径: {pipe.diameter} mm
</Typography>
<Typography className="flex-shrink-0 text-sm text-gray-600 mr-2">
爆管点面积
</Typography>
<TextField
size="small"
value={pipe.area}
onChange={(e) => handleAreaChange(pipe.id, e.target.value)}
type="number"
className="w-25"
slotProps={{
input: {
endAdornment: (
<span className="text-xs text-gray-500">cm²</span>
),
},
}}
/>
<IconButton
size="small"
onClick={() => handleRemovePipe(pipe.id)}
className="ml-auto"
>
<CloseIcon fontSize="small" />
</IconButton>
</Box>
))}
</Stack>
</Box>
{/* 选择开始时间 */}
<Box className="mb-4">
<Typography variant="subtitle2" className="mb-2 font-medium">
选择开始时间
</Typography>
<LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale="zh-cn">
<DateTimePicker
value={startTime}
onChange={(value) =>
value && dayjs.isDayjs(value) && setStartTime(value)
}
format="YYYY-MM-DD HH:mm"
slotProps={{
textField: {
size: "small",
fullWidth: true,
},
}}
/>
</LocalizationProvider>
</Box>
{/* 持续时长 */}
<Box className="mb-4">
<Typography variant="subtitle2" className="mb-2 font-medium">
持续时长 (秒)
</Typography>
<TextField
fullWidth
size="small"
type="number"
value={duration}
onChange={(e) => setDuration(parseInt(e.target.value) || 0)}
placeholder="输入持续时长"
/>
</Box>
{/* 方案名称 */}
<Box className="mb-6">
<Typography variant="subtitle2" className="mb-2 font-medium">
方案名称
</Typography>
<TextField
fullWidth
size="small"
value={schemeName}
onChange={(e) => setSchemeName(e.target.value)}
placeholder="输入方案名称"
/>
</Box>
{/* 方案分析按钮 */}
<Box className="mt-auto">
<Button
fullWidth
variant="contained"
size="large"
onClick={handleAnalyze}
className="bg-blue-600 hover:bg-blue-700"
>
方案分析
</Button>
</Box>
</Box>
);
};
export default AnalysisParameters;

205
src/components/olmap/BurstPipeAnalysis/LocationResults.tsx Normal file
View File

@@ -0,0 +1,205 @@
'use client';
import React, { useState } from 'react';
import {
Box,
Typography,
Table,
TableBody,
TableCell,
TableContainer,
TableHead,
TableRow,
Paper,
Chip,
IconButton,
Tooltip,
} from '@mui/material';
import { LocationOn as LocationIcon, Visibility as VisibilityIcon } from '@mui/icons-material';
interface LocationResult {
id: number;
nodeName: string;
nodeId: string;
pressure: number;
waterLevel: number;
flow: number;
status: 'normal' | 'warning' | 'danger';
coordinates: [number, number];
}
interface LocationResultsProps {
onLocate?: (coordinates: [number, number]) => void;
onViewDetail?: (id: number) => void;
}
const LocationResults: React.FC<LocationResultsProps> = ({ onLocate, onViewDetail }) => {
const [results, setResults] = useState<LocationResult[]>([
// 示例数据
// {
// id: 1,
// nodeName: '节点A',
// nodeId: 'N001',
// pressure: 0.35,
// waterLevel: 12.5,
// flow: 85.3,
// status: 'normal',
// coordinates: [120.15, 30.25],
// },
]);
const getStatusColor = (status: string) => {
switch (status) {
case 'normal':
return 'success';
case 'warning':
return 'warning';
case 'danger':
return 'error';
default:
return 'default';
}
};
const getStatusText = (status: string) => {
switch (status) {
case 'normal':
return '正常';
case 'warning':
return '预警';
case 'danger':
return '危险';
default:
return '未知';
}
};
return (
<Box className="flex flex-col h-full">
{/* 统计信息 */}
<Box className="mb-4 p-4 bg-gray-50 rounded">
<Typography variant="subtitle2" className="mb-2 font-medium">
定位结果统计
</Typography>
<Box className="flex gap-4">
<Box>
<Typography variant="caption" className="text-gray-600">
总数
</Typography>
<Typography variant="h6" className="font-bold">
{results.length}
</Typography>
</Box>
<Box>
<Typography variant="caption" className="text-gray-600">
正常
</Typography>
<Typography variant="h6" className="font-bold text-green-600">
{results.filter((r) => r.status === 'normal').length}
</Typography>
</Box>
<Box>
<Typography variant="caption" className="text-gray-600">
预警
</Typography>
<Typography variant="h6" className="font-bold text-orange-600">
{results.filter((r) => r.status === 'warning').length}
</Typography>
</Box>
<Box>
<Typography variant="caption" className="text-gray-600">
危险
</Typography>
<Typography variant="h6" className="font-bold text-red-600">
{results.filter((r) => r.status === 'danger').length}
</Typography>
</Box>
</Box>
</Box>
{/* 结果列表 */}
<Box className="flex-1 overflow-auto">
{results.length === 0 ? (
<Box className="flex flex-col items-center justify-center h-full text-gray-400">
<Box className="mb-4">
<svg
width="80"
height="80"
viewBox="0 0 80 80"
fill="none"
className="opacity-40"
>
<circle cx="40" cy="40" r="25" stroke="currentColor" strokeWidth="2" />
<circle cx="40" cy="40" r="5" fill="currentColor" />
<line x1="40" y1="15" x2="40" y2="25" stroke="currentColor" strokeWidth="2" />
<line x1="40" y1="55" x2="40" y2="65" stroke="currentColor" strokeWidth="2" />
<line x1="15" y1="40" x2="25" y2="40" stroke="currentColor" strokeWidth="2" />
<line x1="55" y1="40" x2="65" y2="40" stroke="currentColor" strokeWidth="2" />
</svg>
</Box>
<Typography variant="body2">暂无定位结果</Typography>
<Typography variant="body2" className="mt-1">
请先执行方案分析
</Typography>
</Box>
) : (
<TableContainer component={Paper} className="shadow-none">
<Table size="small" stickyHeader>
<TableHead>
<TableRow className="bg-gray-50">
<TableCell>节点名称</TableCell>
<TableCell>节点ID</TableCell>
<TableCell align="right">压力 (MPa)</TableCell>
<TableCell align="right">水位 (m)</TableCell>
<TableCell align="right">流量 (m³/h)</TableCell>
<TableCell align="center">状态</TableCell>
<TableCell align="center">操作</TableCell>
</TableRow>
</TableHead>
<TableBody>
{results.map((result) => (
<TableRow key={result.id} hover>
<TableCell>{result.nodeName}</TableCell>
<TableCell>{result.nodeId}</TableCell>
<TableCell align="right">{result.pressure.toFixed(2)}</TableCell>
<TableCell align="right">{result.waterLevel.toFixed(2)}</TableCell>
<TableCell align="right">{result.flow.toFixed(1)}</TableCell>
<TableCell align="center">
<Chip
label={getStatusText(result.status)}
size="small"
color={getStatusColor(result.status) as any}
/>
</TableCell>
<TableCell align="center">
<Tooltip title="定位">
<IconButton
size="small"
onClick={() => onLocate?.(result.coordinates)}
color="primary"
>
<LocationIcon fontSize="small" />
</IconButton>
</Tooltip>
<Tooltip title="查看详情">
<IconButton
size="small"
onClick={() => onViewDetail?.(result.id)}
color="primary"
>
<VisibilityIcon fontSize="small" />
</IconButton>
</Tooltip>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
)}
</Box>
</Box>
);
};
export default LocationResults;

190
src/components/olmap/BurstPipeAnalysis/SchemeQuery.tsx Normal file
View File

@@ -0,0 +1,190 @@
"use client";
import React, { useState } from "react";
import {
Box,
Button,
Typography,
Checkbox,
FormControlLabel,
Table,
TableBody,
TableCell,
TableContainer,
TableHead,
TableRow,
Paper,
IconButton,
} from "@mui/material";
import {
Info as InfoIcon,
LocationOn as LocationIcon,
} from "@mui/icons-material";
import { DatePicker } from "@mui/x-date-pickers/DatePicker";
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
import dayjs, { Dayjs } from "dayjs";
import "dayjs/locale/zh-cn";
interface SchemeRecord {
id: number;
schemeName: string;
type: string;
user: string;
createTime: string;
startTime: string;
}
interface SchemeQueryProps {
onViewDetails?: (id: number) => void;
onLocate?: (id: number) => void;
}
const SchemeQuery: React.FC<SchemeQueryProps> = ({
onViewDetails,
onLocate,
}) => {
const [queryAll, setQueryAll] = useState<boolean>(true);
const [queryDate, setQueryDate] = useState<Dayjs | null>(dayjs("2025-10-21"));
const [schemes, setSchemes] = useState<SchemeRecord[]>([]);
const handleQuery = () => {
// TODO: 实际查询逻辑
console.log("查询方案", { queryAll, queryDate });
// 这里应该调用API获取数据
};
return (
<Box className="flex flex-col h-full">
{/* 查询条件 */}
<Box className="mb-4 p-4 bg-gray-50 rounded">
<Box className="flex items-center gap-4 mb-3">
<FormControlLabel
control={
<Checkbox
checked={queryAll}
onChange={(e) => setQueryAll(e.target.checked)}
/>
}
label="查询全部"
/>
<LocalizationProvider
dateAdapter={AdapterDayjs}
adapterLocale="zh-cn"
>
<DatePicker
value={queryDate}
onChange={(value) =>
value && dayjs.isDayjs(value) && setQueryDate(value)
}
format="YYYY-MM-DD"
disabled={queryAll}
slotProps={{
textField: {
size: "small",
className: "flex-1",
},
}}
/>
</LocalizationProvider>
</Box>
<Button
fullWidth
variant="contained"
onClick={handleQuery}
className="bg-blue-600 hover:bg-blue-700"
>
查询
</Button>
</Box>
{/* 结果列表 */}
<Box className="flex-1 overflow-auto">
{schemes.length === 0 ? (
<Box className="flex flex-col items-center justify-center h-full text-gray-400">
<Box className="mb-4">
<svg
width="80"
height="80"
viewBox="0 0 80 80"
fill="none"
className="opacity-40"
>
<rect
x="10"
y="20"
width="60"
height="45"
rx="2"
stroke="currentColor"
strokeWidth="2"
/>
<line
x1="10"
y1="30"
x2="70"
y2="30"
stroke="currentColor"
strokeWidth="2"
/>
</svg>
</Box>
<Typography variant="body2">总共 0 条</Typography>
<Typography variant="body2" className="mt-1">
No data
</Typography>
</Box>
) : (
<TableContainer component={Paper} className="shadow-none">
<Table size="small">
<TableHead>
<TableRow className="bg-gray-50">
<TableCell>ID</TableCell>
<TableCell>方案名称</TableCell>
<TableCell>类型</TableCell>
<TableCell>用户</TableCell>
<TableCell>创建时间</TableCell>
<TableCell>开始时间</TableCell>
<TableCell align="center">详情</TableCell>
<TableCell align="center">定位</TableCell>
</TableRow>
</TableHead>
<TableBody>
{schemes.map((scheme) => (
<TableRow key={scheme.id} hover>
<TableCell>{scheme.id}</TableCell>
<TableCell>{scheme.schemeName}</TableCell>
<TableCell>{scheme.type}</TableCell>
<TableCell>{scheme.user}</TableCell>
<TableCell>{scheme.createTime}</TableCell>
<TableCell>{scheme.startTime}</TableCell>
<TableCell align="center">
<IconButton
size="small"
onClick={() => onViewDetails?.(scheme.id)}
color="primary"
>
<InfoIcon fontSize="small" />
</IconButton>
</TableCell>
<TableCell align="center">
<IconButton
size="small"
onClick={() => onLocate?.(scheme.id)}
color="primary"
>
<LocationIcon fontSize="small" />
</IconButton>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
)}
</Box>
</Box>
);
};
export default SchemeQuery;

217
src/components/olmap/BurstPipeAnalysisPanel.tsx Normal file
View File

@@ -0,0 +1,217 @@
"use client";
import React, { useState } from "react";
import { Box, Drawer, Tabs, Tab, Typography, IconButton } from "@mui/material";
import {
ChevronRight as ChevronRightIcon,
ChevronLeft as ChevronLeftIcon,
Analytics as AnalyticsIcon,
Search as SearchIcon,
MyLocation as MyLocationIcon,
} from "@mui/icons-material";
import AnalysisParameters from "./BurstPipeAnalysis/AnalysisParameters";
import SchemeQuery from "./BurstPipeAnalysis/SchemeQuery";
import LocationResults from "./BurstPipeAnalysis/LocationResults";
interface TabPanelProps {
children?: React.ReactNode;
index: number;
value: number;
}
const TabPanel: React.FC<TabPanelProps> = ({ children, value, index }) => {
return (
<div
role="tabpanel"
hidden={value !== index}
className="flex-1 overflow-hidden flex flex-col"
>
{value === index && (
<Box className="flex-1 overflow-auto p-4">{children}</Box>
)}
</div>
);
};
interface BurstPipeAnalysisPanelProps {
open?: boolean;
onToggle?: () => void;
}
const BurstPipeAnalysisPanel: React.FC<BurstPipeAnalysisPanelProps> = ({
open: controlledOpen,
onToggle,
}) => {
const [internalOpen, setInternalOpen] = useState(true);
const [currentTab, setCurrentTab] = useState(0);
// 使用受控或非受控状态
const isOpen = controlledOpen !== undefined ? controlledOpen : internalOpen;
const handleToggle = () => {
if (onToggle) {
onToggle();
} else {
setInternalOpen(!internalOpen);
}
};
const handleTabChange = (_event: React.SyntheticEvent, newValue: number) => {
setCurrentTab(newValue);
};
const drawerWidth = 520;
return (
<>
{/* 收起时的触发按钮 */}
{!isOpen && (
<Box
className="absolute top-4 right-4 z-[1300] bg-white shadow-2xl rounded-lg cursor-pointer hover:shadow-xl transition-all duration-300 opacity-95 hover:opacity-100"
onClick={handleToggle}
>
<Box className="flex flex-col items-center py-3 px-3 gap-1">
<AnalyticsIcon className="text-[#257DD4] w-5 h-5" />
<Typography
variant="caption"
className="text-gray-700 font-semibold my-1 text-xs"
style={{ writingMode: "vertical-rl" }}
>
爆管分析
</Typography>
<ChevronLeftIcon className="text-gray-600 w-4 h-4" />
</Box>
</Box>
)}
{/* 主面板 */}
<Drawer
anchor="right"
open={isOpen}
variant="persistent"
hideBackdrop
sx={{
width: isOpen ? drawerWidth : 0,
flexShrink: 0,
"& .MuiDrawer-paper": {
width: drawerWidth,
boxSizing: "border-box",
position: "absolute",
top: 16,
right: 16,
height: "calc(100vh - 32px)",
maxHeight: "850px",
borderRadius: "12px",
boxShadow:
"0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
backdropFilter: "blur(8px)",
opacity: 0.95,
transition: "all 0.3s ease-in-out",
border: "none",
"&:hover": {
opacity: 1,
},
},
}}
>
<Box className="flex flex-col h-full bg-white rounded-xl overflow-hidden">
{/* 头部 */}
<Box className="flex items-center justify-between px-5 py-4 bg-[#257DD4] text-white">
<Box className="flex items-center gap-2">
<AnalyticsIcon className="w-5 h-5" />
<Typography variant="h6" className="text-lg font-semibold">
爆管分析
</Typography>
</Box>
<IconButton
onClick={handleToggle}
size="small"
className="text-white hover:bg-white hover:bg-opacity-20 rounded-full p-1 transition-all duration-200"
aria-label="关闭"
>
<ChevronRightIcon className="w-5 h-5" />
</IconButton>
</Box>
{/* Tabs 导航 */}
<Box className="border-b border-gray-200 bg-white">
<Tabs
value={currentTab}
onChange={handleTabChange}
variant="fullWidth"
sx={{
minHeight: 48,
"& .MuiTab-root": {
minHeight: 48,
textTransform: "none",
fontSize: "0.875rem",
fontWeight: 500,
transition: "all 0.2s",
},
"& .Mui-selected": {
color: "#257DD4",
},
"& .MuiTabs-indicator": {
backgroundColor: "#257DD4",
},
}}
>
<Tab
icon={<AnalyticsIcon fontSize="small" />}
iconPosition="start"
label="分析要件"
/>
<Tab
icon={<SearchIcon fontSize="small" />}
iconPosition="start"
label="方案查询"
/>
<Tab
icon={<MyLocationIcon fontSize="small" />}
iconPosition="start"
label="定位结果"
/>
</Tabs>
</Box>
{/* Tab 内容 */}
<TabPanel value={currentTab} index={0}>
<AnalysisParameters
onAnalyze={(params) => {
console.log("开始分析:", params);
// TODO: 调用分析API
}}
/>
</TabPanel>
<TabPanel value={currentTab} index={1}>
<SchemeQuery
onViewDetails={(id) => {
console.log("查看详情:", id);
// TODO: 显示方案详情
}}
onLocate={(id) => {
console.log("定位方案:", id);
// TODO: 在地图上定位
}}
/>
</TabPanel>
<TabPanel value={currentTab} index={2}>
<LocationResults
onLocate={(coordinates) => {
console.log("定位到:", coordinates);
// TODO: 地图定位到指定坐标
}}
onViewDetail={(id) => {
console.log("查看节点详情:", id);
// TODO: 显示节点详细信息
}}
/>
</TabPanel>
</Box>
</Drawer>
</>
);
};
export default BurstPipeAnalysisPanel;

31
src/config/config.ts
View File

@@ -1,18 +1,33 @@
export const config = {
backendUrl: process.env.NEXT_PUBLIC_BACKEND_URL || "http://192.168.1.42:8000",
mapUrl: process.env.NEXT_PUBLIC_MAP_URL || "http://127.0.0.1:8080/geoserver",
mapExtent: [13508849, 3608035.75, 13555781, 3633812.75],
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
? process.env.MAP_EXTENT.split(",").map(Number)
: [13508849, 3608035.75, 13555781, 3633812.75],
mapDefaultStyle: {
"stroke-width": 3,
"stroke-color": "rgba(51, 153, 204, 0.9)",
"circle-fill-color": "rgba(255,138, 92,0.8)",
"circle-stroke-color": "rgba(255,138, 92,0.9)",
"circle-radius": [
"interpolate",
["linear"],
["zoom"],
12,
1, // 在缩放级别 12 时，圆形半径为 1px
24,
12, // 在缩放级别 24 时，圆形半径为 12px
],
},
// 添加其他配置项...
};
export const MAPBOX_TOKEN =
process.env.NEXT_PUBLIC_MAPBOX_TOKEN ||
process.env.MAPBOX_TOKEN ||
"pk.eyJ1IjoiemhpZnUiLCJhIjoiY205azNyNGY1MGkyZDJxcTJleDUwaHV1ZCJ9.wOmSdOnDDdre-mB1Lpy6Fg";
export const TIANDITU_TOKEN =
process.env.NEXT_PUBLIC_TIANDITU_TOKEN || "e3e8ad95ee911741fa71ed7bff2717ec";
export const PROJECT_TITLE =
process.env.NEXT_PUBLIC_PROJECT_TITLE || "TJWater Project";
process.env.TIANDITU_TOKEN || "e3e8ad95ee911741fa71ed7bff2717ec";
export const PROJECT_TITLE = process.env.PROJECT_TITLE || "TJWater Project";
export const META_DATA = {
title: PROJECT_TITLE,
description: "Developed by TJWATER",

438
src/utils/mapQueryService.js Normal file
View File

@@ -0,0 +1,438 @@
/**
* OpenLayers 地图工具函数集合
* 提供地图要素查询、选择和处理功能
*/
import { GeoJSON } from 'ol/format';
import { Feature } from 'ol';
import { Point, LineString, Polygon } from 'ol/geom';
import Geometry from 'ol/geom/Geometry';
import TileState from 'ol/TileState';
import { toLonLat } from 'ol/proj';
import { booleanIntersects, buffer, point, toWgs84 } from "@turf/turf";
import config from "@config/config";
// ========== 常量配置 ==========
const GEOSERVER_CONFIG = {
url: config.GEOSERVER_URL,
network: config.GEOSERVER_NETWORK,
layers: ['geo_pipes_mat', 'geo_junctions_mat'],
wfsVersion: '1.0.0',
outputFormat: 'application/json',
};
const MAP_CONFIG = {
hitTolerance: 5, // 像素容差
bufferUnits: 'meters',
};
// ========== 几何类型枚举 ==========
const GEOMETRY_TYPES = {
POINT: 'Point',
LINE_STRING: 'LineString',
POLYGON: 'Polygon',
};
// ========== 工具函数 ==========
/**
* 构建 WFS 查询 URL
* @param {string} layer - 图层名称
* @param {string} cqlFilter - CQL 过滤条件
* @returns {string} 完整的 WFS 查询 URL
*/
const buildWfsUrl = (layer, cqlFilter) => {
const { url, network, wfsVersion, outputFormat } = GEOSERVER_CONFIG;
const params = new URLSearchParams({
service: 'WFS',
version: wfsVersion,
request: 'GetFeature',
typeName: `${network}:${layer}`,
outputFormat,
CQL_FILTER: cqlFilter,
});
return `${url}/${network}/ows?${params.toString()}`;
};
/**
* 查询单个图层的要素
* @param {string} layer - 图层名称
* @param {string} cqlFilter - CQL 过滤条件
* @returns {Promise<Feature[]>} 要素数组
*/
const queryLayerFeatures = async (layer, cqlFilter) => {
try {
const url = buildWfsUrl(layer, cqlFilter);
const response = await fetch(url);
if (!response.ok) {
throw new Error(`请求失败: ${response.statusText}`);
}
const json = await response.json();
return new GeoJSON().readFeatures(json);
} catch (error) {
console.error(`图层 ${layer} 查询失败:`, error);
return [];
}
};
/**
* 根据 IDs，通过 Geoserver WFS 服务查询要素
* @param {string[]} ids - 要素 ID 数组
* @param {string} [layer] - 可选的特定图层名称，不传则查询所有图层
* @returns {Promise<Feature[]>} 查询到的要素数组
*/
export const queryFeaturesByIds = async (ids, layer = null) => {
if (!ids || !ids.length) {
return [];
}
const cqlFilter = ids.map((id) => `id=${id}`).join(' OR ');
try {
if (layer) {
// 查询指定图层
return await queryLayerFeatures(layer, cqlFilter);
}
// 查询所有图层
const { layers } = GEOSERVER_CONFIG;
const promises = layers.map((layerName) =>
queryLayerFeatures(layerName, cqlFilter)
);
const results = await Promise.all(promises);
const features = results.flat();
return features;
} catch (error) {
console.error('根据 IDs 查询要素时出错:', error);
return [];
}
};
/**
* 将扁平坐标数组转换为坐标对数组
* @param {number[]} flatCoordinates - 扁平坐标数组 [x1, y1, x2, y2, ...]
* @returns {number[][]} 坐标对数组 [[x1, y1], [x2, y2], ...]
*/
const flatCoordinatesToPairs = (flatCoordinates) => {
const pairs = [];
for (let i = 0; i < flatCoordinates.length; i += 2) {
pairs.push([flatCoordinates[i], flatCoordinates[i + 1]]);
}
return pairs;
};
/**
* 创建点几何对象
* @param {number[]} flatCoordinates - 扁平坐标数组
* @returns {Point} 点几何对象
*/
const createPointGeometry = (flatCoordinates) => {
const coordinates = [flatCoordinates[0], flatCoordinates[1]];
return new Point(coordinates);
};
/**
* 创建线几何对象
* @param {number[]} flatCoordinates - 扁平坐标数组
* @returns {LineString} 线几何对象
*/
const createLineStringGeometry = (flatCoordinates) => {
const lineCoords = flatCoordinatesToPairs(flatCoordinates);
return new LineString(lineCoords);
};
/**
* 创建面几何对象
* @param {number[]} flatCoordinates - 扁平坐标数组
* @param {Object} geometry - 原始几何对象
* @returns {Polygon} 面几何对象
*/
const createPolygonGeometry = (flatCoordinates, geometry) => {
// 获取环的结束位置
const ends = geometry.getEnds ? geometry.getEnds() : [flatCoordinates.length];
const rings = [];
let start = 0;
for (const end of ends) {
const ring = [];
for (let i = start; i < end; i += 2) {
ring.push([flatCoordinates[i], flatCoordinates[i + 1]]);
}
rings.push(ring);
start = end;
}
return new Polygon(rings);
};
/**
* 将 RenderFeature 转换为标准 Feature
* @param {Object} renderFeature - 渲染要素对象
* @returns {Feature|null} OpenLayers Feature 对象，转换失败返回 null
*/
const renderFeature2Feature = (renderFeature) => {
if (!renderFeature) {
return null;
}
const geometry = renderFeature.getGeometry();
if (!geometry) {
return null;
}
try {
let clonedGeometry;
if (geometry instanceof Geometry) {
// 标准 Feature 的几何体，直接使用
clonedGeometry = geometry;
} else {
// RenderFeature 的几何体，需要转换
const type = geometry.getType();
const flatCoordinates = geometry.getFlatCoordinates();
switch (type) {
case 'Point':
clonedGeometry = createPointGeometry(flatCoordinates);
break;
case 'LineString':
clonedGeometry = createLineStringGeometry(flatCoordinates);
break;
case 'Polygon':
clonedGeometry = createPolygonGeometry(flatCoordinates, geometry);
break;
default:
console.warn('不支持的几何体类型:', type);
return null;
}
}
// 创建新的 Feature，包含几何体和属性
const feature = new Feature({
geometry: clonedGeometry,
...renderFeature.getProperties(),
});
return feature;
} catch (error) {
console.error('RenderFeature 转换 Feature 时出错:', error);
return null;
}
};
/**
* 对要素按几何类型进行分类
* @param {Feature} feature - OpenLayers 要素
* @param {Object} categorized - 分类存储对象
*/
const categorizeFeatureByGeometry = (feature, categorized) => {
const geometryType = feature.getGeometry()?.getType();
if (geometryType === GEOMETRY_TYPES.POINT) {
categorized.points.push(feature);
} else if (geometryType === GEOMETRY_TYPES.LINE_STRING) {
categorized.lines.push(feature);
} else {
categorized.others.push(feature);
}
};
/**
* 检查要素是否在缓冲区内
* @param {Feature} feature - OpenLayers 要素
* @param {Object} bufferedGeometry - 缓冲区几何对象
* @returns {boolean} 是否相交
*/
const isFeatureInBuffer = (feature, bufferedGeometry) => {
if (!feature || !bufferedGeometry) {
return false;
}
try {
const geoJSONGeometry = new GeoJSON().writeGeometryObject(
feature.getGeometry()
);
return booleanIntersects(toWgs84(geoJSONGeometry), bufferedGeometry);
} catch (error) {
console.error('要素缓冲区检查失败:', error);
return false;
}
};
/**
* 处理矢量瓦片，提取符合条件的要素
* @param {Object} vectorTile - 矢量瓦片对象
* @param {Object} buffered - 缓冲区对象
* @param {Object} categorized - 分类存储对象
*/
const processVectorTile = (vectorTile, buffered, categorized) => {
if (vectorTile.getState() !== TileState.LOADED) {
return;
}
const renderFeatures = vectorTile.getFeatures();
if (!renderFeatures || renderFeatures.length === 0) {
return;
}
const selectedFeatures = renderFeatures
.map((renderFeature) => renderFeature2Feature(renderFeature))
.filter((feature) => feature !== null) // 过滤转换失败的要素
.filter((feature) => isFeatureInBuffer(feature, buffered?.geometry));
selectedFeatures.forEach((feature) =>
categorizeFeatureByGeometry(feature, categorized)
);
};
/**
* 处理矢量瓦片源，提取所有符合条件的要素
* @param {Object} vectorTileSource - 矢量瓦片源
* @param {number[]} coord - 坐标
* @param {number} z - 缩放级别
* @param {Object} projection - 投影
* @param {Object} categorized - 分类存储对象
*/
const processVectorTileSource = (
vectorTileSource,
coord,
z,
projection,
categorized
) => {
const tileGrid = vectorTileSource.getTileGrid();
if (!tileGrid) {
return;
}
// 确保缩放级别在有效范围内
const minZoom = tileGrid.getMinZoom();
const maxZoom = tileGrid.getMaxZoom();
const validZ = Math.max(minZoom, Math.min(z, maxZoom));
const [x, y] = coord;
const tileCoord = tileGrid.getTileCoordForCoordAndZ([x, y], validZ);
const resolution = tileGrid.getResolution(tileCoord[0]);
// 创建缓冲区用于容差计算
const { hitTolerance, bufferUnits } = MAP_CONFIG;
const hitPoint = point(toLonLat(coord));
const buffered = buffer(hitPoint, resolution * hitTolerance, {
units: bufferUnits,
});
// 获取矢量渲染瓦片
const pixelRatio = window.devicePixelRatio;
const vectorRenderTile = vectorTileSource.getTile(
tileCoord[0],
tileCoord[1],
tileCoord[2],
pixelRatio,
projection
);
// 检查 vectorRenderTile 是否有效
if (!vectorRenderTile) {
return;
}
// 获取源瓦片
const vectorTiles = typeof vectorTileSource.getSourceTiles === 'function' ? vectorTileSource.getSourceTiles(
pixelRatio,
projection,
vectorRenderTile
) : [];
vectorTiles.forEach((vectorTile) =>
processVectorTile(vectorTile, buffered, categorized)
);
};
/**
* 处理地图点击事件，选择要素
* @param {Object} event - 地图点击事件
* @param {Object} map - OpenLayers 地图对象
* @param {Function} setHighlightFeature - 设置高亮要素的回调函数
*/
export const handleMapClickSelectFeatures = (
event,
map,
setHighlightFeature
) => {
if (!map || !event?.coordinate) {
return;
}
const coord = event.coordinate;
const view = map.getView();
const currentZoom = view.getZoom() || 0;
const z = Math.floor(currentZoom) - 1;
const projection = view.getProjection();
// 获取所有矢量瓦片图层源
const vectorTileSources = map
.getAllLayers()
.filter((layer) => layer.getSource && layer.getSource())
.map((layer) => layer.getSource())
.filter((source) => source && source.getTileGrid);
if (!vectorTileSources.length) {
return;
}
// 按几何类型分类存储要素
const categorized = {
points: [],
lines: [],
others: [],
};
// 处理所有矢量瓦片源
vectorTileSources.forEach((vectorTileSource) =>
processVectorTileSource(vectorTileSource, coord, z, projection, categorized)
);
// 按优先级合并要素：点 > 线 > 其他
const selectedFeatures = [
...categorized.points,
...categorized.lines,
...categorized.others,
];
// 处理选中的第一个要素
if (selectedFeatures.length > 0) {
const firstFeature = selectedFeatures[0];
const queryId = firstFeature?.getProperties()?.id;
if (queryId) {
queryFeaturesByIds([queryId])
.then((features) => {
if (features && features.length > 0) {
setHighlightFeature(features[0]);
} else {
setHighlightFeature(null);
}
})
.catch((error) => {
console.error('查询要素详情失败:', error);
setHighlightFeature(null);
});
} else {
setHighlightFeature(null);
}
} else {
setHighlightFeature(null);
}
};
export default {
handleMapClickSelectFeatures,
queryFeaturesByIds,
};