fix: Sichtbarkeitsbedingung im GMA-Layer-Hook behoben, um Hook-Fehler zu vermeiden

- Refaktorierung des `useMarkersLayer`-Hooks zur internen Behandlung der Sichtbarkeitsbedingung.
- `isVisible`-Parameter hinzugefügt, um konsistente Hook-Aufrufe sicherzustellen.
- Cleanup-Logik verbessert, um Layer beim Unmount korrekt zu entfernen.
- GMA-Marker und Tooltips basierend auf Sichtbarkeit korrekt verarbeitet.
This commit is contained in:
ISA
2024-11-29 09:31:55 +01:00
parent 67eadeae9d
commit 35915bb91f
2 changed files with 20 additions and 8 deletions

View File

@@ -240,7 +240,14 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
fetchAndSetUserRights(); fetchAndSetUserRights();
}, []); }, []);
useGmaMarkersLayer(map, gmaMarkers, GisStationsMeasurements, layers.MAP_LAYERS.GMA, oms); // Verwende den ausgelagerten Hook useGmaMarkersLayer(
map,
gmaMarkers,
GisStationsMeasurements,
layers.MAP_LAYERS.GMA,
oms,
mapLayersVisibility.GMA // Übergebe die Sichtbarkeitsbedingung als Parameter
);
useEffect(() => { useEffect(() => {
const fetchWebServiceMap = async () => { const fetchWebServiceMap = async () => {
@@ -679,7 +686,7 @@ await fetchGisStationsStatusDistrict(mapGisStationsStatusDistrictUrl, setGisStat
initializeContextMenu(); initializeContextMenu();
}, [map]); }, [map]);
//-------------------------------------------- //--------------------------------------------
//Tooltip Werte aktualisieren
useEffect(() => { useEffect(() => {
if (!map) return; // Stelle sicher, dass die Karte initialisiert ist if (!map) return; // Stelle sicher, dass die Karte initialisiert ist
@@ -696,7 +703,7 @@ await fetchGisStationsStatusDistrict(mapGisStationsStatusDistrictUrl, setGisStat
await fetchGisStationsMeasurements(mapGisStationsMeasurementsUrl, setGisStationsMeasurements, fetchOptions); await fetchGisStationsMeasurements(mapGisStationsMeasurementsUrl, setGisStationsMeasurements, fetchOptions);
// Aktualisiere die Marker-Layer // Aktualisiere die Marker-Layer
useGmaMarkersLayer(map, gmaMarkers, GisStationsMeasurements, layers.MAP_LAYERS.GMA, oms); // useGmaMarkersLayer(map, gmaMarkers, GisStationsMeasurements, layers.MAP_LAYERS.GMA, oms);
} catch (error) { } catch (error) {
console.error("Fehler beim Aktualisieren der GMA-Daten:", error); console.error("Fehler beim Aktualisieren der GMA-Daten:", error);
} }

View File

@@ -1,9 +1,10 @@
import { useEffect } from "react"; //hooks/layers/useGmaMarkersLayer.js
import { useEffect } from "react";
import { addContextMenuToMarker } from "../../utils/addContextMenuToMarker"; import { addContextMenuToMarker } from "../../utils/addContextMenuToMarker";
const useMarkersLayer = (map, markers, GisStationsMeasurements, GMA, oms) => { const useMarkersLayer = (map, markers, GisStationsMeasurements, GMA, oms, isVisible) => {
useEffect(() => { useEffect(() => {
if (!map) return; if (!map || !isVisible) return; // Bedingung hier prüfen
// Entferne alte Marker // Entferne alte Marker
GMA.clearLayers(); GMA.clearLayers();
@@ -28,7 +29,6 @@ const useMarkersLayer = (map, markers, GisStationsMeasurements, GMA, oms) => {
const rlf = measurements["RLF"] || "---"; const rlf = measurements["RLF"] || "---";
console.log(`Station oder Bereich ${area_name} - LT: ${lt}, FBT: ${fbt}, GT: ${gt}, RLF: ${rlf}`); console.log(`Station oder Bereich ${area_name} - LT: ${lt}, FBT: ${fbt}, GT: ${gt}, RLF: ${rlf}`);
console.log(`Station idLD: ${idLD} `);
// Tooltip für den Marker binden // Tooltip für den Marker binden
marker.bindTooltip( marker.bindTooltip(
@@ -75,7 +75,12 @@ const useMarkersLayer = (map, markers, GisStationsMeasurements, GMA, oms) => {
}); });
map.addLayer(GMA); map.addLayer(GMA);
}, [map, markers, GisStationsMeasurements, GMA, oms]);
return () => {
GMA.clearLayers();
map.removeLayer(GMA); // Entferne die Layer, wenn der Hook gereinigt wird
};
}, [map, markers, GisStationsMeasurements, GMA, oms, isVisible]);
}; };
export default useMarkersLayer; export default useMarkersLayer;