Merge branch 'temp-branch' into Dev
This commit is contained in:
@@ -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]);
|
||||
|
||||
//---------------------------------------------------------
|
||||
//---------------------------------------------------------
|
||||
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
// /pages/api/linesColorApi.js
|
||||
// http://10.10.0.13/talas5/ClientData/WebServiceMap.asmx/GisStationsStatusDistrict
|
||||
//In DB gis_lines idLD und idModul anpassen entsprechend
|
||||
|
||||
export default function handler(req, res) {
|
||||
const response = {
|
||||
@@ -8,14 +9,14 @@ export default function handler(req, res) {
|
||||
IdMap: "10",
|
||||
Statis: [
|
||||
{
|
||||
IdLD: 25440,
|
||||
IdLD: 50922,
|
||||
Modul: 1,
|
||||
DpName: "KUE01_Ausfall",
|
||||
ModulName: "42 Wippershain Sender",
|
||||
ModulTyp: "nicht vorhanden",
|
||||
Message: "KUEG 01: 42 Wippershain Sender Messwerkausfall kommend",
|
||||
Level: 4,
|
||||
PrioColor: "#FF00FF",
|
||||
PrioColor: "#FFFF00",
|
||||
PrioName: "system",
|
||||
Value: "?",
|
||||
},
|
||||
@@ -27,7 +28,7 @@ export default function handler(req, res) {
|
||||
ModulTyp: "nicht vorhanden",
|
||||
Message: "KUEG 03: 42 Solz Sender Messwerkausfall kommend",
|
||||
Level: 4,
|
||||
PrioColor: "#FF00FF",
|
||||
PrioColor: "#FF0000",
|
||||
PrioName: "system",
|
||||
Value: "?",
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user