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(); - mapLayers.forEach((layer) => { + sortedLayers.forEach((layer) => { visible.set(layer, layer.getVisible()); }); setLayerVisibilities(visible);