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

feat: Aktualisierung und Rendering von Marker-Icons und GMA-ToolTip-Werten

Browse Source 
- Marker-Icons werden dynamisch aktualisiert, ohne dass Blinken oder redundantes Rendering auftritt.
- ToolTip-Werte der GMA-Stationen aktualisieren sich in Echtzeit basierend auf neuen Messdaten.
- Verbesserte Performance durch gezielte Updates nur bei Datenänderungen.
This commit is contained in:
ISA
2024-11-26 12:00:55 +01:00
parent 2c31bffd5a
commit 60402ae813
9 changed files with 479 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files

151
hooks/layers/useGmaMarkersLayer.js
View File

@@ -1,88 +1,79 @@
import { useEffect } from "react";
import { useEffect } from "react";
import { addContextMenuToMarker } from "../../utils/addContextMenuToMarker";
const useGmaMarkersLayer = (
map,
gmaMarkers,
GisStationsMeasurements,
GMA,
oms
) => {
const useMarkersLayer = (map, markers, GisStationsMeasurements, GMA, oms) => {
useEffect(() => {
if (map && gmaMarkers.length) {
// Filtere die relevanten Messungen für Fahrbahnzustand
const gmaMeasurements = GisStationsMeasurements.filter(
(m) => m.Gr === "Fahrbahnzustand"
if (!map) return;
// Entferne alte Marker
GMA.clearLayers();
// Hinzufügen neuer Marker
markers.forEach((marker) => {
// Finde die Messungen, die zu diesem Marker gehören
const relevantMeasurements = GisStationsMeasurements.filter((m) => m.Area_Name === marker.options.areaName);
let measurements = {};
let area_name = marker.options.areaName;
relevantMeasurements.forEach((m) => {
measurements[m.Na] = m.Val;
});
// Überprüfe, ob die Messwerte vorhanden sind, und setze Standardwerte
const lt = measurements["LT"] || "---";
const fbt = measurements["FBT"] || "---";
const gt = measurements["GT"] || "---";
const rlf = measurements["RLF"] || "---";
console.log(`Station oder Bereich ${area_name} - LT: ${lt}, FBT: ${fbt}, GT: ${gt}, RLF: ${rlf}`);
// Tooltip für den Marker binden
marker.bindTooltip(
`
<div class="p-0 rounded-lg bg-white bg-opacity-90">
<div class="font-bold text-sm text-black">
<span>${area_name}</span>
</div>
<div class="font-bold text-xxs text-blue-700">
<span>LT : ${lt} °C</span>
</div>
<div class="font-bold text-xxs text-red-700">
<span>FBT : ${fbt} °C</span>
</div>
<div class="font-bold text-xxs text-yellow-500">
<span>GT : ${gt}</span>
</div>
<div class="font-bold text-xxs text-green-700">
<span>RLF : ${rlf} %</span>
</div>
</div>
`,
{
permanent: true,
direction: "auto",
offset: [20, 0],
}
);
gmaMarkers.forEach((marker) => {
marker.addTo(map);
oms.addMarker(marker);
// Finde die Messungen, die zu diesem Marker gehören
const relevantMeasurements = gmaMeasurements.filter(
(m) => m.Area_Name === marker.options.areaName
);
let measurements = {};
let area_name = marker.options.areaName;
relevantMeasurements.forEach((m) => {
measurements[m.Na] = m.Val;
});
// Überprüfe, ob die Messwerte vorhanden sind, und setze Standardwerte
const lt = measurements["LT"] || "Datenlücke";
const fbt = measurements["FBT"] || "nicht verfügbar";
const gt = measurements["GT"] || "nicht verfügbar";
const rlf = measurements["RLF"] || "nicht verfügbar";
// Log die aktuellen Messwerte für den Marker
/*
console.log(
`Marker at ${area_name} - LT: ${lt}, FBT: ${fbt}, GT: ${gt}, RLF: ${rlf}`
);
*/
// Tooltip für den Marker binden
marker.bindTooltip(
`
<div class="p-0 rounded-lg bg-white bg-opacity-90">
<div class="font-bold text-sm text-black">
<span>${area_name}</span>
</div>
<div class="font-bold text-xxs text-blue-700">
<span>LT : ${lt} °C</span>
</div>
<div class="font-bold text-xxs text-red-700">
<span>FBT : ${fbt} °C</span>
</div>
<div class="font-bold text-xxs text-yellow-500">
<span>GT : ${gt}</span>
</div>
<div class="font-bold text-xxs text-green-700">
<span>RLF : ${rlf} %</span>
</div>
</div>
`,
{
permanent: true,
direction: "auto",
offset: [20, 0],
}
);
// Ereignisse für das Öffnen und Schließen des Tooltips
marker.on("mouseover", function () {
this.openPopup();
});
marker.on("mouseout", function () {
this.closePopup();
});
addContextMenuToMarker(marker);
// Ereignisse für das Öffnen und Schließen des Tooltips
marker.on("mouseover", function () {
this.openPopup();
});
map.addLayer(GMA);
}
}, [map, gmaMarkers, GisStationsMeasurements, GMA, oms]);
marker.on("mouseout", function () {
this.closePopup();
});
// Kontextmenü hinzufügen
addContextMenuToMarker(marker);
// Füge den Marker zur Layer-Gruppe hinzu
GMA.addLayer(marker);
oms.addMarker(marker);
});
map.addLayer(GMA);
}, [map, markers, GisStationsMeasurements, GMA, oms]);
};
export default useGmaMarkersLayer;
export default useMarkersLayer;