80 lines
2.4 KiB
JavaScript
80 lines
2.4 KiB
JavaScript
import { useEffect } from "react";
|
|
import { addContextMenuToMarker } from "../../utils/addContextMenuToMarker";
|
|
|
|
const useMarkersLayer = (map, markers, GisStationsMeasurements, GMA, oms) => {
|
|
useEffect(() => {
|
|
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: [60, 0],
|
|
}
|
|
);
|
|
|
|
// Ereignisse für das Öffnen und Schließen des Tooltips
|
|
marker.on("mouseover", function () {
|
|
this.openPopup();
|
|
});
|
|
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 useMarkersLayer;
|