修复 valve 图层不显示的问题；修改节点样式，减小地图放大后的显示大小

src/app/OlMap/MapComponent.tsx

@@ -26,7 +26,7 @@ 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 { Icon, Style } from "ol/style.js";
+import { Icon, Stroke, Style } from "ol/style.js";
 import { FeatureLike } from "ol/Feature";
 import { Point } from "ol/geom";
 import VectorTileLayer from "ol/layer/VectorTile";
@@ -216,39 +216,15 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
     });
   };
   // 定义 valves 图层的样式函数，使用固定图标
-  const valveStyle = function (feature: FeatureLike) {
-    const styles = [];
+  const valveStyle = () => {
     const valveIcon = "/icons/valve.svg";
-
-    const geometry = feature.getGeometry();
-    const lineCoords =
-      geometry?.getType() === "LineString"
-        ? (geometry as any).getCoordinates()
-        : null;
-    if (geometry) {
-      const lineCoordsWGS84 = lineCoords.map((coord: []) => {
-        const [lon, lat] = toLonLat(coord);
-        return [lon, lat];
-      });
-      // 计算中点
-      const lineStringFeature = lineString(lineCoordsWGS84);
-      const lineLength = length(lineStringFeature);
-      const midPoint = along(lineStringFeature, lineLength / 2).geometry
-        .coordinates;
-      // 在中点添加 icon 样式
-      const midPointMercator = toMercator(midPoint);
-      styles.push(
-        new Style({
-          geometry: new Point(midPointMercator),
-          image: new Icon({
-            src: valveIcon,
-            scale: 0.12,
-            anchor: [0.5, 0.5],
-          }),
-        })
-      );
-    }
-    return styles;
+    return new Style({
+      image: new Icon({
+        src: valveIcon,
+        scale: 0.1, // 根据需要调整图标大小
+        anchor: [0.5, 0.5], // 图标锚点居中
+      }),
+    });
   };
   // 定义 pumps 图层的样式函数，使用固定图标
   const pumpStyle = function (feature: FeatureLike) {
@@ -590,12 +566,12 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
       // 明确顺序（点类优先）
       const order = [
         "junctions",
-        "reservoirs",
-        "tanks",
         "scada",
-        "pipes",
-        "valves",
+        "reservoirs",
         "pumps",
+        "tanks",
+        "valves",
+        "pipes",
       ].reverse();
       // 取值时做安全检查，兼容不同写法（properties.value 或 直接 value）
       const getValue = (layer: any) => {
@@ -611,7 +587,6 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
       if (ib === -1) ib = order.length;
       return ia - ib;
     });
-    console.log("Available Layers:", availableLayers);
     const map = new OlMap({
       target: mapRef.current,
       view: new View({