edit: Linien und Markers dazwischen aktualisieren beim Position verändern
This commit is contained in:
ISA
@@ -2099,80 +2099,8 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
|
||||
]);
|
||||
//---------------------------------------------------------
|
||||
//LINESTRING (53.151257 8.190471,53.161601 8.129359,53.19802 8.092366,53.244065 8.014003,53.252539 7.954265)
|
||||
const [lineColors, setLineColors] = useState({});
|
||||
|
||||
// API-Aufruf, um Farben der Linien abzurufen
|
||||
/* useEffect(() => {
|
||||
const fetchLinesColor = async () => {
|
||||
try {
|
||||
const response = await fetch(webserviceGisLinesStatusUrl); //in config.js definiert
|
||||
const data = await response.json();
|
||||
//console.log("data.Statis: ", data);
|
||||
const colorsByModule = {};
|
||||
data.Statis.forEach((item) => {
|
||||
colorsByModule[item.Modul] = item.PrioColor;
|
||||
console.log(
|
||||
"item.Modul",
|
||||
item.Modul,
|
||||
"item.PrioColor",
|
||||
item.PrioColor,
|
||||
"item.IdLD",
|
||||
item.IdLD
|
||||
);
|
||||
});
|
||||
setLineColors(colorsByModule);
|
||||
console.log("colorsByModule", colorsByModule);
|
||||
} catch (error) {
|
||||
console.error("Fehler beim Abrufen der linesColorApi Daten:", error);
|
||||
}
|
||||
};
|
||||
fetchLinesColor();
|
||||
}, []); */
|
||||
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
const response1 = await fetch(webserviceGisLinesStatusUrl);
|
||||
const data1 = await response1.json();
|
||||
const response2 = await fetch("/api/talas_v5_DB/gisLines/readGisLines");
|
||||
const data2 = await response2.json();
|
||||
|
||||
const colorsByModule = {};
|
||||
data1.Statis.forEach((stat) => {
|
||||
const matchingLine = data2.find(
|
||||
(item) => item.idLD === stat.IdLD && item.idModul === stat.Modul
|
||||
);
|
||||
if (matchingLine) {
|
||||
colorsByModule[matchingLine.idModul] = stat.PrioColor;
|
||||
console.log("Übereinstimmung gefunden für", stat);
|
||||
console.log(
|
||||
"stat color",
|
||||
stat.PrioColor,
|
||||
"matchingLine",
|
||||
matchingLine.idModul
|
||||
);
|
||||
setLineColors(colorsByModule);
|
||||
console.log("colorsByModule: ", colorsByModule);
|
||||
console.log("lineColors: ", lineColors);
|
||||
} else {
|
||||
//console.log("Keine Übereinstimmung gefunden für", stat);
|
||||
}
|
||||
});
|
||||
} catch (error) {
|
||||
console.error("Error fetching data:", error);
|
||||
}
|
||||
};
|
||||
|
||||
fetchData();
|
||||
}, []);
|
||||
|
||||
// Überwachen des lineColors Zustandes
|
||||
useEffect(() => {
|
||||
//console.log("Aktualisierte lineColors", lineColors);
|
||||
}, [lineColors]);
|
||||
|
||||
const [linePositions, setLinePositions] = useState([]);
|
||||
|
||||
// ------------Linien zeichnen----------------
|
||||
useEffect(() => {
|
||||
const endpoint = "/api/talas_v5_DB/gisLines/readGisLines";
|
||||
fetch(endpoint)
|
||||
@@ -2199,6 +2127,52 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
|
||||
console.error("Error fetching data:", error.message);
|
||||
});
|
||||
}, []);
|
||||
//--------------------------- Linien färben ------------------------------
|
||||
const [lineColors, setLineColors] = useState({});
|
||||
|
||||
// API-Aufruf, um Farben der Linien abzurufen
|
||||
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
const response1 = await fetch(webserviceGisLinesStatusUrl);
|
||||
const data1 = await response1.json();
|
||||
const response2 = await fetch("/api/talas_v5_DB/gisLines/readGisLines");
|
||||
const data2 = await response2.json();
|
||||
|
||||
const colorsByModule = {};
|
||||
data1.Statis.forEach((stat) => {
|
||||
const matchingLine = data2.find(
|
||||
(item) => item.idLD === stat.IdLD && item.idModul === stat.Modul
|
||||
);
|
||||
if (matchingLine) {
|
||||
colorsByModule[matchingLine.idModul] = stat.PrioColor;
|
||||
//console.log("Übereinstimmung gefunden für", stat);
|
||||
/* console.log(
|
||||
"stat color",
|
||||
stat.PrioColor,
|
||||
"matchingLine",
|
||||
matchingLine.idModul
|
||||
); */
|
||||
setLineColors(colorsByModule);
|
||||
//console.log("colorsByModule: ", colorsByModule);
|
||||
//console.log("lineColors: ", lineColors);
|
||||
} else {
|
||||
//console.log("Keine Übereinstimmung gefunden für", stat);
|
||||
}
|
||||
});
|
||||
} catch (error) {
|
||||
console.error("Error fetching data:", error);
|
||||
}
|
||||
};
|
||||
|
||||
fetchData();
|
||||
}, []);
|
||||
|
||||
// Überwachen des lineColors Zustandes
|
||||
useEffect(() => {
|
||||
//console.log("Aktualisierte lineColors", lineColors);
|
||||
}, [lineColors]);
|
||||
|
||||
//---------------------------------------------------------
|
||||
// Custom circle icon for draggable markers
|
||||
@@ -2208,77 +2182,61 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
|
||||
iconSize: [25, 25],
|
||||
iconAnchor: [5, 5],
|
||||
});
|
||||
//---------------------------------------------------------
|
||||
//----------------------- Update lines----------------------------------
|
||||
// Function to initialize markers and polylines
|
||||
// Initialisieren eines Zustands für die Speicherung der Polyline-Objekte
|
||||
const [polylines, setPolylines] = useState([]);
|
||||
const [markers, setMarkers] = useState([]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!map) return;
|
||||
|
||||
linePositions.forEach((lineData) => {
|
||||
const markers = [];
|
||||
const color = lineColors[lineData.idModul] || "#000000"; // Default black if no color found
|
||||
// Entfernen alter Marker und Polylines
|
||||
markers.forEach((marker) => marker.remove());
|
||||
polylines.forEach((polyline) => polyline.remove());
|
||||
|
||||
// Create a marker for each coordinate
|
||||
const polylinePoints = lineData.coordinates.map((coord) => {
|
||||
const newMarkers = [];
|
||||
const newPolylines = [];
|
||||
|
||||
linePositions.forEach((lineData, lineIndex) => {
|
||||
const lineMarkers = [];
|
||||
const polylinePoints = lineData.coordinates.map((coord, index) => {
|
||||
const marker = L.marker(coord, {
|
||||
icon: circleIcon,
|
||||
draggable: true,
|
||||
}).addTo(map);
|
||||
markers.push(marker);
|
||||
|
||||
marker.on("dragend", () => {
|
||||
const newCoords = marker.getLatLng();
|
||||
const newCoordinates = [...lineData.coordinates];
|
||||
newCoordinates[index] = [newCoords.lat, newCoords.lng];
|
||||
const updatedPolyline = L.polyline(newCoordinates, {
|
||||
color: lineColors[lineData.idModul] || "#000000",
|
||||
}).addTo(map);
|
||||
|
||||
// Ersetzen der alten Polyline durch die neue
|
||||
newPolylines[lineIndex].remove();
|
||||
newPolylines[lineIndex] = updatedPolyline;
|
||||
lineData.coordinates = newCoordinates; // Aktualisieren der Koordinaten im Zustand
|
||||
|
||||
// Optional: Koordinaten auf dem Server aktualisieren
|
||||
// ...
|
||||
});
|
||||
|
||||
lineMarkers.push(marker);
|
||||
return marker;
|
||||
});
|
||||
|
||||
// Draw polyline
|
||||
const polyline = L.polyline(lineData.coordinates, { color }).addTo(map);
|
||||
|
||||
// Add mouseover and mouseout events to change the polyline width
|
||||
polyline.on("mouseover", () => {
|
||||
polyline.setStyle({ weight: 8 }); // Increase width on hover
|
||||
polyline.bringToFront(); // Bring polyline to the front on hover
|
||||
});
|
||||
|
||||
polyline.on("mouseout", () => {
|
||||
polyline.setStyle({ weight: 5 }); // Reset width when not hovered (default width can be adjusted)
|
||||
});
|
||||
//---------------------------
|
||||
// Function to update the polyline when markers are dragged
|
||||
markers.forEach((marker, index) => {
|
||||
marker.on("dragend", () => {
|
||||
const newCoords = marker.getLatLng();
|
||||
lineData.coordinates[index] = [newCoords.lat, newCoords.lng];
|
||||
polyline.setLatLngs(lineData.coordinates);
|
||||
|
||||
// Senden der aktualisierten Koordinaten an den Server
|
||||
fetch("/api/talas_v5_DB/gisLines/updateGisLines", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
idModul: lineData.idModul,
|
||||
newCoordinates: lineData.coordinates,
|
||||
}),
|
||||
})
|
||||
.then((response) => {
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
return response.json();
|
||||
})
|
||||
.then((data) => {
|
||||
console.log("Update erfolgreich:", data);
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("Error updating data:", error.message);
|
||||
});
|
||||
});
|
||||
});
|
||||
//---------------------------
|
||||
|
||||
// Fit map to show all markers and polylines
|
||||
const group = new L.featureGroup([...markers, polyline]);
|
||||
// map.fitBounds(group.getBounds().pad(0.5));
|
||||
const polyline = L.polyline(lineData.coordinates, {
|
||||
color: lineColors[lineData.idModul] || "#000000",
|
||||
}).addTo(map);
|
||||
newPolylines.push(polyline);
|
||||
newMarkers.push(...lineMarkers);
|
||||
});
|
||||
}, [map, linePositions, lineColors]); // Run this effect when `map` is ready
|
||||
|
||||
setMarkers(newMarkers);
|
||||
setPolylines(newPolylines);
|
||||
}, [map, linePositions, lineColors]); // Achten Sie darauf, dass dieser Effekt läuft, wenn sich `map`, `linePositions` oder `lineColors` ändern
|
||||
|
||||
//---------------------------------------------------------
|
||||
//---------------------------------------------------------
|
||||
|
||||
Reference in New Issue
Block a user