Ismail/nodeMap
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Marker-Layer-Logik in useDynamicMarkerLayers Hook ausgelagert

Browse Source 
- Logik zur Initialisierung und Aktualisierung von Marker-Layern aus MapComponent.js ausgelagert.
- Neuer Hook: useDynamicMarkerLayers im hooks-Verzeichnis hinzugefügt.
- Modularisierung und Wiederverwendbarkeit verbessert.
This commit is contained in:
ISA
2024-12-22 07:07:09 +01:00
parent 2392d410be
commit d0811366f5
2 changed files with 105 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

112
components/MapComponent.js
View File

@@ -47,6 +47,7 @@ import { usePolylineTooltipLayer } from "../hooks/usePolylineTooltipLayer";
import { useFetchLineStatusData } from "../hooks/useFetchLineStatusData";
import { useFetchPriorityConfig } from "../hooks/useFetchPriorityConfig";
import { useUpdateGmaData } from "../hooks/useUpdateGmaData";
import { useDynamicMarkerLayers } from "../hooks/useDynamicMarkerLayers";
//--------------------------------------------
import { currentPoiState } from "../redux/slices/currentPoiSlice.js";
import { selectGisStationsStaticDistrict, setGisStationsStaticDistrict } from "../redux/slices/gisStationsStaticDistrictSlice";
@@ -584,97 +585,30 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
);
//---------------------------------
const gmaLayerRef = useRef(null);
const talasLayerRef = useRef(null);
const eciMarkersLayerRef = useRef(null);
const gsmModemMarkersLayerRef = useRef(null);
const ciscoRouterMarkersLayerRef = useRef(null);
const wagoMarkersLayerRef = useRef(null);
const siemensMarkersLayerRef = useRef(null);
const otdrMarkersLayerRef = useRef(null);
const wdmMarkersLayerRef = useRef(null);
const messstellenMarkersLayerRef = useRef(null);
const talasiclMarkersLayerRef = useRef(null);
const dauzMarkersLayerRef = useRef(null);
const smsfunkmodemMarkersLayerRef = useRef(null);
const ulafMarkersLayerRef = useRef(null);
const sonstigeMarkersLayerRef = useRef(null);
const tkComponentsMarkersRef = useRef(null);
useEffect(() => {
if (!gisSystemStaticLoaded || !map) return; // Sicherstellen, dass die Karte und Daten geladen sind
const layerGroups = [
{ ref: gmaLayerRef, id: 11, setState: setGmaMarkers },
{ ref: talasLayerRef, id: 1, setState: setTalasMarkers },
{ ref: eciMarkersLayerRef, id: 2, setState: setEciMarkers },
{ ref: gsmModemMarkersLayerRef, id: 5, setState: setGsmModemMarkers },
{ ref: ciscoRouterMarkersLayerRef, id: 6, setState: setCiscoRouterMarkers },
{ ref: wagoMarkersLayerRef, id: 7, setState: setWagoMarkers },
{ ref: siemensMarkersLayerRef, id: 8, setState: setSiemensMarkers },
{ ref: otdrMarkersLayerRef, id: 9, setState: setOtdrMarkers },
{ ref: wdmMarkersLayerRef, id: 10, setState: setWdmMarkers },
{ ref: messstellenMarkersLayerRef, id: 13, setState: setMessstellenMarkers },
{ ref: talasiclMarkersLayerRef, id: 100, setState: setTalasiclMarkers },
{ ref: dauzMarkersLayerRef, id: 110, setState: setDauzMarkers },
{ ref: smsfunkmodemMarkersLayerRef, id: 111, setState: setSmsfunkmodemMarkers },
{ ref: ulafMarkersLayerRef, id: 0, setState: setUlafMarkers },
{ ref: sonstigeMarkersLayerRef, id: 200, setState: setSonstigeMarkers },
{ ref: tkComponentsMarkersRef, id: 30, setState: setTkComponentsMarkers },
];
// Initialisiere LayerGroups nur einmal
layerGroups.forEach(({ ref }) => {
if (!ref.current) {
ref.current = new L.LayerGroup().addTo(map);
}
});
const updateMarkers = ({ ref, id, setState }) => {
if (ref.current) {
ref.current.clearLayers(); // Entferne alte Marker
}
// Erstelle und füge neue Marker hinzu
createAndSetDevices(
id,
(newMarkers) => {
setState(newMarkers); // Zustand aktualisieren
newMarkers.forEach((marker) => ref.current.addLayer(marker)); // Marker zur LayerGroup hinzufügen
// Überprüfe auf überlappende Marker und füge das Plus-Icon hinzu
checkOverlappingMarkers(map, newMarkers, plusRoundIcon);
},
useDynamicMarkerLayers(
map,
gisSystemStaticLoaded,
GisSystemStatic,
priorityConfig
);
};
// Aktualisiere alle Marker-Gruppen
const updateAllMarkers = () => {
layerGroups.forEach(updateMarkers);
};
// Initiales Update
updateAllMarkers();
// Setze ein Intervall für regelmäßige Updates
/* const intervalId = setInterval(() => {
updateAllMarkers();
}, 60000); // 20 Sekunden
// Aufräumen bei Komponentenentladung
return () => {
clearInterval(intervalId); // Entferne Intervall
// LayerGroups leeren
layerGroups.forEach(({ ref }) => {
if (ref.current) {
ref.current.clearLayers();
priorityConfig,
{
setGmaMarkers,
setTalasMarkers,
setEciMarkers,
setGsmModemMarkers,
setCiscoRouterMarkers,
setWagoMarkers,
setSiemensMarkers,
setOtdrMarkers,
setWdmMarkers,
setMessstellenMarkers,
setTalasiclMarkers,
setDauzMarkers,
setSmsfunkmodemMarkers,
setUlafMarkers,
setSonstigeMarkers,
setTkComponentsMarkers,
}
});
}; */
}, [gisSystemStaticLoaded, map, GisSystemStatic, priorityConfig]);
);
//---------------------------------------
// Initialisiere Leaflet-Karte

