61 lines
1.9 KiB
TypeScript
61 lines
1.9 KiB
TypeScript
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 z-10 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;
|