完成管网在线模拟页面组件基本样式和布局

src/app/OlMap/Controls/LayerControl.tsx

@@ -0,0 +1,60 @@
+import React, { useState, useEffect } from "react";
+import { useMap } from "../MapComponent";
+import { Layer } from "ol/layer";
+import { Checkbox, FormControlLabel } from "@mui/material";
+import WebGLVectorTileLayer from "ol/layer/WebGLVectorTile";
+
+const LayerControl: React.FC = () => {
+  const map = useMap();
+  const [layers, setLayers] = useState<Layer[]>([]);
+  const [layerVisibilities, setLayerVisibilities] = useState<
+    Map<Layer, boolean>
+  >(new Map());
+
+  useEffect(() => {
+    if (!map) return;
+    const mapLayers = map
+      .getLayers()
+      .getArray()
+      .filter((layer) => layer instanceof WebGLVectorTileLayer) as Layer[];
+    setLayers(mapLayers);
+    const visible = new Map<Layer, boolean>();
+    mapLayers.forEach((layer) => {
+      visible.set(layer, layer.getVisible());
+    });
+    setLayerVisibilities(visible);
+  }, [map]);
+
+  const handleVisibilityChange = (layer: Layer, visible: boolean) => {
+    layer.setVisible(visible);
+    setLayerVisibilities((prev) => new Map(prev).set(layer, visible));
+  };
+
+  return (
+    <div className="absolute left-4 bottom-4 bg-white rounded-md drop-shadow-lg opacity-85 hover:opacity-100 transition-opacity max-w-xs">
+      <div className="ml-3 grid grid-cols-3">
+        {layers.map((layer, index) => (
+          <FormControlLabel
+            key={index}
+            control={
+              <Checkbox
+                checked={layerVisibilities.get(layer) ?? false}
+                onChange={(e) =>
+                  handleVisibilityChange(layer, e.target.checked)
+                }
+                size="small"
+              />
+            }
+            label={layer.get("name") || `Layer ${index + 1}`}
+            sx={{
+              fontSize: "0.7rem",
+              "& .MuiFormControlLabel-label": { fontSize: "0.7rem" },
+            }}
+          />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default LayerControl;