实现 SCADA 设备列表数据对接；监测点优化，实现传感器定位；爆管分析，属性面板新增计算属性的获取；更新部分图标；爆管分析定位，更改时间轴样式。

src/app/OlMap/MapComponent.tsx

@@ -23,6 +23,10 @@ import { Deck } from "@deck.gl/core";
 import { TextLayer } from "@deck.gl/layers";
 import { TripsLayer } from "@deck.gl/geo-layers";
 import { CollisionFilterExtension } from "@deck.gl/extensions";
+import VectorSource from "ol/source/Vector";
+import GeoJson from "ol/format/GeoJSON";
+import VectorLayer from "ol/layer/Vector";
+import { Style, Icon } from "ol/style";
 
 interface MapComponentProps {
   children?: React.ReactNode;
@@ -31,6 +35,8 @@ interface DataContextType {
   currentTime?: number; // 当前时间
   setCurrentTime?: React.Dispatch<React.SetStateAction<number>>;
   selectedDate?: Date; // 选择的日期
+  schemeName?: string; // 当前方案名称
+  setSchemeName?: React.Dispatch<React.SetStateAction<string>>;
   setSelectedDate?: React.Dispatch<React.SetStateAction<Date>>;
   currentJunctionCalData?: any[]; // 当前计算结果
   setCurrentJunctionCalData?: React.Dispatch<React.SetStateAction<any[]>>;
@@ -44,6 +50,7 @@ interface DataContextType {
   pipeText: string;
   setJunctionText?: React.Dispatch<React.SetStateAction<string>>;
   setPipeText?: React.Dispatch<React.SetStateAction<string>>;
+  scadaData?: any[]; // SCADA 数据
 }
 
 // 创建自定义Layer类来包装deck.gl
@@ -103,6 +110,7 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
   const [currentTime, setCurrentTime] = useState<number>(-1); // 默认选择当前时间
   // const [selectedDate, setSelectedDate] = useState<Date>(new Date("2025-9-17"));
   const [selectedDate, setSelectedDate] = useState<Date>(new Date()); // 默认今天
+  const [schemeName, setSchemeName] = useState<string>(""); // 当前方案名称
 
   const [currentJunctionCalData, setCurrentJunctionCalData] = useState<any[]>(
     []
@@ -165,7 +173,22 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
       setPipeDataState((prev) => [...prev, ...uniqueNewData]);
     }
   };
+  // 配置地图数据源、图层和样式
   const defaultFlatStyle: FlatStyleLike = config.mapDefaultStyle;
+  // 定义 SCADA 图层的样式函数，根据 type 字段选择不同图标
+  const scadaStyle = (feature: any) => {
+    const type = feature.get("type");
+    const scadaPressureIcon = "/icons/scada_pressure.svg";
+    const scadaFlowIcon = "/icons/scada_flow.svg";
+    // 如果 type 不匹配，可以设置默认图标或不显示
+    return new Style({
+      image: new Icon({
+        src: type === "pipe_flow" ? scadaFlowIcon : scadaPressureIcon,
+        scale: 0.1, // 根据需要调整图标大小
+        anchor: [0.5, 0.5], // 图标锚点居中
+      }),
+    });
+  };
   // 矢量瓦片数据源和图层
   const junctionSource = new VectorTileSource({
     url: `${mapUrl}/gwc/service/tms/1.0.0/TJWater:geo_junctions_mat@WebMercatorQuad@pbf/{z}/{x}/{-y}.pbf`, // 替换为你的 MVT 瓦片服务 URL
@@ -177,6 +200,10 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
     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`,
+    format: new GeoJson(),
+  });
   // WebGL 渲染优化显示
   const junctionLayer = new WebGLVectorTileLayer({
     source: junctionSource as any, // 使用 WebGL 渲染
@@ -223,7 +250,19 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
       ],
     },
   });
-
+  const scadaLayer = new VectorLayer({
+    source: scadaSource,
+    style: scadaStyle,
+    // extent: extent, // 设置图层范围
+    maxZoom: 24,
+    minZoom: 12,
+    properties: {
+      name: "SCADA", // 设置图层名称
+      value: "scada",
+      type: "point",
+      properties: [],
+    },
+  });
   useEffect(() => {
     if (!mapRef.current) return;
     // 缓存 junction、pipe 数据，提供给 deck.gl 显示标签使用
@@ -340,7 +379,6 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
         console.error("Pipe tile load error:", error);
       }
     });
-    // 更新标签可见性状态
     // 监听 junctionLayer 的 visible 变化
     const handleJunctionVisibilityChange = () => {
       const isVisible = junctionLayer.getVisible();
@@ -361,7 +399,7 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
         projection: "EPSG:3857",
       }),
       // 图层依面、线、点、标注次序添加
-      layers: [pipeLayer, junctionLayer],
+      layers: [pipeLayer, junctionLayer, scadaLayer],
       controls: [],
     });
     setMap(map);
@@ -417,7 +455,7 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
           d[junctionText] ? (d[junctionText] as number).toFixed(3) : "",
         getSize: 18,
         fontWeight: "bold",
-        getColor: [255, 138, 92],
+        getColor: [0, 0, 0],
         getAngle: 0,
         getTextAnchor: "middle",
         getAlignmentBaseline: "center",
@@ -593,6 +631,8 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
           setCurrentTime,
           selectedDate,
           setSelectedDate,
+          schemeName,
+          setSchemeName,
           currentJunctionCalData,
           setCurrentJunctionCalData,
           currentPipeCalData,