自定义图层排列顺序

src/app/OlMap/Controls/LayerControl.tsx

@@ -20,11 +20,40 @@ const LayerControl: React.FC = () => {
       .getArray()
       .filter(
         (layer) =>
-          layer instanceof WebGLVectorTileLayer || layer instanceof VectorTileLayer || layer instanceof VectorLayer
+          layer instanceof WebGLVectorTileLayer ||
+          layer instanceof VectorTileLayer ||
+          layer instanceof VectorLayer
       ) as Layer[];
-    setLayers(mapLayers);
+
+    // 定义图层排序顺序
+    const layerOrder = [
+      "junctions",
+      "reservoirs",
+      "tanks",
+      "pipes",
+      "pumps",
+      "valves",
+      "scada",
+    ];
+
+    // 对图层进行排序
+    const sortedLayers = mapLayers.sort((a, b) => {
+      const nameA = a.get("value")?.toLowerCase() || "";
+      const nameB = b.get("value")?.toLowerCase() || "";
+      const indexA = layerOrder.indexOf(nameA);
+      const indexB = layerOrder.indexOf(nameB);
+
+      // 如果图层不在排序列表中，放到最后
+      if (indexA === -1 && indexB === -1) return 0;
+      if (indexA === -1) return 1;
+      if (indexB === -1) return -1;
+
+      return indexA - indexB;
+    });
+
+    setLayers(sortedLayers);
     const visible = new Map<Layer, boolean>();
-    mapLayers.forEach((layer) => {
+    sortedLayers.forEach((layer) => {
       visible.set(layer, layer.getVisible());
     });
     setLayerVisibilities(visible);