feat: Aktualisierung und Rendering von Marker-Icons und GMA-ToolTip-Werten
- 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
@@ -1,4 +1,4 @@
|
||||
// components/MapComponent.js
|
||||
// components/MapComponent.js
|
||||
import React, { useEffect, useRef, useState, useCallback } from "react";
|
||||
import L, { marker } from "leaflet";
|
||||
import "leaflet/dist/leaflet.css";
|
||||
@@ -44,9 +44,9 @@ import { addItemsToMapContextMenu } from "./useMapContextMenu.js";
|
||||
import useGmaMarkersLayer from "../hooks/layers/useGmaMarkersLayer.js"; // Import the custom hook
|
||||
import useTalasMarkersLayer from "../hooks/layers/useTalasMarkersLayer.js"; // Import the custom hook
|
||||
import useEciMarkersLayer from "../hooks/layers/useEciMarkersLayer.js";
|
||||
//import useGsmModemMarkersLayer from "../hooks/layers/useGsmModemMarkersLayer.js";
|
||||
import useGsmModemMarkersLayer from "../hooks/layers/useGsmModemMarkersLayer.js";
|
||||
import useCiscoRouterMarkersLayer from "../hooks/layers/useCiscoRouterMarkersLayer.js";
|
||||
import useLteModemMarkersLayer from "../hooks/layers/useLteModemMarkersLayer";
|
||||
//import useLteModemMarkersLayer from "../hooks/layers/useLteModemMarkersLayer";
|
||||
|
||||
import useWagoMarkersLayer from "../hooks/layers/useWagoMarkersLayer.js";
|
||||
import useSiemensMarkersLayer from "../hooks/layers/useSiemensMarkersLayer.js";
|
||||
@@ -139,7 +139,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
|
||||
const [gmaMarkers, setGmaMarkers] = useState([]); //--------------------station.System === 11 alle sind untetschiedlich Nummern
|
||||
const [talasMarkers, setTalasMarkers] = useState([]);
|
||||
const [eciMarkers, setEciMarkers] = useState([]);
|
||||
//const [gsmModemMarkers, setGsmModemMarkers] = useState([]);
|
||||
const [gsmModemMarkers, setGsmModemMarkers] = useState([]);
|
||||
const [ciscoRouterMarkers, setCiscoRouterMarkers] = useState([]);
|
||||
const [wagoMarkers, setWagoMarkers] = useState([]);
|
||||
const [siemensMarkers, setSiemensMarkers] = useState([]);
|
||||
@@ -151,7 +151,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
|
||||
const [smsfunkmodemMarkers, setSmsfunkmodemMarkers] = useState([]);
|
||||
const [ulafMarkers, setUlafMarkers] = useState([]);
|
||||
const [sonstigeMarkers, setSonstigeMarkers] = useState([]);
|
||||
const [lteModemMarkers, setLteModemMarkers] = useState([])
|
||||
//const [lteModemMarkers, setLteModemMarkers] = useState([]);
|
||||
|
||||
const [lineStatusData, setLineStatusData] = useState([]);
|
||||
const [linesData, setLinesData] = useState([]);
|
||||
@@ -256,6 +256,12 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
|
||||
},
|
||||
};
|
||||
|
||||
/*
|
||||
await fetchGisStationsStaticDistrict(mapGisStationsStaticDistrictUrl, setGisStationsStaticDistrict, fetchOptions);
|
||||
await fetchGisStationsStatusDistrict(mapGisStationsStatusDistrictUrl, setGisStationsStatusDistrict, fetchOptions);
|
||||
await fetchGisStationsMeasurements(mapGisStationsMeasurementsUrl, setGisStationsMeasurements, fetchOptions);
|
||||
await fetchGisSystemStatic(mapGisSystemStaticUrl, setGisSystemStatic, setGisSystemStaticLoaded, fetchOptions);
|
||||
*/
|
||||
// Fetch GIS Stations Static District
|
||||
await fetchGisStationsStaticDistrict(mapGisStationsStaticDistrictUrl, setGisStationsStaticDistrict, fetchOptions);
|
||||
requestCount++; // Zähler erhöhen
|
||||
@@ -386,27 +392,12 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
|
||||
//console.log("priorityConfig in MapComponent2: ", priorityConfig);
|
||||
useEffect(() => {
|
||||
if (gisSystemStaticLoaded && map) {
|
||||
/*
|
||||
createAndSetDevices(1, GisSystemStatic, priorityConfig); // TALAS-System
|
||||
createAndSetDevices(2, GisSystemStatic, priorityConfig); // ECI-System
|
||||
createAndSetDevices(5, GisSystemStatic, priorityConfig); // GSM-Modem-System
|
||||
createAndSetDevices(6, GisSystemStatic, priorityConfig); // Cisco-Router-System
|
||||
createAndSetDevices(7, GisSystemStatic, priorityConfig); // WAGO-System
|
||||
createAndSetDevices(8, GisSystemStatic, priorityConfig); // Siemens-System
|
||||
createAndSetDevices(9, GisSystemStatic, priorityConfig); // OTDR-System
|
||||
createAndSetDevices(10, GisSystemStatic, priorityConfig); // WDM-System
|
||||
createAndSetDevices(13, GisSystemStatic, priorityConfig); // Messstellen-System
|
||||
createAndSetDevices(100, GisSystemStatic, priorityConfig); // TALASICL-System
|
||||
createAndSetDevices(110, GisSystemStatic, priorityConfig); // DAUZ-System
|
||||
createAndSetDevices(111, GisSystemStatic, priorityConfig); // SMS-Funkmodem-System
|
||||
createAndSetDevices(200, GisSystemStatic, priorityConfig); // Sonstige-System
|
||||
createAndSetDevices(0, GisSystemStatic, priorityConfig); // ULAF-System
|
||||
*/
|
||||
|
||||
createAndSetDevices(11, setGmaMarkers, GisSystemStatic, priorityConfig); // GMA-System
|
||||
createAndSetDevices(1, setTalasMarkers, GisSystemStatic, priorityConfig); // TALAS-System
|
||||
createAndSetDevices(2, setEciMarkers, GisSystemStatic, priorityConfig); // ECI-System
|
||||
//createAndSetDevices(5, setGsmModemMarkers, GisSystemStatic, priorityConfig); // GSM-Modem-System
|
||||
createAndSetDevices(5, setLteModemMarkers, GisSystemStatic, priorityConfig); //LTE Modem
|
||||
createAndSetDevices(5, setGsmModemMarkers, GisSystemStatic, priorityConfig); // GSM-Modem-System---LTE Modem und GSM Modem sind gleich
|
||||
//createAndSetDevices(5, setLteModemMarkers, GisSystemStatic, priorityConfig); //LTE Modem----------LTE Modem und GSM Modem sind gleich
|
||||
createAndSetDevices(6, setCiscoRouterMarkers, GisSystemStatic, priorityConfig); // Cisco-Router-System
|
||||
createAndSetDevices(7, setWagoMarkers, GisSystemStatic, priorityConfig); // WAGO-System
|
||||
createAndSetDevices(8, setSiemensMarkers, GisSystemStatic, priorityConfig); // Siemens-System
|
||||
@@ -425,9 +416,9 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
|
||||
|
||||
useLayerVisibility(map, talasMarkers, mapLayersVisibility, "TALAS", oms);
|
||||
useLayerVisibility(map, eciMarkers, mapLayersVisibility, "ECI", oms);
|
||||
//useLayerVisibility(map, gsmModemMarkers, mapLayersVisibility, "GSMModem", oms);
|
||||
useLayerVisibility(map, gsmModemMarkers, mapLayersVisibility, "GSMModem", oms);
|
||||
useLayerVisibility(map, ciscoRouterMarkers, mapLayersVisibility, "CiscoRouter", oms);
|
||||
useLayerVisibility(map, lteModemMarkers, mapLayersVisibility, "LTEModem", oms);
|
||||
//useLayerVisibility(map, lteModemMarkers, mapLayersVisibility, "LTEModem", oms);
|
||||
|
||||
useLayerVisibility(map, wagoMarkers, mapLayersVisibility, "WAGO", oms);
|
||||
useLayerVisibility(map, siemensMarkers, mapLayersVisibility, "Siemens", oms);
|
||||
@@ -460,7 +451,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
|
||||
const allMarkers = [
|
||||
...talasMarkers,
|
||||
...eciMarkers,
|
||||
// ...gsmModemMarkers,
|
||||
...gsmModemMarkers,
|
||||
...ciscoRouterMarkers,
|
||||
...wagoMarkers,
|
||||
...siemensMarkers,
|
||||
@@ -473,12 +464,12 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
|
||||
...smsfunkmodemMarkers,
|
||||
...sonstigeMarkers,
|
||||
...ulafMarkers,
|
||||
...lteModemMarkers,
|
||||
//...lteModemMarkers,
|
||||
];
|
||||
|
||||
checkOverlappingMarkers(map, allMarkers, plusRoundIcon);
|
||||
}
|
||||
}, [map, talasMarkers, eciMarkers, ciscoRouterMarkers, wagoMarkers, siemensMarkers, otdrMarkers, wdmMarkers, gmaMarkers, messstellenMarkers, talasiclMarkers, dauzMarkers, smsfunkmodemMarkers, sonstigeMarkers, ulafMarkers, lteModemMarkers]);
|
||||
}, [map, talasMarkers, eciMarkers, ciscoRouterMarkers, wagoMarkers, siemensMarkers, otdrMarkers, wdmMarkers, gmaMarkers, messstellenMarkers, talasiclMarkers, dauzMarkers, smsfunkmodemMarkers, sonstigeMarkers, ulafMarkers]);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
@@ -686,6 +677,91 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
|
||||
}, [map]);
|
||||
//--------------------------------------------
|
||||
|
||||
useEffect(() => {
|
||||
if (!map) return; // Stelle sicher, dass die Karte initialisiert ist
|
||||
|
||||
const updateGmaData = async () => {
|
||||
try {
|
||||
const fetchOptions = {
|
||||
method: "GET",
|
||||
headers: {
|
||||
Connection: "close",
|
||||
},
|
||||
};
|
||||
|
||||
// Aktualisiere die Messdaten
|
||||
await fetchGisStationsMeasurements(mapGisStationsMeasurementsUrl, setGisStationsMeasurements, fetchOptions);
|
||||
await fetchGisStationsStatusDistrict(mapGisStationsStatusDistrictUrl, setGisStationsStatusDistrict, fetchOptions);
|
||||
|
||||
|
||||
|
||||
// Aktualisiere die Marker-Layer
|
||||
useGmaMarkersLayer(map, gmaMarkers, GisStationsMeasurements, layers.MAP_LAYERS.GMA, oms);
|
||||
|
||||
} catch (error) {
|
||||
console.error("Fehler beim Aktualisieren der GMA-Daten:", error);
|
||||
}
|
||||
};
|
||||
|
||||
// Initialer Datenabruf
|
||||
updateGmaData();
|
||||
|
||||
// Setze ein Intervall, um die Daten alle 5 Sekunden zu aktualisieren
|
||||
const intervalId = setInterval(() => {
|
||||
updateGmaData();
|
||||
}, 5000);
|
||||
|
||||
// Cleanup-Funktion, um das Intervall zu entfernen, wenn die Komponente entladen wird
|
||||
return () => clearInterval(intervalId);
|
||||
}, [map, gmaMarkers, layers.MAP_LAYERS.GMA, oms, mapGisStationsMeasurementsUrl,mapGisStationsStatusDistrictUrl]);
|
||||
|
||||
|
||||
//---------------------------------
|
||||
|
||||
const markerLayerRef = useRef(null);
|
||||
useEffect(() => {
|
||||
if (!gisSystemStaticLoaded || !map) return; // Sicherstellen, dass alle Abhängigkeiten geladen sind
|
||||
|
||||
// Initialisiere die LayerGroup, falls noch nicht vorhanden
|
||||
if (!markerLayerRef.current) {
|
||||
markerLayerRef.current = new L.LayerGroup().addTo(map);
|
||||
}
|
||||
|
||||
const updateMarkers = () => {
|
||||
// Alte Marker entfernen
|
||||
markerLayerRef.current.clearLayers();
|
||||
|
||||
// Neue Marker für jedes System erstellen
|
||||
/* createAndSetDevices(11, (markers) => {
|
||||
setGmaMarkers(markers);
|
||||
markers.forEach((marker) => marker.addTo(markerLayerRef.current)); // Marker zur LayerGroup hinzufügen
|
||||
}, GisSystemStatic, priorityConfig);
|
||||
*/
|
||||
createAndSetDevices(11, setGmaMarkers, GisSystemStatic, priorityConfig);
|
||||
// Füge hier weitere `createAndSetDevices`-Aufrufe für andere Systeme ein
|
||||
};
|
||||
|
||||
// Initiales Update der Marker
|
||||
updateMarkers();
|
||||
|
||||
// Setze ein Intervall, um die Marker alle 10 Sekunden zu aktualisieren
|
||||
const intervalId = setInterval(() => {
|
||||
updateMarkers();
|
||||
}, 10000); // 10 Sekunden
|
||||
|
||||
// Aufräumen bei Komponentenentladung
|
||||
return () => {
|
||||
clearInterval(intervalId);
|
||||
if (markerLayerRef.current) {
|
||||
markerLayerRef.current.clearLayers();
|
||||
}
|
||||
};
|
||||
}, [gisSystemStaticLoaded, map, GisSystemStatic, priorityConfig]);
|
||||
|
||||
|
||||
//---------------------------------------
|
||||
|
||||
//-----------------
|
||||
return (
|
||||
<>
|
||||
<ToastContainer />
|
||||
|
||||
Reference in New Issue
Block a user