Ismail/nodeMap
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Um sicherzustellen, dass Sie die aktualisierten Werte von poiTypData sehen können, sobald sie gesetzt sind, können Sie eine separate useEffect verwenden, die auf Änderungen von poiTypData reagiert. Dies ermöglicht es Ihnen, immer die neuesten Werte in der Konsole zu sehen, unabhängig davon, wann die Daten abgerufen und gesetzt werden

Browse Source
This commit is contained in:
ISA
2024-05-02 07:16:36 +02:00
parent bd6ae82540
commit c4e70564ec
1 changed files with 32 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
components/MapComponent.js
View File

@@ -15,7 +15,7 @@ import { gisSystemStaticState } from "../store/gisSystemState";
import { mapLayersState } from "../store/mapLayersState"; import { mapLayersState } from "../store/mapLayersState";
import { selectedAreaState } from "../store/selectedAreaState"; import { selectedAreaState } from "../store/selectedAreaState";
import { zoomTriggerState } from "../store/zoomTriggerState"; import { zoomTriggerState } from "../store/zoomTriggerState";
import { poiTypState } from '../store/poiTypState'; import { poiTypState } from "../store/poiTypState";
const MapComponent = ({ locations, onLocationUpdate }) => { const MapComponent = ({ locations, onLocationUpdate }) => {
const poiLayerRef = useRef(null); // Referenz auf die Layer-Gruppe für Datenbank-Marker const poiLayerRef = useRef(null); // Referenz auf die Layer-Gruppe für Datenbank-Marker
@@ -199,8 +199,8 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
//------------------------------------------ //------------------------------------------
const offlineTileLayer = "../TileMap/mapTiles/{z}/{x}/{y}.png"; const offlineTileLayer = "../TileMap/mapTiles/{z}/{x}/{y}.png";
//const onlineTileLayer = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"; const onlineTileLayer = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
const onlineTileLayer = "mapTiles/{z}/{x}/{y}.png"; //const onlineTileLayer = "mapTiles/{z}/{x}/{y}.png";
// Create map layers // Create map layers
const TALAS = new L.layerGroup(); const TALAS = new L.layerGroup();
const ECI = new L.layerGroup(); const ECI = new L.layerGroup();
@@ -288,15 +288,14 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
setMap(initMap); setMap(initMap);
setOms(oms); setOms(oms);
initMap.on('zoomend', function() { initMap.on("zoomend", function () {
// Überprüfen, ob der aktuelle Zoom außerhalb der Grenzen liegt // Überprüfen, ob der aktuelle Zoom außerhalb der Grenzen liegt
if (initMap.getZoom() > 15) { if (initMap.getZoom() > 15) {
initMap.setZoom(15); initMap.setZoom(15);
} else if (initMap.getZoom() < 5) { } else if (initMap.getZoom() < 5) {
initMap.setZoom(5); initMap.setZoom(5);
} }
}); });
// Nach der Initialisierung der Map und Setzen im State kannst du Funktionen aufrufen, die `map` benötigen. // Nach der Initialisierung der Map und Setzen im State kannst du Funktionen aufrufen, die `map` benötigen.
initMap.whenReady(() => { initMap.whenReady(() => {
@@ -519,7 +518,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
function fly(stationValue) { function fly(stationValue) {
var x = 51.41321407879154; var x = 51.41321407879154;
var y = 7.739617925303934; var y = 7.739617925303934;
var zoom = 7 var zoom = 7;
initMap.flyTo([x, y], zoom); initMap.flyTo([x, y], zoom);
} }
@@ -1509,24 +1508,27 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
} }
}, [map, zoomTrigger]); }, [map, zoomTrigger]);
//------------------------------------------ //------------------------------------------
// Funktion zum Abrufen der poiTyp Daten // Funktion zum Abrufen der poiTyp Daten
const [poiTypData, setPoiTypData] = useRecoilState(poiTypState); // Recoil State verwenden const [poiTypData, setPoiTypData] = useRecoilState(poiTypState); // Recoil State verwenden
useEffect(() => { useEffect(() => {
const fetchPoiTypData = async () => { const fetchPoiTypData = async () => {
try { try {
const response = await fetch('/api/poiTyp'); const response = await fetch("/api/poiTyp");
const data = await response.json(); const data = await response.json();
setPoiTypData(data); // Daten im Recoil State speichern setPoiTypData(data); // Daten im Recoil State speichern
console.log('Fetched poiTyp Data:', data); // Daten in der Konsole anzeigen } catch (error) {
} catch (error) { console.error("Fehler beim Abrufen der poiTyp Daten:", error);
console.error('Fehler beim Abrufen der poiTyp Daten:', error); }
} };
};
fetchPoiTypData();
fetchPoiTypData(); }, []);
}, []);
// Effekt zum Loggen der poiTypData, wenn sie sich ändern
useEffect(() => {
console.log("poiTypData aktualisiert:", poiTypData);
}, [poiTypData]);
//---------------------------------------------------- //----------------------------------------------------