80
hooks/useDynamicMarkerLayers.js Normal file
View File

@@ -0,0 +1,80 @@
import { useEffect, useRef } from "react";
import L from "leaflet";
import { createAndSetDevices } from "../utils/createAndSetDevices.js";
import { checkOverlappingMarkers } from "../utils/markerUtils";
import { plusRoundIcon } from "../components/PlusRoundIcon.js";
export const useDynamicMarkerLayers = (
map,
gisSystemStaticLoaded,
GisSystemStatic,
priorityConfig,
setMarkerStates
) => {
const layerRefs = {
gmaLayerRef: useRef(null),
talasLayerRef: useRef(null),
eciMarkersLayerRef: useRef(null),
gsmModemMarkersLayerRef: useRef(null),
ciscoRouterMarkersLayerRef: useRef(null),
wagoMarkersLayerRef: useRef(null),
siemensMarkersLayerRef: useRef(null),
otdrMarkersLayerRef: useRef(null),
wdmMarkersLayerRef: useRef(null),
messstellenMarkersLayerRef: useRef(null),
talasiclMarkersLayerRef: useRef(null),
dauzMarkersLayerRef: useRef(null),
smsfunkmodemMarkersLayerRef: useRef(null),
ulafMarkersLayerRef: useRef(null),
sonstigeMarkersLayerRef: useRef(null),
tkComponentsMarkersRef: useRef(null),
};
useEffect(() => {
if (!gisSystemStaticLoaded || !map) return;
const layerGroups = [
{ ref: layerRefs.gmaLayerRef, id: 11, setState: setMarkerStates.setGmaMarkers },
{ ref: layerRefs.talasLayerRef, id: 1, setState: setMarkerStates.setTalasMarkers },
{ ref: layerRefs.eciMarkersLayerRef, id: 2, setState: setMarkerStates.setEciMarkers },
{ ref: layerRefs.gsmModemMarkersLayerRef, id: 5, setState: setMarkerStates.setGsmModemMarkers },
{ ref: layerRefs.ciscoRouterMarkersLayerRef, id: 6, setState: setMarkerStates.setCiscoRouterMarkers },
{ ref: layerRefs.wagoMarkersLayerRef, id: 7, setState: setMarkerStates.setWagoMarkers },
{ ref: layerRefs.siemensMarkersLayerRef, id: 8, setState: setMarkerStates.setSiemensMarkers },
{ ref: layerRefs.otdrMarkersLayerRef, id: 9, setState: setMarkerStates.setOtdrMarkers },
{ ref: layerRefs.wdmMarkersLayerRef, id: 10, setState: setMarkerStates.setWdmMarkers },
{ ref: layerRefs.messstellenMarkersLayerRef, id: 13, setState: setMarkerStates.setMessstellenMarkers },
{ ref: layerRefs.talasiclMarkersLayerRef, id: 100, setState: setMarkerStates.setTalasiclMarkers },
{ ref: layerRefs.dauzMarkersLayerRef, id: 110, setState: setMarkerStates.setDauzMarkers },
{ ref: layerRefs.smsfunkmodemMarkersLayerRef, id: 111, setState: setMarkerStates.setSmsfunkmodemMarkers },
{ ref: layerRefs.ulafMarkersLayerRef, id: 0, setState: setMarkerStates.setUlafMarkers },
{ ref: layerRefs.sonstigeMarkersLayerRef, id: 200, setState: setMarkerStates.setSonstigeMarkers },
{ ref: layerRefs.tkComponentsMarkersRef, id: 30, setState: setMarkerStates.setTkComponentsMarkers },
];
layerGroups.forEach(({ ref }) => {
if (!ref.current) {
ref.current = new L.LayerGroup().addTo(map);
}
});
const updateMarkers = ({ ref, id, setState }) => {
if (ref.current) {
ref.current.clearLayers();
}
createAndSetDevices(id, (newMarkers) => {
setState(newMarkers);
newMarkers.forEach((marker) => ref.current.addLayer(marker));
checkOverlappingMarkers(map, newMarkers, plusRoundIcon);
}, GisSystemStatic, priorityConfig);
};
const updateAllMarkers = () => {
layerGroups.forEach(updateMarkers);
};
updateAllMarkers();
}, [gisSystemStaticLoaded, map, GisSystemStatic, priorityConfig]);
};