From 8dde587745fe1bf3c6594a0e9f870162501bb180 Mon Sep 17 00:00:00 2001
From: JIANG <huarch97@gmail.com>
Date: Mon, 17 Nov 2025 16:27:26 +0800
Subject: [PATCH] =?UTF-8?q?=E8=87=AA=E5=AE=9A=E4=B9=89=E5=9B=BE=E5=B1=82?=
 =?UTF-8?q?=E6=8E=92=E5=88=97=E9=A1=BA=E5=BA=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/OlMap/Controls/LayerControl.tsx | 35 ++++++++++++++++++++++---
 1 file changed, 32 insertions(+), 3 deletions(-)

diff --git a/src/app/OlMap/Controls/LayerControl.tsx b/src/app/OlMap/Controls/LayerControl.tsx
index 039ab69..bc3c265 100644
--- a/src/app/OlMap/Controls/LayerControl.tsx
+++ b/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);