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

24
utils/createAndSetDevices.js
View File

@@ -1,4 +1,4 @@
// /utils/createAndSetDevices.js
// /utils/createAndSetDevices.js
import circleIcon from "../components/gisPolylines/icons/CircleIcon";
import { saveLineData, redrawPolyline } from "./mapUtils";
import L from "leaflet";
@@ -36,6 +36,8 @@ export const createAndSetDevices = async (systemId, setMarkersFunction, GisSyste
const getIdSystemAndAllowValueMap = new Map(GisSystemStatic.map((system) => [system.IdSystem, system.Allow]));
if (jsonResponse.Points && statusResponse.Statis) {
console.log("jsonResponse.Points: ", jsonResponse.Points);
console.log("statusResponse.Statis: ", statusResponse.Statis);
const statisMap = new Map(statusResponse.Statis.map((s) => [s.IdLD, s]));
let markersData = jsonResponse.Points.filter((station) => station.System === systemId && getIdSystemAndAllowValueMap.get(station.System) === 1).map((station) => {
const statis = statisMap.get(station.IdLD);
@@ -62,14 +64,7 @@ export const createAndSetDevices = async (systemId, setMarkersFunction, GisSyste
});
// Verwende das `contextmenu`-Ereignis für den Rechtsklick
/* marker.on("contextmenu", function (event) {
if (event && event.preventDefault) {
event.preventDefault(); // Verhindert das Standard-Kontextmenü
}
disablePolylineEvents(window.polylines);
this.openPopup();
});
*/
marker.on("contextmenu", function (event) {
if (event && event.preventDefault) {
event.preventDefault(); // Verhindert das Standard-Kontextmenü
@@ -115,16 +110,7 @@ export const createAndSetDevices = async (systemId, setMarkersFunction, GisSyste
<div class="mt-2">${statusInfo}</div>
</div>
`);
/* marker.bindPopup(`
<div class="bg-white rounded-lg">
<span class="text-lg font-semibold text-gray-900">${station.LD_Name}</span>
<span class="text-md font-bold text-gray-800"> ${station.Device}</span><br>
<span class="text-gray-800"><strong> ${station.Area_Short} </strong>(${station.Area_Name})</span><br>
<span class="text-gray-800"><strong>${station.Location_Short} </strong> (${station.Location_Name})</span>
<div class="mt-2">${statusInfo}</div>
<a href="${station.Link}" target="_blank" style="color: blue;">${BASE_URL}${station.Link}</a>
</div>
`); */
return marker;
});

5
utils/mapUtils.js
View File

@@ -81,7 +81,7 @@ export const restoreMapSettings = (map) => {
export const checkOverlappingMarkers = (map, markers, plusIcon) => {
// Ensure markers is always an array
if (!Array.isArray(markers)) {
//console.error("The `markers` argument is not an array:", markers);
console.error("The `markers` argument is not an array:", markers);
return;
}
@@ -104,7 +104,8 @@ export const checkOverlappingMarkers = (map, markers, plusIcon) => {
const plusMarker = L.marker(latLng, { icon: plusIcon });
plusMarker.addTo(map);
//console.log("Adding plus icon marker at", latLng);
console.log("Adding plus icon marker at", latLng);
}
}
console.log("overlappingGroups", overlappingGroups);
};