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

Jetzt muss noch Links für polylines mit localStorage oder Recoil gelöst werden, alle Links für alle Geräte funktionieren gut

Browse Source
This commit is contained in:
ISA
2024-09-04 09:52:52 +02:00
parent 3c433b9003
commit eea9a3af4c
3 changed files with 26 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
utils/setupPolylines.js
View File

@@ -1,14 +1,9 @@
// utils/setupPolylines.js
import { findClosestPoints } from "./geometryUtils";
import handlePoiSelect from "./handlePoiSelect";
import { updateLocationInDatabase } from "../services/apiService";
import { handleEditPoi, insertNewPOI, removePOI } from "./poiUtils";
import { parsePoint } from "./geometryUtils";
import { redrawPolyline } from "./mapUtils";
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 "./openInNewTab";
// Funktion zum Deaktivieren der Polyline-Ereignisse
export function disablePolylineEvents(polylines) {
@@ -22,7 +17,6 @@ export function disablePolylineEvents(polylines) {
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");
@@ -30,19 +24,20 @@ export function enablePolylineEvents(polylines, lineColors) {
});
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) => {
export const setupPolylines = (map, linePositions, lineColors, tooltipContents, setNewCoords, tempMarker) => {
const markers = [];
const polylines = [];
// Loop über die Linienpositionen
linePositions.forEach((lineData, lineIndex) => {
const lineMarkers = [];
// Loop über die Koordinaten der Linie und Erstellung der Marker
lineData.coordinates.forEach((coord, index) => {
let icon = circleIcon;
if (index === 0) {
@@ -54,11 +49,10 @@ export const setupPolylines = (map, linePositions, lineColors, tooltipContents,
const marker = L.marker(coord, {
icon: icon,
draggable: true,
contextmenu: true,
contextmenuInheritItems: false,
contextmenuItems: [],
contextmenu: true, // Ermögliche das Kontextmenü für Marker
}).addTo(map);
// Logik, um Marker zu verschieben und Polyline neu zu zeichnen
marker.on("dragend", () => {
const newCoords = marker.getLatLng();
setNewCoords(newCoords);
@@ -75,7 +69,7 @@ export const setupPolylines = (map, linePositions, lineColors, tooltipContents,
});
updatedPolyline.on("mouseover", () => {
updatedPolyline.setStyle({ weight: 20 });
updatedPolyline.setStyle({ weight: 14 });
updatedPolyline.bringToFront();
});
@@ -83,10 +77,12 @@ export const setupPolylines = (map, linePositions, lineColors, tooltipContents,
updatedPolyline.setStyle({ weight: 3 });
});
// Alte Polyline entfernen und die neue setzen
polylines[lineIndex].remove();
polylines[lineIndex] = updatedPolyline;
lineData.coordinates = newCoordinates;
// Koordinaten aktualisieren
const requestData = {
idModul: lineData.idModul,
idLD: lineData.idLD,
@@ -116,75 +112,37 @@ export const setupPolylines = (map, linePositions, lineColors, tooltipContents,
});
});
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];
removePOI(marker, lineData, currentZoom, currentCenter);
polylines[lineIndex].remove();
lineData.coordinates = newCoordinates;
},
},
],
});
});
marker.on("mouseout", function () {
this.unbindContextMenu();
});
// Marker in die Liste einfügen
lineMarkers.push(marker);
});
// Polyline hinzufügen
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);
insertNewPOI(closestPoints, newPoint, lineData, map);
redrawPolyline(lineData, lineColors, tooltipContents, map);
window.location.reload();
},
},
],
contextmenu: true, // Ermögliche das Kontextmenü für Polylines
}).addTo(map);
// Hier wird der Tooltip hinzugefügt
// Tooltip für die Polyline hinzufügen
polyline.bindTooltip(tooltipContents[`${lineData.idLD}-${lineData.idModul}`] || "Standard-Tooltip-Inhalt", {
permanent: false,
direction: "auto",
});
// Hover-Ereignisse für Polylines
polyline.on("mouseover", (e) => {
//console.log("Mouseover on polyline", lineData);
polyline.setStyle({ weight: 14 });
const link = `${process.env.NEXT_PUBLIC_BASE_URL}cpl.aspx?ver=35&kue=24&id=${lineData.idLD}`;
const link = `${process.env.NEXT_PUBLIC_BASE_URL}cpl.aspx?id=${lineData.idLD}`;
console.log("Link der Linie:", link);
localStorage.setItem("lastElementType", "polyline");
localStorage.setItem("polylineLink", link);
});
polyline.on("mouseout", (e) => {
// console.log("Mouseout from polyline", lineData);
polyline.setStyle({ weight: 3 });
});
// Polyline und Marker in ihre jeweiligen Listen einfügen
polylines.push(polyline);
markers.push(...lineMarkers);
});