使用 WebGLVectorTileLayer 渲染 valvesLayer

src/app/OlMap/MapComponent.tsx

@@ -29,7 +29,6 @@ import VectorLayer from "ol/layer/Vector";
 import { Icon, Style } from "ol/style.js";
 import { FeatureLike } from "ol/Feature";
 import { Point } from "ol/geom";
-import VectorTileLayer from "ol/layer/VectorTile";
 
 interface MapComponentProps {
   children?: React.ReactNode;
@@ -216,15 +215,19 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
     });
   };
   // 定义 valves 图层的样式函数，使用固定图标
-  const valveStyle = () => {
-    const valveIcon = "/icons/valve.svg";
-    return new Style({
-      image: new Icon({
-        src: valveIcon,
-        scale: 0.1, // 根据需要调整图标大小
-        anchor: [0.5, 0.5], // 图标锚点居中
-      }),
-    });
+  // const valveStyle = () => {
+  //   const valveIcon = "/icons/valve.svg";
+  //   return new Style({
+  //     image: new Icon({
+  //       src: valveIcon,
+  //       scale: 0.1, // 根据需要调整图标大小
+  //       anchor: [0.5, 0.5], // 图标锚点居中
+  //     }),
+  //   });
+  // };
+  const valveStyle = {
+    "icon-src": "/icons/valve.svg",
+    "icon-scale": 0.1,
   };
   // 定义 pumps 图层的样式函数，使用固定图标
   const pumpStyle = function (feature: FeatureLike) {
@@ -340,8 +343,8 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
       ],
     },
   });
-  const valvesLayer = new VectorTileLayer({
-    source: valveSource,
+  const valvesLayer = new WebGLVectorTileLayer({
+    source: valveSource as any,
     style: valveStyle,
     extent: MAP_EXTENT, // 设置图层范围
     maxZoom: 24,