Daten von 4 APIs laden und in useState Variable speichern
This commit is contained in:
ISA
@@ -12,19 +12,24 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
|
||||
const [GisStationsStaticDistrict, setGisStationsStaticDistrict] = useState(
|
||||
[]
|
||||
); // Zustand für statische Daten
|
||||
const [dataStatus, setDataStatus] = useState([]); // Zustand für Statusdaten
|
||||
const [dataIcons, setDataIcons] = useState([]); // Zustand für Icons
|
||||
const [dataSystem, setDataSystem] = useState([]); // Zustand für Systemdaten
|
||||
const [GisStationsStatusDistrict, setGisStationsStatusDistrict] = useState(
|
||||
[]
|
||||
); // Zustand für Statusdaten
|
||||
const [GisStationsMeasurements, setGisStationsMeasurements] = useState([]); // Zustand für Messdaten
|
||||
const [GisSystemStatic, setGisSystemStatic] = useState([]); // Zustand für Systemdaten
|
||||
const [DataIcons, setDataIcons] = useState([]); // Zustand für Icon-Daten
|
||||
|
||||
// Konstanten für die URLs
|
||||
const mapGisStationsStaticDistrictUrl =
|
||||
config.mapGisStationsStaticDistrictUrl;
|
||||
const mapDataStatusUrl = config.mapDataStatusUrl;
|
||||
const mapGisStationsStatusDistrictUrl =
|
||||
config.mapGisStationsStatusDistrictUrl;
|
||||
const mapGisStationsMeasurementsUrl = config.mapGisStationsMeasurementsUrl;
|
||||
const mapGisSystemStaticUrl = config.mapGisSystemStaticUrl;
|
||||
const mapDataIconUrl = config.mapDataIconUrl;
|
||||
const mapDataSystemUrl = config.mapDataSystemUrl;
|
||||
|
||||
console.log("GisStationsStaticDistrict 1 :", GisStationsStaticDistrict);
|
||||
console.log("map:", map);
|
||||
console.log("map 1:", map);
|
||||
|
||||
// Funktion zum Aktualisieren der Position in der Datenbank
|
||||
const updateLocationInDatabase = async (id, newLatitude, newLongitude) => {
|
||||
@@ -58,7 +63,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
console.log("Datenabruf gestartet...");
|
||||
const response = await fetch(config.mapGisStationsStaticDistrictUrl);
|
||||
const response = await fetch(mapGisStationsStaticDistrictUrl);
|
||||
const jsonResponse = await response.json();
|
||||
|
||||
// Prüfen, ob die Antwort das erwartete Format hat und Daten enthält
|
||||
@@ -76,7 +81,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
|
||||
setGisStationsStaticDistrict([]);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Fehler beim Laden der Daten: ", error);
|
||||
console.error("Fehler beim Laden der Daten 1: ", error);
|
||||
setGisStationsStaticDistrict([]);
|
||||
}
|
||||
};
|
||||
@@ -126,37 +131,131 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
|
||||
}, [map, GisStationsStaticDistrict]); // Abhängigkeiten hinzufügen, um sicherzustellen, dass Effekt bei Änderungen neu ausgeführt wird
|
||||
|
||||
//------------------------------------------
|
||||
//GisStationsStaticDistrict Daten laden
|
||||
useEffect(() => {
|
||||
// Prüfen der Internetverbindung beim Start
|
||||
console.log("Prüfen der Internetverbindung...");
|
||||
checkInternet();
|
||||
|
||||
// Asynchrones Laden der Kartendaten beim Initialisieren der Komponente
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
console.log("Datenabruf gestartet...");
|
||||
const responses = await Promise.all([
|
||||
fetch(config.mapGisStationsStaticDistrictUrl).then((res) =>
|
||||
res.json()
|
||||
),
|
||||
fetch(config.mapDataStatusUrl).then((res) => res.json()),
|
||||
fetch(config.mapDataIconUrl).then((res) => res.json()),
|
||||
fetch(config.mapDataSystemUrl).then((res) => res.json()),
|
||||
]);
|
||||
console.log("Daten erfolgreich geladen.");
|
||||
setGisStationsStaticDistrict(responses[0].Points);
|
||||
setDataStatus(responses[1].Statis);
|
||||
setDataIcons(responses[2].List);
|
||||
setDataSystem(
|
||||
responses[3].Systems.filter((system) => system.Allow === 1)
|
||||
const response = await fetch(mapGisStationsStaticDistrictUrl);
|
||||
const jsonResponse = await response.json();
|
||||
|
||||
// Prüfen, ob die Antwort das erwartete Format hat und Daten enthält
|
||||
if (jsonResponse && jsonResponse.Points) {
|
||||
console.log(
|
||||
"GisStationsStaticDistrict geladen:",
|
||||
jsonResponse.Points
|
||||
);
|
||||
setGisStationsStaticDistrict(jsonResponse.Points); // Direkter Zugriff auf 'Points'
|
||||
|
||||
// Anzeigen eines spezifischen Details aus dem JSON
|
||||
console.log(
|
||||
"etwas von json zeigen :",
|
||||
jsonResponse.Points[0].LD_Name
|
||||
); // Beispiel für das Anzeigen des LD_Name des ersten Points
|
||||
} else {
|
||||
console.error(
|
||||
'Erwartete Daten im "Points"-Array nicht gefunden',
|
||||
jsonResponse
|
||||
);
|
||||
setGisStationsStaticDistrict([]);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Fehler beim Laden der Daten: ", error);
|
||||
console.error("Fehler beim Laden der Daten 1: ", error);
|
||||
setGisStationsStaticDistrict([]);
|
||||
}
|
||||
};
|
||||
|
||||
fetchData();
|
||||
}, []); // Leeres Abhängigkeitsarray, um nur beim ersten Mount zu laden
|
||||
}, []); // Dependency-Array ist leer, um den Effekt nur beim Mount auszuführen
|
||||
//------------------------------------------
|
||||
//GisStationsStatusDistrict Daten laden
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
console.log("Datenabruf gestartet...");
|
||||
const response = await fetch(mapGisStationsStatusDistrictUrl);
|
||||
const jsonResponse = await response.json();
|
||||
|
||||
// Prüfen, ob die Antwort das erwartete Format hat und Daten enthält
|
||||
if (jsonResponse && jsonResponse.Statis) {
|
||||
console.log(
|
||||
"GisStationsStatusDistrict geladen:",
|
||||
jsonResponse.Statis
|
||||
);
|
||||
setGisStationsStatusDistrict(jsonResponse.Statis); // Direkter Zugriff auf 'Statis'
|
||||
} else {
|
||||
console.error(
|
||||
'Erwartete Daten im "Statis"-Array nicht gefunden',
|
||||
jsonResponse
|
||||
);
|
||||
setGisStationsStatusDistrict([]);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Fehler beim Laden der Daten 2: ", error);
|
||||
setGisStationsStatusDistrict([]);
|
||||
}
|
||||
};
|
||||
|
||||
fetchData();
|
||||
}, []); // Dependency-Array ist leer, um den Effekt nur beim Mount auszuführen
|
||||
//------------------------------------------
|
||||
//GisStationsMeasurements Daten laden
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
console.log("Datenabruf gestartet...");
|
||||
const response = await fetch(mapGisStationsMeasurementsUrl);
|
||||
const jsonResponse = await response.json();
|
||||
|
||||
// Prüfen, ob die Antwort das erwartete Format hat und Daten enthält
|
||||
if (jsonResponse && jsonResponse.Statis) {
|
||||
console.log("GisStationsMeasurements geladen:", jsonResponse.Statis);
|
||||
setGisStationsMeasurements(jsonResponse.Statis); // Direkter Zugriff auf 'Statis'
|
||||
} else {
|
||||
console.error(
|
||||
'Erwartete Daten im "Statis"-Array nicht gefunden',
|
||||
|
||||
jsonResponse
|
||||
);
|
||||
setGisStationsMeasurements([]);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Fehler beim Laden der Daten 3: ", error);
|
||||
setGisStationsMeasurements([]);
|
||||
}
|
||||
};
|
||||
|
||||
fetchData();
|
||||
}, []); // Dependency-Array ist leer, um den Effekt nur beim Mount auszuführen
|
||||
//------------------------------------------
|
||||
//GisSystemStatic Daten laden
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
console.log("Datenabruf gestartet...");
|
||||
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) {
|
||||
console.log("GisSystemStatic geladen:", jsonResponse.Systems);
|
||||
setGisSystemStatic(jsonResponse.Systems); // Direkter Zugriff auf 'Systems'
|
||||
} else {
|
||||
console.error(
|
||||
'Erwartete Daten im "Systems"-Array nicht gefunden',
|
||||
jsonResponse
|
||||
);
|
||||
setGisSystemStatic([]);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Fehler beim Laden der Daten 4: ", error);
|
||||
setGisSystemStatic([]);
|
||||
}
|
||||
};
|
||||
|
||||
fetchData();
|
||||
}, []); // Dependency-Array ist leer, um den Effekt nur beim Mount auszuführen
|
||||
//------------------------------------------
|
||||
|
||||
const offlineTileLayer = "../TileMap/mapTiles/{z}/{x}/{y}.png";
|
||||
const onlineTileLayer = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
|
||||
|
||||
Reference in New Issue
Block a user