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

src/app/OlMap/Controls/LayerControl.tsx

@@ -4,6 +4,7 @@ import { Layer } from "ol/layer";
 import { Checkbox, FormControlLabel } from "@mui/material";
 import WebGLVectorTileLayer from "ol/layer/WebGLVectorTile";
 import VectorLayer from "ol/layer/Vector";
+import VectorTileLayer from "ol/layer/VectorTile";
 
 const LayerControl: React.FC = () => {
   const map = useMap();
@@ -19,7 +20,7 @@ const LayerControl: React.FC = () => {
       .getArray()
       .filter(
         (layer) =>
-          layer instanceof WebGLVectorTileLayer || layer instanceof VectorLayer
+          layer instanceof WebGLVectorTileLayer || layer instanceof VectorTileLayer || layer instanceof VectorLayer
       ) as Layer[];
     setLayers(mapLayers);
     const visible = new Map<Layer, boolean>();

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({

src/config/config.ts

@@ -18,7 +18,7 @@ export const config = {
       12,
       1, // 在缩放级别 12 时，圆形半径为 1px
       24,
-      12, // 在缩放级别 24 时，圆形半径为 12px
+      8, // 在缩放级别 24 时，圆形半径为 8px
     ],
   },
   MAP_AVAILABLE_LAYERS: process.env.NEXT_PUBLIC_MAP_AVAILABLE_LAYERS