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

Merge branch 'temp-branch' into Dev

Browse Source
This commit is contained in:
ISA
2024-06-25 13:43:15 +02:00
parent 2f5dad0246 212293d9ea
commit 9dbd77d6b1
3 changed files with 48 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
components/MapComponent.js
View File

@@ -2211,11 +2211,10 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
// Initialisieren eines Zustands für die Speicherung der Polyline-Objekte
const [polylines, setPolylines] = useState([]);
const [markers, setMarkers] = useState([]);
useEffect(() => {
if (!map) return;
// Entfernen alter Marker und Polylines
// Entfernen alter Marker und Polylinien
markers.forEach((marker) => marker.remove());
polylines.forEach((polyline) => polyline.remove());
@@ -2224,7 +2223,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
linePositions.forEach((lineData, lineIndex) => {
const lineMarkers = [];
const polylinePoints = lineData.coordinates.map((coord, index) => {
lineData.coordinates.forEach((coord, index) => {
const marker = L.marker(coord, {
icon: circleIcon,
draggable: true,
@@ -2234,11 +2233,18 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
const newCoords = marker.getLatLng();
const newCoordinates = [...lineData.coordinates];
newCoordinates[index] = [newCoords.lat, newCoords.lng];
// Erstellen einer neuen Polyline nach dem Verschieben
const updatedPolyline = L.polyline(newCoordinates, {
color: lineColors[lineData.idModul] || "#000000",
}).addTo(map);
// Event-Handler für mouseover und mouseout erneut einrichten
// Hinzufügen eines Tooltips
updatedPolyline.bindTooltip("Informationen oder Name der Linie", {
permanent: false, // true, wenn Sie möchten, dass der Tooltip immer sichtbar ist
direction: "auto", // Kann 'right', 'left', 'top' oder 'bottom' sein
});
updatedPolyline.on("mouseover", () => {
updatedPolyline.setStyle({ weight: 8 });
updatedPolyline.bringToFront();
@@ -2247,22 +2253,52 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
updatedPolyline.setStyle({ weight: 5 });
});
// Ersetzen der alten Polyline durch die neue
// Entfernen der alten Polyline
newPolylines[lineIndex].remove();
newPolylines[lineIndex] = updatedPolyline;
lineData.coordinates = newCoordinates;
// Aktualisieren des Polyline-Zustands
setPolylines([...newPolylines]);
// API-Aufruf, um die neuen Koordinaten zu speichern
fetch("/api/talas_v5_DB/gisLines/updateLineCoordinates", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
idModul: lineData.idModul,
newCoordinates,
}),
})
.then((response) => {
if (!response.ok) {
throw new Error(
"Fehler beim Aktualisieren der Koordinaten in der Datenbank"
);
}
return response.json();
})
.then((data) => {
console.log("Koordinaten erfolgreich aktualisiert:", data);
})
.catch((error) => {
console.error(
"Fehler beim Aktualisieren der Koordinaten:",
error
);
});
});
lineMarkers.push(marker);
return marker;
});
// Erstellen der Polyline und Einrichten eines Tooltips
// Erstellen der initialen Polyline und Einrichten eines Tooltips
const polyline = L.polyline(lineData.coordinates, {
color: lineColors[lineData.idModul] || "#000000",
}).addTo(map);
// Hinzufügen eines Tooltips
polyline.bindTooltip("Informationen oder Name der Linie", {
permanent: false, // true, wenn Sie möchten, dass der Tooltip immer sichtbar ist
direction: "auto", // Kann 'right', 'left', 'top' oder 'bottom' sein
@@ -2283,7 +2319,6 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
setMarkers(newMarkers);
setPolylines(newPolylines);
}, [map, linePositions, lineColors]);
//---------------------------------------------------------
//---------------------------------------------------------