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
|
// Initialisieren eines Zustands für die Speicherung der Polyline-Objekte
|
||||||
const [polylines, setPolylines] = useState([]);
|
const [polylines, setPolylines] = useState([]);
|
||||||
const [markers, setMarkers] = useState([]);
|
const [markers, setMarkers] = useState([]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!map) return;
|
if (!map) return;
|
||||||
|
|
||||||
// Entfernen alter Marker und Polylines
|
// Entfernen alter Marker und Polylinien
|
||||||
markers.forEach((marker) => marker.remove());
|
markers.forEach((marker) => marker.remove());
|
||||||
polylines.forEach((polyline) => polyline.remove());
|
polylines.forEach((polyline) => polyline.remove());
|
||||||
|
|
||||||
@@ -2224,7 +2223,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
|
|||||||
|
|
||||||
linePositions.forEach((lineData, lineIndex) => {
|
linePositions.forEach((lineData, lineIndex) => {
|
||||||
const lineMarkers = [];
|
const lineMarkers = [];
|
||||||
const polylinePoints = lineData.coordinates.map((coord, index) => {
|
lineData.coordinates.forEach((coord, index) => {
|
||||||
const marker = L.marker(coord, {
|
const marker = L.marker(coord, {
|
||||||
icon: circleIcon,
|
icon: circleIcon,
|
||||||
draggable: true,
|
draggable: true,
|
||||||
@@ -2234,11 +2233,18 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
|
|||||||
const newCoords = marker.getLatLng();
|
const newCoords = marker.getLatLng();
|
||||||
const newCoordinates = [...lineData.coordinates];
|
const newCoordinates = [...lineData.coordinates];
|
||||||
newCoordinates[index] = [newCoords.lat, newCoords.lng];
|
newCoordinates[index] = [newCoords.lat, newCoords.lng];
|
||||||
|
|
||||||
|
// Erstellen einer neuen Polyline nach dem Verschieben
|
||||||
const updatedPolyline = L.polyline(newCoordinates, {
|
const updatedPolyline = L.polyline(newCoordinates, {
|
||||||
color: lineColors[lineData.idModul] || "#000000",
|
color: lineColors[lineData.idModul] || "#000000",
|
||||||
}).addTo(map);
|
}).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.on("mouseover", () => {
|
||||||
updatedPolyline.setStyle({ weight: 8 });
|
updatedPolyline.setStyle({ weight: 8 });
|
||||||
updatedPolyline.bringToFront();
|
updatedPolyline.bringToFront();
|
||||||
@@ -2247,22 +2253,52 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
|
|||||||
updatedPolyline.setStyle({ weight: 5 });
|
updatedPolyline.setStyle({ weight: 5 });
|
||||||
});
|
});
|
||||||
|
|
||||||
// Ersetzen der alten Polyline durch die neue
|
// Entfernen der alten Polyline
|
||||||
newPolylines[lineIndex].remove();
|
newPolylines[lineIndex].remove();
|
||||||
newPolylines[lineIndex] = updatedPolyline;
|
newPolylines[lineIndex] = updatedPolyline;
|
||||||
lineData.coordinates = newCoordinates;
|
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);
|
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, {
|
const polyline = L.polyline(lineData.coordinates, {
|
||||||
color: lineColors[lineData.idModul] || "#000000",
|
color: lineColors[lineData.idModul] || "#000000",
|
||||||
}).addTo(map);
|
}).addTo(map);
|
||||||
|
|
||||||
// Hinzufügen eines Tooltips
|
|
||||||
polyline.bindTooltip("Informationen oder Name der Linie", {
|
polyline.bindTooltip("Informationen oder Name der Linie", {
|
||||||
permanent: false, // true, wenn Sie möchten, dass der Tooltip immer sichtbar ist
|
permanent: false, // true, wenn Sie möchten, dass der Tooltip immer sichtbar ist
|
||||||
direction: "auto", // Kann 'right', 'left', 'top' oder 'bottom' sein
|
direction: "auto", // Kann 'right', 'left', 'top' oder 'bottom' sein
|
||||||
@@ -2283,7 +2319,6 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
|
|||||||
setMarkers(newMarkers);
|
setMarkers(newMarkers);
|
||||||
setPolylines(newPolylines);
|
setPolylines(newPolylines);
|
||||||
}, [map, linePositions, lineColors]);
|
}, [map, linePositions, lineColors]);
|
||||||
|
|
||||||
//---------------------------------------------------------
|
//---------------------------------------------------------
|
||||||
//---------------------------------------------------------
|
//---------------------------------------------------------
|
||||||
|
|
||||||
|
|||||||
@@ -1,5 +1,6 @@
|
|||||||
// /pages/api/linesColorApi.js
|
// /pages/api/linesColorApi.js
|
||||||
// http://10.10.0.13/talas5/ClientData/WebServiceMap.asmx/GisStationsStatusDistrict
|
// 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) {
|
export default function handler(req, res) {
|
||||||
const response = {
|
const response = {
|
||||||
@@ -8,14 +9,14 @@ export default function handler(req, res) {
|
|||||||
IdMap: "10",
|
IdMap: "10",
|
||||||
Statis: [
|
Statis: [
|
||||||
{
|
{
|
||||||
IdLD: 25440,
|
IdLD: 50922,
|
||||||
Modul: 1,
|
Modul: 1,
|
||||||
DpName: "KUE01_Ausfall",
|
DpName: "KUE01_Ausfall",
|
||||||
ModulName: "42 Wippershain Sender",
|
ModulName: "42 Wippershain Sender",
|
||||||
ModulTyp: "nicht vorhanden",
|
ModulTyp: "nicht vorhanden",
|
||||||
Message: "KUEG 01: 42 Wippershain Sender Messwerkausfall kommend",
|
Message: "KUEG 01: 42 Wippershain Sender Messwerkausfall kommend",
|
||||||
Level: 4,
|
Level: 4,
|
||||||
PrioColor: "#FF00FF",
|
PrioColor: "#FFFF00",
|
||||||
PrioName: "system",
|
PrioName: "system",
|
||||||
Value: "?",
|
Value: "?",
|
||||||
},
|
},
|
||||||
@@ -27,7 +28,7 @@ export default function handler(req, res) {
|
|||||||
ModulTyp: "nicht vorhanden",
|
ModulTyp: "nicht vorhanden",
|
||||||
Message: "KUEG 03: 42 Solz Sender Messwerkausfall kommend",
|
Message: "KUEG 03: 42 Solz Sender Messwerkausfall kommend",
|
||||||
Level: 4,
|
Level: 4,
|
||||||
PrioColor: "#FF00FF",
|
PrioColor: "#FF0000",
|
||||||
PrioName: "system",
|
PrioName: "system",
|
||||||
Value: "?",
|
Value: "?",
|
||||||
},
|
},
|
||||||
|
|||||||
Reference in New Issue
Block a user