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
This commit is contained in:
ISA
2025-05-28 14:23:11 +02:00
parent 85924e575f
commit fe3ecaa900
5 changed files with 26 additions and 20 deletions

View File

@@ -488,14 +488,14 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
}, [areaMarkers, map]); }, [areaMarkers, map]);
//---------------------------------- //----------------------------------
const { markerStates, layerRefs } = useDynamicDeviceLayers(map, GisSystemStatic, mapLayersVisibility, priorityConfig); const { markerStates, layerRefs } = useDynamicDeviceLayers(map, GisSystemStatic, mapLayersVisibility, priorityConfig, oms);
useEffect(() => { useEffect(() => {
const handleVisibilityChange = () => { const handleVisibilityChange = () => {
if (!map) return; if (!map) return;
const allMarkers = Object.values(markerStates).filter(Array.isArray).flat(); const allMarkers = Object.values(markerStates).filter(Array.isArray).flat();
checkOverlappingMarkers(map, allMarkers, plusRoundIcon); checkOverlappingMarkers(map, allMarkers, plusRoundIcon, oms);
}; };
window.addEventListener("visibilityChanged", handleVisibilityChange); window.addEventListener("visibilityChanged", handleVisibilityChange);
@@ -695,7 +695,14 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
checkOverlappingMarkers(map, allMarkers, plusRoundIcon); checkOverlappingMarkers(map, allMarkers, plusRoundIcon);
}, [map, markerStates, mapLayersVisibility]); }, [map, markerStates, mapLayersVisibility]);
//---------------------------------------------
// 🧠 Optional für Debugging für überlappende Markers
useEffect(() => {
if (oms) {
console.log("📌 OMS ready:", oms);
window.oms = oms; // Für Debugging global
}
}, [oms]);
//--------------------------------------------- //---------------------------------------------
//-------------------------------------------- //--------------------------------------------
return ( return (

View File

@@ -1,2 +1,2 @@
// /config/appVersion // /config/appVersion
export const APP_VERSION = "1.1.202"; export const APP_VERSION = "1.1.203";

View File

@@ -12,7 +12,7 @@ import plusRoundIcon from "../../components/icons/devices/overlapping/PlusRoundI
* @param {object} priorityConfig - Konfig für Prioritäten * @param {object} priorityConfig - Konfig für Prioritäten
* @returns {{ markerStates, layerRefs }} Alle Marker und Referenzen * @returns {{ markerStates, layerRefs }} Alle Marker und Referenzen
*/ */
const useDynamicDeviceLayers = (map, GisSystemStatic, mapLayersVisibility, priorityConfig) => { const useDynamicDeviceLayers = (map, GisSystemStatic, mapLayersVisibility, priorityConfig, oms) => {
const [markerStates, setMarkerStates] = useState({}); const [markerStates, setMarkerStates] = useState({});
const layerRefs = useRef({}); const layerRefs = useRef({});
@@ -29,8 +29,11 @@ const useDynamicDeviceLayers = (map, GisSystemStatic, mapLayersVisibility, prior
IdSystem, IdSystem,
(newMarkers) => { (newMarkers) => {
setMarkerStates((prev) => ({ ...prev, [Name]: newMarkers })); setMarkerStates((prev) => ({ ...prev, [Name]: newMarkers }));
newMarkers.forEach((m) => layerRefs.current[Name].addLayer(m)); newMarkers.forEach((m) => {
checkOverlappingMarkers(map, newMarkers, plusRoundIcon); layerRefs.current[Name].addLayer(m);
if (oms) oms.addMarker(m); // ✅ Marker bei OMS registrieren
});
checkOverlappingMarkers(map, newMarkers, plusRoundIcon, oms);
}, },
GisSystemStatic, GisSystemStatic,
priorityConfig priorityConfig

View File

@@ -149,6 +149,9 @@ export const createAndSetDevices = async (systemId, setMarkersFunction, GisSyste
if (map.contextmenu && contextMenuItemIds.size > 0) { if (map.contextmenu && contextMenuItemIds.size > 0) {
contextMenuItemIds.forEach((id) => map.contextmenu.removeItem(id)); contextMenuItemIds.forEach((id) => map.contextmenu.removeItem(id));
contextMenuItemIds.clear(); contextMenuItemIds.clear();
if (window.oms && typeof window.oms.addMarker === "function") {
window.oms.addMarker(marker);
}
} }
}); });

View File

@@ -21,7 +21,7 @@ export const restoreMapSettings = (map) => {
// Globales Array, um Plus-Icons zu speichern // Globales Array, um Plus-Icons zu speichern
let plusMarkers = []; let plusMarkers = [];
export const checkOverlappingMarkers = (map, markers, plusIcon) => { export const checkOverlappingMarkers = (map, markers, plusIcon, oms) => {
if (!Array.isArray(markers)) { if (!Array.isArray(markers)) {
console.warn("⚠️ checkOverlappingMarkers erwartet ein Array, aber erhielt:", markers); console.warn("⚠️ checkOverlappingMarkers erwartet ein Array, aber erhielt:", markers);
return; return;
@@ -40,31 +40,24 @@ export const checkOverlappingMarkers = (map, markers, plusIcon) => {
} }
}); });
// alte PlusIcons entfernen
plusMarkers.forEach((plusMarker) => map.removeLayer(plusMarker)); plusMarkers.forEach((plusMarker) => map.removeLayer(plusMarker));
plusMarkers = []; plusMarkers = [];
// neue PlusIcons hinzufügen
for (const coords in overlappingGroups) { for (const coords in overlappingGroups) {
if (overlappingGroups[coords].length > 1) { if (overlappingGroups[coords].length > 1) {
const latLng = L.latLng(coords.match(/[-.\d]+/g).map(Number)); const latLng = L.latLng(coords.match(/[-.\d]+/g).map(Number));
const plusMarker = L.marker(latLng, { icon: plusIcon }).addTo(map); const plusMarker = L.marker(latLng, { icon: plusIcon }).addTo(map);
plusMarkers.push(plusMarker); plusMarkers.push(plusMarker);
plusMarker.on("click", (e) => { plusMarker.on("click", () => {
const clickedLatLng = e.latlng; const nearbyMarkers = overlappingGroups[coords];
const nearbyMarkers = markers.filter((marker) => map.distance(marker.getLatLng(), clickedLatLng) < 50);
if (nearbyMarkers.length > 0) { if (oms && nearbyMarkers.length > 0) {
nearbyMarkers[0].fire("click"); oms.spiderfy(nearbyMarkers); // ✅ Zeige Marker als Spider
} }
}); });
} }
} }
if (Object.keys(overlappingGroups).length === 0) {
plusMarkers.forEach((plusMarker) => map.removeLayer(plusMarker));
plusMarkers = [];
}
}; };
export const handlePlusIconClick = (map, markers, oms, clickedLatLng) => { export const handlePlusIconClick = (map, markers, oms, clickedLatLng) => {