Fix: Sicherstellen, dass Marker erst nach dem Laden der GisSystemStatic-Daten erstellt werden
- Hinzufügen einer Statusvariable 'gisSystemStaticLoaded', um den Ladezustand der GisSystemStatic-Daten zu verfolgen. - Aktualisierte useEffect, um 'gisSystemStaticLoaded' auf true zu setzen, sobald die GisSystemStatic-Daten erfolgreich abgerufen wurden. - Die Logik zur Erstellung von Markern wurde geändert, sodass diese nur ausgeführt wird, wenn 'gisSystemStaticLoaded' auf true gesetzt ist. - Diese Änderung stellt sicher, dass 'getIdSystemAndAllowValueMap' korrekt gefüllt ist, bevor es verwendet wird. - Zudem wurde ein Problem behoben, bei dem die Karte und die Marker nach einer Browser-Aktualisierung nicht richtig synchronisiert waren.
This commit is contained in:
ISA
@@ -207,6 +207,8 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
|
||||
}, []); // Dependency-Array ist leer, um den Effekt nur beim Mount auszuführen
|
||||
//------------------------------------------
|
||||
|
||||
const [gisSystemStaticLoaded, setGisSystemStaticLoaded] = useState(false);
|
||||
|
||||
//GisSystemStatic Daten laden
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
@@ -214,10 +216,9 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
|
||||
const response = await fetch(mapGisSystemStaticUrl);
|
||||
const jsonResponse = await response.json();
|
||||
|
||||
// Prüfen, ob die Antwort das erwartete Format hat und Daten enthält
|
||||
if (jsonResponse && jsonResponse.Systems) {
|
||||
setGisSystemStatic(jsonResponse.Systems); // Direkter Zugriff auf 'Systems'
|
||||
// console.log("GisSystemStatic:", jsonResponse.Systems);
|
||||
setGisSystemStatic(jsonResponse.Systems);
|
||||
setGisSystemStaticLoaded(true); // Setze den Zustand auf geladen
|
||||
} else {
|
||||
console.error(
|
||||
'Erwartete Daten im "Systems"-Array nicht gefunden',
|
||||
@@ -232,7 +233,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
|
||||
};
|
||||
|
||||
fetchData();
|
||||
}, []); // Dependency-Array ist leer, um den Effekt nur beim Mount auszuführen
|
||||
}, []);
|
||||
//------------------------------------------
|
||||
|
||||
const offlineTileLayer = "../TileMap/mapTiles/{z}/{x}/{y}.png";
|
||||
@@ -591,7 +592,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
|
||||
setIsPoiTypLoaded(true); // Daten wurden erfolgreich geladen
|
||||
console.log("poiTypMap:", map);
|
||||
const poiTypName = poiTypMap.get(0) || "Unbekannt";
|
||||
console.log("poiTypName:", poiTypName);
|
||||
//console.log("poiTypName:", poiTypName);
|
||||
} catch (error) {
|
||||
console.error("Fehler beim Abrufen der poiTyp-Daten:", error);
|
||||
}
|
||||
@@ -763,25 +764,25 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
|
||||
const response2 = await fetch(config.mapGisStationsStatusDistrictUrl);
|
||||
const statusResponse = await response2.json();
|
||||
|
||||
const getIdSystemAndAllowValueMap = new Map(
|
||||
GisSystemStatic.map((system) => [system.IdSystem, system.Allow])
|
||||
);
|
||||
console.log("getIdSystemAndAllowValueMap:", getIdSystemAndAllowValueMap);
|
||||
|
||||
if (jsonResponse.Points && statusResponse.Statis) {
|
||||
const statisMap = new Map(
|
||||
statusResponse.Statis.map((s) => [s.IdLD, s])
|
||||
);
|
||||
let markersData = jsonResponse.Points.filter(
|
||||
(station) => station.System === systemId
|
||||
(station) =>
|
||||
station.System === systemId &&
|
||||
getIdSystemAndAllowValueMap.get(station.System) === 1
|
||||
).map((station) => {
|
||||
const statis = statisMap.get(station.IdLD);
|
||||
const iconPath = statis
|
||||
? `img/icons/${statis.Na}-marker-icon-${station.Icon}.png`
|
||||
: `img/icons/marker-icon-${station.Icon}.png`;
|
||||
|
||||
const priority = determinePriority(iconPath);
|
||||
const zIndexOffset = 100 * (5 - priority); // Adjusted for simplicity and positive values
|
||||
|
||||
/* console.log(
|
||||
`Icon Path: ${iconPath}, Priority: ${priority}, zIndexOffset: ${zIndexOffset}`
|
||||
); */
|
||||
|
||||
const marker = L.marker([station.X, station.Y], {
|
||||
icon: L.icon({
|
||||
iconUrl: iconPath,
|
||||
@@ -789,37 +790,17 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
|
||||
iconAnchor: [12, 41],
|
||||
popupAnchor: [1, -34],
|
||||
}),
|
||||
areaName: station.Area_Name, // Stelle sicher, dass dieser Bereich gesetzt wird
|
||||
areaName: station.Area_Name,
|
||||
link: station.Link,
|
||||
zIndexOffset: zIndexOffset,
|
||||
bounceOnAdd: !!statis,
|
||||
});
|
||||
|
||||
if (statis) {
|
||||
marker.on("add", () => marker.bounce(3));
|
||||
}
|
||||
|
||||
const statusInfo = statusResponse.Statis.filter(
|
||||
(status) => status.IdLD === station.IdLD
|
||||
)
|
||||
.reverse()
|
||||
.map(
|
||||
(status) => `
|
||||
<div class="flex items-center my-1">
|
||||
<div class="w-2 h-2 mr-2 inline-block rounded-full" style="background-color: ${status.Co};"></div>
|
||||
${status.Me} <span style="color: ${status.Co};">(${status.Na})</span>
|
||||
</div>
|
||||
`
|
||||
)
|
||||
.join("");
|
||||
|
||||
marker.bindPopup(`
|
||||
<div class=" bg-white rounded-lg ">
|
||||
<div class="bg-white rounded-lg">
|
||||
<h3 class="text-lg font-semibold text-gray-900">${station.LD_Name}</h3>
|
||||
<p class="text-gray-800"><strong>Gerät:</strong> ${station.Device}</p>
|
||||
<p class="text-gray-800"><strong>Zone:</strong> ${station.Area_Short} (${station.Area_Name})</p>
|
||||
<p class="text-gray-800"><strong>Standort:</strong> ${station.Location_Short} (${station.Location_Name})</p>
|
||||
<div class="mt-2">${statusInfo}</div>
|
||||
</div>
|
||||
`);
|
||||
return marker;
|
||||
@@ -831,24 +812,26 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
|
||||
console.error("Error fetching data: ", error);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (!map) return;
|
||||
createAndSetMarkers(1, setTalasMarkers); // TALAS-System
|
||||
createAndSetMarkers(2, setEciMarkers); // ECI-System
|
||||
createAndSetMarkers(5, setGsmModemMarkers); // GSM-Modem-System
|
||||
createAndSetMarkers(6, setCiscoRouterMarkers); // Cisco-Router-System
|
||||
createAndSetMarkers(7, setWagoMarkers); // WAGO-System
|
||||
createAndSetMarkers(8, setSiemensMarkers); // Siemens-System
|
||||
createAndSetMarkers(9, setOtdrMarkers); // OTDR-System
|
||||
createAndSetMarkers(10, setWdmMarkers); // WDM-System
|
||||
createAndSetMarkers(11, setGmaMarkers); // GMA-System
|
||||
createAndSetMarkers(13, setMessstellenMarkers); // Messstellen-System
|
||||
createAndSetMarkers(100, setTalasiclMarkers); // TALASICL-System
|
||||
createAndSetMarkers(110, setDauzMarkers); // DAUZ-System
|
||||
createAndSetMarkers(111, setSmsfunkmodemMarkers); // SMS-Funkmodem-System
|
||||
createAndSetMarkers(200, setSonstigeMarkers); // Sonstige-System
|
||||
createAndSetMarkers(0, setUlafMarkers); // ULAF-System
|
||||
}, [map]);
|
||||
if (gisSystemStaticLoaded && map) {
|
||||
createAndSetMarkers(1, setTalasMarkers); // TALAS-System
|
||||
createAndSetMarkers(2, setEciMarkers); // ECI-System
|
||||
createAndSetMarkers(5, setGsmModemMarkers); // GSM-Modem-System
|
||||
createAndSetMarkers(6, setCiscoRouterMarkers); // Cisco-Router-System
|
||||
createAndSetMarkers(7, setWagoMarkers); // WAGO-System
|
||||
createAndSetMarkers(8, setSiemensMarkers); // Siemens-System
|
||||
createAndSetMarkers(9, setOtdrMarkers); // OTDR-System
|
||||
createAndSetMarkers(10, setWdmMarkers); // WDM-System
|
||||
createAndSetMarkers(11, setGmaMarkers); // GMA-System
|
||||
createAndSetMarkers(13, setMessstellenMarkers); // Messstellen-System
|
||||
createAndSetMarkers(100, setTalasiclMarkers); // TALASICL-System
|
||||
createAndSetMarkers(110, setDauzMarkers); // DAUZ-System
|
||||
createAndSetMarkers(111, setSmsfunkmodemMarkers); // SMS-Funkmodem-System
|
||||
createAndSetMarkers(200, setSonstigeMarkers); // Sonstige-System
|
||||
createAndSetMarkers(0, setUlafMarkers); // ULAF-System
|
||||
}
|
||||
}, [gisSystemStaticLoaded, map]);
|
||||
//--------------------------------------------------------------------------------
|
||||
useEffect(() => {
|
||||
if (map && talasMarkers.length) {
|
||||
|
||||
Reference in New Issue
Block a user