mapFeatures in setupPolylines umbenennt

2024-09-03 09:27:48 +02:00
parent 8814f0e450
commit 0f9a54efa1
3 changed files with 4 additions and 4 deletions
--- a/utils/setupPolylines.js
+++ b/utils/setupPolylines.js
@@ -0,0 +1,196 @@
+// utils/setupPolylines.js
+import { findClosestPoints } from "./geometryUtils";
+import handlePoiSelect from "./handlePoiSelect";
+import { updateLocationInDatabase } from "../services/apiService";
+import { handleEditPoi, insertNewMarker, removeMarker } from "./markerUtils";
+import { parsePoint } from "./geometryUtils";
+import circleIcon from "../components/gisPolylines/icons/CircleIcon";
+import startIcon from "../components/gisPolylines/icons/StartIcon";
+import endIcon from "../components/gisPolylines/icons/EndIcon";
+import { redrawPolyline } from "./mapUtils";
+import { openInNewTab } from "./contextMenuUtils";
+
+// Funktion zum Deaktivieren der Polyline-Ereignisse
+export function disablePolylineEvents(polylines) {
+  polylines.forEach((polyline) => {
+    polyline.off("mouseover");
+    polyline.off("mouseout");
+  });
+}
+
+// Funktion zum Aktivieren der Polyline-Ereignisse
+export function enablePolylineEvents(polylines, lineColors) {
+  polylines.forEach((polyline) => {
+    polyline.on("mouseover", (e) => {
+      console.log("Mouseover on polyline", polyline.options);
+      polyline.setStyle({ weight: 14 });
+      const link = `${process.env.NEXT_PUBLIC_BASE_URL}cpl.aspx?id=${polyline.options.idLD}`;
+      localStorage.setItem("lastElementType", "polyline");
+      localStorage.setItem("polylineLink", link);
+    });
+
+    polyline.on("mouseout", (e) => {
+      console.log("Mouseout from polyline", polyline.options);
+      polyline.setStyle({ weight: 3 });
+    });
+  });
+}
+
+export const setupPolylines = (map, linePositions, lineColors, tooltipContents, setNewCoords, tempMarker, currentZoom, currentCenter) => {
+  const markers = [];
+  const polylines = [];
+
+  linePositions.forEach((lineData, lineIndex) => {
+    const lineMarkers = [];
+
+    lineData.coordinates.forEach((coord, index) => {
+      let icon = circleIcon;
+      if (index === 0) {
+        icon = startIcon;
+      } else if (index === lineData.coordinates.length - 1) {
+        icon = endIcon;
+      }
+
+      const marker = L.marker(coord, {
+        icon: icon,
+        draggable: true,
+        contextmenu: true,
+        contextmenuInheritItems: false,
+        contextmenuItems: [],
+      }).addTo(map);
+
+      marker.on("dragend", () => {
+        const newCoords = marker.getLatLng();
+        setNewCoords(newCoords);
+        const newCoordinates = [...lineData.coordinates];
+        newCoordinates[index] = [newCoords.lat, newCoords.lng];
+
+        const updatedPolyline = L.polyline(newCoordinates, {
+          color: lineColors[`${lineData.idLD}-${lineData.idModul}`] || "#000000",
+        }).addTo(map);
+
+        updatedPolyline.bindTooltip(tooltipContents[`${lineData.idLD}-${lineData.idModul}`] || "Standard-Tooltip-Inhalt", {
+          permanent: false,
+          direction: "auto",
+        });
+
+        updatedPolyline.on("mouseover", () => {
+          updatedPolyline.setStyle({ weight: 20 });
+          updatedPolyline.bringToFront();
+        });
+
+        updatedPolyline.on("mouseout", () => {
+          updatedPolyline.setStyle({ weight: 3 });
+        });
+
+        polylines[lineIndex].remove();
+        polylines[lineIndex] = updatedPolyline;
+        lineData.coordinates = newCoordinates;
+
+        const requestData = {
+          idModul: lineData.idModul,
+          idLD: lineData.idLD,
+          newCoordinates,
+        };
+
+        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);
+          });
+      });
+
+      marker.on("mouseover", function () {
+        this.bindContextMenu({
+          contextmenuItems: [
+            {
+              text: "Stützpunkt entfernen",
+              icon: "/img/icons/gisLines/remove-support-point.svg",
+              callback: () => {
+                const newCoords = marker.getLatLng();
+                const newCoordinates = [...lineData.coordinates];
+                newCoordinates[index] = [newCoords.lat, newCoords.lng];
+
+                removeMarker(marker, lineData, currentZoom, currentCenter);
+                polylines[lineIndex].remove();
+                lineData.coordinates = newCoordinates;
+              },
+            },
+          ],
+        });
+      });
+
+      marker.on("mouseout", function () {
+        this.unbindContextMenu();
+      });
+
+      lineMarkers.push(marker);
+    });
+
+    const polyline = L.polyline(lineData.coordinates, {
+      color: lineColors[`${lineData.idLD}-${lineData.idModul}`] || "#000000",
+      weight: 3,
+      contextmenu: true,
+      contextmenuItems: [
+        {
+          text: "Stützpunkt hinzufügen",
+          icon: "/img/icons/gisLines/add-support-point.svg",
+          callback: (e) => {
+            if (tempMarker) {
+              tempMarker.remove();
+            }
+            const newPoint = e.latlng;
+            const closestPoints = findClosestPoints(lineData.coordinates, newPoint, map);
+            insertNewMarker(closestPoints, newPoint, lineData, map);
+            redrawPolyline(lineData, lineColors, tooltipContents, map);
+            window.location.reload();
+          },
+        },
+      ],
+    }).addTo(map);
+
+    // Hier wird der Tooltip hinzugefügt
+    polyline.bindTooltip(tooltipContents[`${lineData.idLD}-${lineData.idModul}`] || "Standard-Tooltip-Inhalt", {
+      permanent: false,
+      direction: "auto",
+    });
+
+    polyline.on("mouseover", (e) => {
+      console.log("Mouseover on polyline", lineData);
+      polyline.setStyle({ weight: 14 });
+      const link = `${process.env.NEXT_PUBLIC_BASE_URL}cpl.aspx?id=${lineData.idLD}`;
+      localStorage.setItem("lastElementType", "polyline");
+      localStorage.setItem("polylineLink", link);
+    });
+
+    polyline.on("mouseout", (e) => {
+      console.log("Mouseout from polyline", lineData);
+      polyline.setStyle({ weight: 3 });
+    });
+
+    polylines.push(polyline);
+    markers.push(...lineMarkers);
+  });
+
+  // Speichere Polylines und LineColors global für den Zugriff in anderen Funktionen
+  window.polylines = polylines;
+  window.lineColors = lineColors;
+
+  return { markers, polylines };
+};