From 4f85b23ac4b7a8461f999e63fc998d773d69b510 Mon Sep 17 00:00:00 2001 From: ISA Date: Thu, 25 Apr 2024 11:47:25 +0200 Subject: [PATCH] DBLayer als layerGroup implementiert, fehlt noch die Marker das Popup Information, es soll oben idPoiTyp und unten das description sein --- components/MapComponent.js | 131 ++++++++++++++++++++++++++++++++++--- 1 file changed, 122 insertions(+), 9 deletions(-) diff --git a/components/MapComponent.js b/components/MapComponent.js index 618e8daae..cfefdcf9f 100644 --- a/components/MapComponent.js +++ b/components/MapComponent.js @@ -15,6 +15,7 @@ import { gisSystemStaticState } from "../store/gisSystemState"; import { mapLayersState } from "../store/mapLayersState"; const MapComponent = ({ locations, onLocationUpdate }) => { + const dbLayerRef = useRef(null); // Referenz auf die Layer-Gruppe für Datenbank-Marker const mapRef = useRef(null); // Referenz auf das DIV-Element der Karte const [map, setMap] = useState(null); // Zustand der Karteninstanz const [oms, setOms] = useState(null); // State für OMS-Instanz @@ -508,7 +509,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => { } //useEffect zusammen von MySQL Daten bank und von APIs - useEffect(() => { + /* useEffect(() => { const fetchData = async () => { try { const responses = await Promise.all([ @@ -540,16 +541,30 @@ const MapComponent = ({ locations, onLocationUpdate }) => { }; fetchData(); - }, []); - // Marker hinzufügen von lokale MySQL Datenbank und nicht von APIs + }, []); */ + //------------------------------------------ + let dbLayer = null; useEffect(() => { + if (map) { + // Schicht für Datenbank-Marker, sicherstellen, dass map nicht null ist + dbLayer = new L.LayerGroup().addTo(map); + + // Fügen Sie Ihre Marker hier innerhalb dieser useEffect hinzu, da map nicht null ist + + return () => { + // Bereinigung, entfernt dbLayer, wenn die Komponente unmountet + dbLayer.remove(); + }; + } + }, [map]); + //-------------------- // Diese useEffect wird nur beim ersten Rendering oder wenn sich `map` ändert, ausgeführt + // Marker hinzufügen von lokale MySQL Datenbank und nicht von APIs + /* useEffect(() => { // Remove old markers if (map) { - /* map.eachLayer((layer) => { - if (layer instanceof L.Marker) { - map.removeLayer(layer); - } - }); */ + // Entfernen der alten DBLayer und Erstellung einer neuen + map.removeLayer(dbLayer); + dbLayer = new L.LayerGroup().addTo(map); // Add new markers locations.forEach((location) => { const { latitude, longitude } = parsePoint(location.position); @@ -579,13 +594,111 @@ const MapComponent = ({ locations, onLocationUpdate }) => { onLocationUpdate(markerId, newLat, newLng); }); }); - marker.addTo(map); + marker.addTo(dbLayer); }); } }, [map, locations, onLocationUpdate]); + */ + //------------------------------------------ + // Marker hinzufügen von lokale MySQL Datenbank und nicht von APIs + /* useEffect(() => { + // Remove old markers + if (map) { + map.eachLayer((layer) => { + if (layer instanceof L.Marker) { + map.removeLayer(layer); + } + }); + + // Add new markers + locations.forEach((location) => { + const { latitude, longitude } = parsePoint(location.position); + const marker = L.marker([latitude, longitude], { + icon: L.icon({ + iconUrl: "/location.svg", + iconSize: [34, 34], + iconAnchor: [17, 34], + popupAnchor: [0, -34], + }), + draggable: true, + id: location.idPoi, + }); + + marker.bindPopup( + `${location.description || "Unbekannt"}
Type: ${location.idPoiTyp || "N/A"}
Lat: ${latitude.toFixed(5)}, Lng: ${longitude.toFixed(5)}` + ); + marker.bindTooltip( + `
${location.description}
`, + { permanent: false, direction: "top" } + ); + + marker.on("dragend", function (e) { + const newLat = e.target.getLatLng().lat; + const newLng = e.target.getLatLng().lng; + const markerId = e.target.options.id; + updateLocationInDatabase(markerId, newLat, newLng).then(() => { + onLocationUpdate(markerId, newLat, newLng); + }); + }); + + marker.addTo(map); + }); + } + }, [map, locations, onLocationUpdate]); */ //------------------------------------------ + useEffect(() => { + // Initialisierung der dbLayer, wenn die Karte verfügbar ist + if (map && !dbLayerRef.current) { + dbLayerRef.current = new L.LayerGroup().addTo(map); + } + return () => { + if (map && dbLayerRef.current) { + // Entfernen der dbLayer bei Unmount + map.removeLayer(dbLayerRef.current); + dbLayerRef.current = null; + } + }; + }, [map]); // Dieser Effekt läuft nur, wenn sich `map` ändert + + useEffect(() => { + if (map && dbLayerRef.current) { + // Sicherstellen, dass die alte dbLayer entfernt wird + map.removeLayer(dbLayerRef.current); + dbLayerRef.current = new L.LayerGroup().addTo(map); + + locations.forEach((location) => { + const { latitude, longitude } = parsePoint(location.position); + const marker = L.marker([latitude, longitude], { + icon: L.icon({ + iconUrl: "/location.svg", + iconSize: [34, 34], + iconAnchor: [17, 34], + popupAnchor: [0, -34], + }), + draggable: true, + id: location.idPoi, + }); + + marker.on("dragend", function (e) { + const newLat = e.target.getLatLng().lat; + const newLng = e.target.getLatLng().lng; + const markerId = e.target.options.id; + updateLocationInDatabase(markerId, newLat, newLng).then(() => { + onLocationUpdate(markerId, newLat, newLng); + }); + }); + + marker.addTo(dbLayerRef.current); + }); + } + }, [map, locations, onLocationUpdate]); // Dieser Effekt läuft, wenn `map`, `locations` oder `onLocationUpdate` sich ändern + + function parsePoint(position) { + const [longitude, latitude] = position.slice(6, -1).split(" "); + return { latitude: parseFloat(latitude), longitude: parseFloat(longitude) }; + } //----------------------------------------------------------------- // TALAS Marker hinzufügen //-----------------------------------------------------------------