Files
nodeMap/hooks/layers/useDynamicDeviceLayers.js
ISA fe3ecaa900 feat(map): OMS (OverlappingMarkerSpiderfier) vollständig integriert
- Marker werden nun korrekt bei OMS registriert
- Klick auf Plus-Icon spiderfied überlappende Marker
- useDynamicDeviceLayers um oms erweitert
- checkOverlappingMarkers optimiert für dynamische Marker-Gruppen
- Fehlerbehandlung für ungültige Marker-Typen ergänzt
2025-05-28 14:23:11 +02:00

72 lines
2.5 KiB
JavaScript

import { useEffect, useRef, useState } from "react";
import L from "leaflet";
import { createAndSetDevices } from "../../utils/devices/createAndSetDevices";
import { checkOverlappingMarkers } from "../../utils/mapUtils";
import plusRoundIcon from "../../components/icons/devices/overlapping/PlusRoundIcon";
/**
* Dynamisch GIS-System-Marker erstellen & Sichtbarkeit steuern.
* @param {object} map - Leaflet Map-Instanz
* @param {Array} GisSystemStatic - Liste der Systeme aus Webservice
* @param {object} mapLayersVisibility - Redux-Objekt mit Layer-Sichtbarkeiten
* @param {object} priorityConfig - Konfig für Prioritäten
* @returns {{ markerStates, layerRefs }} Alle Marker und Referenzen
*/
const useDynamicDeviceLayers = (map, GisSystemStatic, mapLayersVisibility, priorityConfig, oms) => {
const [markerStates, setMarkerStates] = useState({});
const layerRefs = useRef({});
// Marker initialisieren
useEffect(() => {
if (!map || GisSystemStatic.length === 0) return;
GisSystemStatic.forEach(({ Name, IdSystem }) => {
if (!layerRefs.current[Name]) {
layerRefs.current[Name] = new L.LayerGroup().addTo(map);
}
createAndSetDevices(
IdSystem,
(newMarkers) => {
setMarkerStates((prev) => ({ ...prev, [Name]: newMarkers }));
newMarkers.forEach((m) => {
layerRefs.current[Name].addLayer(m);
if (oms) oms.addMarker(m); // ✅ Marker bei OMS registrieren
});
checkOverlappingMarkers(map, newMarkers, plusRoundIcon, oms);
},
GisSystemStatic,
priorityConfig
);
});
}, [map, GisSystemStatic, priorityConfig]);
// Sichtbarkeit aktualisieren
useEffect(() => {
if (!map) return;
const editMode = localStorage.getItem("editMode") === "true";
Object.entries(markerStates).forEach(([systemName, markers]) => {
const isVisible = mapLayersVisibility[systemName];
markers.forEach((marker) => {
const hasLayer = map.hasLayer(marker);
if (editMode || !isVisible) {
if (hasLayer) map.removeLayer(marker);
} else {
if (!hasLayer) marker.addTo(map);
}
});
});
const allMarkers = Object.values(markerStates)
.filter(Array.isArray) // nur Arrays zulassen
.flat();
checkOverlappingMarkers(map, allMarkers, plusRoundIcon);
}, [map, markerStates, mapLayersVisibility]);
return { markerStates, layerRefs };
};
export default useDynamicDeviceLayers;