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:
@@ -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 (
|
||||||
|
|||||||
@@ -1,2 +1,2 @@
|
|||||||
// /config/appVersion
|
// /config/appVersion
|
||||||
export const APP_VERSION = "1.1.202";
|
export const APP_VERSION = "1.1.203";
|
||||||
|
|||||||
@@ -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
|
||||||
|
|||||||
@@ -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);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@@ -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) => {
|
||||||
|
|||||||
Reference in New Issue
Block a user