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

feat: entfernen von Platzhalter-Icon und stattdessen CircleIcon hinzufügen in MapComponents bei insertNewMarker

Browse Source
This commit is contained in:
ISA
2024-07-08 10:20:03 +02:00
parent 045ad26565
commit be1b1df0b5
2 changed files with 261 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
components/MapComponent.js
View File

@@ -2277,6 +2277,10 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
console.log("lineData:", linesData);
}, [lineStatusData, linesData]);
//---------------------------------------------------------
const [newPoint, setNewPoint] = useState(null);
const [newCoords, setNewCoords] = useState(null);
const [tempMarker, setTempMarker] = useState(null);
useEffect(() => {
if (!map) return;
@@ -2307,6 +2311,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
marker.on("dragend", () => {
const newCoords = marker.getLatLng();
setNewCoords(newCoords); // Aktualisieren Sie den Zustand
const newCoordinates = [...lineData.coordinates];
newCoordinates[index] = [newCoords.lat, newCoords.lng];
@@ -2403,12 +2408,18 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
{
text: "Marker hier hinzufügen",
callback: (e) => {
if (tempMarker) {
tempMarker.remove(); // Entfernen des Platzhalter-Icons
}
//------------
const newPoint = e.latlng;
setNewPoint(newPoint); // Aktualisieren Sie den Zustand
const closestPoints = findClosestPoints(
lineData.coordinates,
newPoint
);
insertNewMarker(closestPoints, newPoint, lineData, map);
redrawPolyline(lineData);
},
},
],
@@ -2438,7 +2449,15 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
setMarkers(newMarkers);
setPolylines(newPolylines);
}, [map, linePositions, lineColors, tooltipContents]);
}, [
map,
linePositions,
lineColors,
tooltipContents,
newPoint,
newCoords,
tempMarker,
]);
//---------------------------------------------------------
//-------------------------Funktionen--------------------------------
@@ -2522,7 +2541,10 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
}
function insertNewMarker(closestPoints, newPoint, lineData, map) {
const newMarker = L.marker(newPoint, { draggable: true }).addTo(map);
const newMarker = L.marker(newPoint, {
icon: circleIcon,
draggable: true,
}).addTo(map);
lineData.coordinates.splice(closestPoints[2], 0, [
newPoint.lat,
newPoint.lng,

237
components/MapCoomonentGPT.js Normal file
View File

@@ -0,0 +1,237 @@
const [newPoint, setNewPoint] = useState(null);
const [newCoords, setNewCoords] = useState(null);
const [tempMarker, setTempMarker] = useState(null); // Hinzufügen eines Zustands für den temporären Marker
useEffect(() => {
if (!map) return;
// Entfernen alter Marker und Polylines
markers.forEach((marker) => marker.remove());
polylines.forEach((polyline) => polyline.remove());
const newMarkers = [];
const newPolylines = [];
linePositions.forEach((lineData, lineIndex) => {
const lineMarkers = [];
lineData.coordinates.forEach((coord, index) => {
let icon = circleIcon; // Standard-Icon für mittlere Punkte
if (index === 0) {
icon = startIcon; // Start-Icon für den ersten Punkt
} else if (index === lineData.coordinates.length - 1) {
icon = endIcon; // End-Icon für den letzten Punkt
}
const marker = L.marker(coord, {
icon: icon,
draggable: true,
contextmenu: true,
contextmenuInheritItems: false,
contextmenuItems: [], // Starte mit einem leeren Menü
}).addTo(map);
marker.on("dragend", () => {
const newCoords = marker.getLatLng();
setNewCoords(newCoords); // Aktualisieren Sie den Zustand
const newCoordinates = [...lineData.coordinates];
newCoordinates[index] = [newCoords.lat, newCoords.lng];
const updatedPolyline = L.polyline(newCoordinates, {
color: lineColors[lineData.idModul] || "#000000",
}).addTo(map);
updatedPolyline.bindTooltip(
tooltipContents[lineData.idModul] || "Standard-Tooltip-Inhalt",
{
permanent: false,
direction: "auto",
}
);
updatedPolyline.on("mouseover", () => {
updatedPolyline.setStyle({ weight: 10 });
updatedPolyline.bringToFront();
});
updatedPolyline.on("mouseout", () => {
updatedPolyline.setStyle({ weight: 5 });
});
newPolylines[lineIndex].remove();
newPolylines[lineIndex] = updatedPolyline;
lineData.coordinates = newCoordinates;
const requestData = {
idModul: lineData.idModul,
idLD: lineData.idLD,
newCoordinates,
};
console.log("Sending to API:", requestData);
// 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(requestData),
})
.then((response) => {
if (!response.ok) {
return response.json().then((data) => {
throw new Error(data.error || "Unbekannter Fehler");
});
}
return response.json();
})
.then((data) => {
console.log("Koordinaten erfolgreich aktualisiert:", data);
})
.catch((error) => {
console.error(
"Fehler beim Aktualisieren der Koordinaten:",
error.message
);
});
});
// Füge die Option zum Entfernen nur hinzu, wenn der Benutzer mit der Maus über dem Marker ist
marker.on("mouseover", function () {
this.bindContextMenu({
contextmenuItems: [
{
text: "Marker entfernen",
callback: () => {
const newCoords = marker.getLatLng();
const newCoordinates = [...lineData.coordinates];
newCoordinates[index] = [newCoords.lat, newCoords.lng];
removeMarker(marker, lineData);
newPolylines[lineIndex].remove();
lineData.coordinates = newCoordinates;
},
},
],
});
});
// Entferne die Option, wenn der Benutzer den Mausbereich des Markers verlässt
marker.on("mouseout", function () {
this.unbindContextMenu();
});
lineMarkers.push(marker);
});
const polyline = L.polyline(lineData.coordinates, {
color: lineColors[lineData.idModul] || "#000000",
contextmenu: true,
contextmenuItems: [
{
text: "Marker hier hinzufügen",
callback: (e) => {
if (tempMarker) {
tempMarker.remove(); // Entfernen des Platzhalter-Icons
}
const newPoint = e.latlng;
setNewPoint(newPoint); // Aktualisieren Sie den Zustand
const closestPoints = findClosestPoints(
lineData.coordinates,
newPoint
);
insertNewMarker(closestPoints, newPoint, lineData, map);
redrawPolyline(lineData);
},
},
],
}).addTo(map);
polyline.on("mouseover", (e) => {
// Optional: Visualisiere, dass die Linie interaktiv ist
polyline.setStyle({ color: "blue", weight: 10 });
});
polyline.on("mouseout", (e) => {
// Setze die ursprüngliche Farbe zurück
polyline.setStyle({ color: lineColors[lineData.idModul] || "#000000" });
});
polyline.bindTooltip(
tooltipContents[lineData.idModul] || "Standard-Tooltip-Inhalt",
{
permanent: false,
direction: "auto",
}
);
newPolylines.push(polyline);
newMarkers.push(...lineMarkers);
});
setMarkers(newMarkers);
setPolylines(newPolylines);
}, [
map,
linePositions,
lineColors,
tooltipContents,
newPoint,
newCoords,
tempMarker,
]);
function insertNewMarker(closestPoints, newPoint, lineData, map) {
const newMarker = L.marker(newPoint, {
icon: circleIcon,
draggable: true,
}).addTo(map);
lineData.coordinates.splice(closestPoints[2], 0, [
newPoint.lat,
newPoint.lng,
]);
newMarker.on("dragend", () => {
const newCoords = newMarker.getLatLng();
setNewCoords(newCoords);
const newCoordinates = [...lineData.coordinates];
newCoordinates[closestPoints[2]] = [newCoords.lat, newCoords.lng];
lineData.coordinates = newCoordinates;
redrawPolyline(lineData);
});
setNewCoords(null); // Setzen Sie newCoords auf null, um den Platzhalter-Icon zu entfernen
setTempMarker(null); // Entfernen Sie den temporären Marker
}
function removeMarker(marker, lineData) {
const index = lineData.coordinates.findIndex((coord) =>
L.latLng(coord[0], coord[1]).equals(marker.getLatLng())
);
if (index !== -1) {
lineData.coordinates.splice(index, 1); // Entferne die Koordinaten des Markers
redrawPolyline(lineData); // Neuzeichnen der Polylinie
marker.remove(); // Entferne den Marker von der Karte
}
}
function redrawPolyline(lineData) {
if (lineData.polyline) map.removeLayer(lineData.polyline);
lineData.polyline = L.polyline(lineData.coordinates, {
color: lineColors[lineData.idModul] || "#000000",
}).addTo(map);
lineData.polyline.bindTooltip(
tooltipContents[lineData.idModul] || "Standard-Tooltip-Inhalt",
{
permanent: false,
direction: "auto",
}
);
lineData.polyline.on("mouseover", () => {
lineData.polyline.setStyle({ weight: 10 });
lineData.polyline.bringToFront();
});
lineData.polyline.on("mouseout", () => {
lineData.polyline.setStyle({ weight: 5 });
});
}