Jetzt muss noch Links für polylines mit localStorage oder Recoil gelöst werden, alle Links für alle Geräte funktionieren gut
This commit is contained in:
@@ -5,9 +5,7 @@ import "leaflet/dist/leaflet.css";
|
|||||||
import "leaflet-contextmenu/dist/leaflet.contextmenu.css";
|
import "leaflet-contextmenu/dist/leaflet.contextmenu.css";
|
||||||
import * as urls from "../config/urls.js";
|
import * as urls from "../config/urls.js";
|
||||||
import * as layers from "../config/layers.js";
|
import * as layers from "../config/layers.js";
|
||||||
import { addContextMenuToMarker } from "./addContextMenuToMarker.js";
|
import { openInNewTab } from "./openInNewTab.js"; // Korrigiert
|
||||||
import { openInNewTab } from "./openInNewTab.js";
|
|
||||||
import { disablePolylineEvents, enablePolylineEvents } from "./setupPolylines.js";
|
|
||||||
|
|
||||||
export const initializeMap = (mapRef, setMap, setOms, setMenuItemAdded, addItemsToMapContextMenu, hasRights) => {
|
export const initializeMap = (mapRef, setMap, setOms, setMenuItemAdded, addItemsToMapContextMenu, hasRights) => {
|
||||||
if (mapRef.current) {
|
if (mapRef.current) {
|
||||||
@@ -24,10 +22,13 @@ export const initializeMap = (mapRef, setMap, setOms, setMenuItemAdded, addItems
|
|||||||
text: "Station öffnen (Tab)",
|
text: "Station öffnen (Tab)",
|
||||||
icon: "/img/screen_new.png",
|
icon: "/img/screen_new.png",
|
||||||
callback: (e) => {
|
callback: (e) => {
|
||||||
const clickedMarker = e.relatedTarget;
|
const clickedElement = e.relatedTarget;
|
||||||
if (clickedMarker) {
|
|
||||||
// Verwende die Funktion zum Öffnen in einem neuen Tab
|
// Überprüfe, ob der Kontextklick auf eine Polyline oder einen Marker erfolgt ist
|
||||||
openInNewTab(e, clickedMarker);
|
if (clickedElement instanceof L.Marker || clickedElement instanceof L.Polyline) {
|
||||||
|
openInNewTab(e, clickedElement); // Verwende openInNewTab für beide Fälle
|
||||||
|
} else {
|
||||||
|
console.error("Kein gültiges Ziel für den Kontextmenüeintrag");
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
// /utils/openInNewTab.js
|
// utils/openInNewTab.js
|
||||||
|
|
||||||
export function openInNewTab(e, target) {
|
export function openInNewTab(e, target) {
|
||||||
const BASE_URL = process.env.NEXT_PUBLIC_BASE_URL;
|
const BASE_URL = process.env.NEXT_PUBLIC_BASE_URL;
|
||||||
@@ -8,9 +8,8 @@ export function openInNewTab(e, target) {
|
|||||||
if (target instanceof L.Marker && target.options.link) {
|
if (target instanceof L.Marker && target.options.link) {
|
||||||
// Verwende den Link, der im Marker gespeichert ist
|
// Verwende den Link, der im Marker gespeichert ist
|
||||||
link = `${BASE_URL}${target.options.link}`;
|
link = `${BASE_URL}${target.options.link}`;
|
||||||
//link = target.options.link;
|
|
||||||
} else if (target instanceof L.Polyline) {
|
} else if (target instanceof L.Polyline) {
|
||||||
// Polyline-Logik bleibt unverändert
|
// Polyline-Logik
|
||||||
const idLD = target.options.idLD;
|
const idLD = target.options.idLD;
|
||||||
if (idLD) {
|
if (idLD) {
|
||||||
link = `${BASE_URL}cpl.aspx?id=${idLD}`;
|
link = `${BASE_URL}cpl.aspx?id=${idLD}`;
|
||||||
|
|||||||
@@ -1,14 +1,9 @@
|
|||||||
// utils/setupPolylines.js
|
// utils/setupPolylines.js
|
||||||
import { findClosestPoints } from "./geometryUtils";
|
import { findClosestPoints } from "./geometryUtils";
|
||||||
import handlePoiSelect from "./handlePoiSelect";
|
import { redrawPolyline } from "./mapUtils";
|
||||||
import { updateLocationInDatabase } from "../services/apiService";
|
|
||||||
import { handleEditPoi, insertNewPOI, removePOI } from "./poiUtils";
|
|
||||||
import { parsePoint } from "./geometryUtils";
|
|
||||||
import circleIcon from "../components/gisPolylines/icons/CircleIcon";
|
import circleIcon from "../components/gisPolylines/icons/CircleIcon";
|
||||||
import startIcon from "../components/gisPolylines/icons/StartIcon";
|
import startIcon from "../components/gisPolylines/icons/StartIcon";
|
||||||
import endIcon from "../components/gisPolylines/icons/EndIcon";
|
import endIcon from "../components/gisPolylines/icons/EndIcon";
|
||||||
import { redrawPolyline } from "./mapUtils";
|
|
||||||
import { openInNewTab } from "./openInNewTab";
|
|
||||||
|
|
||||||
// Funktion zum Deaktivieren der Polyline-Ereignisse
|
// Funktion zum Deaktivieren der Polyline-Ereignisse
|
||||||
export function disablePolylineEvents(polylines) {
|
export function disablePolylineEvents(polylines) {
|
||||||
@@ -22,7 +17,6 @@ export function disablePolylineEvents(polylines) {
|
|||||||
export function enablePolylineEvents(polylines, lineColors) {
|
export function enablePolylineEvents(polylines, lineColors) {
|
||||||
polylines.forEach((polyline) => {
|
polylines.forEach((polyline) => {
|
||||||
polyline.on("mouseover", (e) => {
|
polyline.on("mouseover", (e) => {
|
||||||
//console.log("Mouseover on polyline", polyline.options);
|
|
||||||
polyline.setStyle({ weight: 14 });
|
polyline.setStyle({ weight: 14 });
|
||||||
const link = `${process.env.NEXT_PUBLIC_BASE_URL}cpl.aspx?id=${polyline.options.idLD}`;
|
const link = `${process.env.NEXT_PUBLIC_BASE_URL}cpl.aspx?id=${polyline.options.idLD}`;
|
||||||
localStorage.setItem("lastElementType", "polyline");
|
localStorage.setItem("lastElementType", "polyline");
|
||||||
@@ -30,19 +24,20 @@ export function enablePolylineEvents(polylines, lineColors) {
|
|||||||
});
|
});
|
||||||
|
|
||||||
polyline.on("mouseout", (e) => {
|
polyline.on("mouseout", (e) => {
|
||||||
//console.log("Mouseout from polyline", polyline.options);
|
|
||||||
polyline.setStyle({ weight: 3 });
|
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 markers = [];
|
||||||
const polylines = [];
|
const polylines = [];
|
||||||
|
|
||||||
|
// Loop über die Linienpositionen
|
||||||
linePositions.forEach((lineData, lineIndex) => {
|
linePositions.forEach((lineData, lineIndex) => {
|
||||||
const lineMarkers = [];
|
const lineMarkers = [];
|
||||||
|
|
||||||
|
// Loop über die Koordinaten der Linie und Erstellung der Marker
|
||||||
lineData.coordinates.forEach((coord, index) => {
|
lineData.coordinates.forEach((coord, index) => {
|
||||||
let icon = circleIcon;
|
let icon = circleIcon;
|
||||||
if (index === 0) {
|
if (index === 0) {
|
||||||
@@ -54,11 +49,10 @@ export const setupPolylines = (map, linePositions, lineColors, tooltipContents,
|
|||||||
const marker = L.marker(coord, {
|
const marker = L.marker(coord, {
|
||||||
icon: icon,
|
icon: icon,
|
||||||
draggable: true,
|
draggable: true,
|
||||||
contextmenu: true,
|
contextmenu: true, // Ermögliche das Kontextmenü für Marker
|
||||||
contextmenuInheritItems: false,
|
|
||||||
contextmenuItems: [],
|
|
||||||
}).addTo(map);
|
}).addTo(map);
|
||||||
|
|
||||||
|
// Logik, um Marker zu verschieben und Polyline neu zu zeichnen
|
||||||
marker.on("dragend", () => {
|
marker.on("dragend", () => {
|
||||||
const newCoords = marker.getLatLng();
|
const newCoords = marker.getLatLng();
|
||||||
setNewCoords(newCoords);
|
setNewCoords(newCoords);
|
||||||
@@ -75,7 +69,7 @@ export const setupPolylines = (map, linePositions, lineColors, tooltipContents,
|
|||||||
});
|
});
|
||||||
|
|
||||||
updatedPolyline.on("mouseover", () => {
|
updatedPolyline.on("mouseover", () => {
|
||||||
updatedPolyline.setStyle({ weight: 20 });
|
updatedPolyline.setStyle({ weight: 14 });
|
||||||
updatedPolyline.bringToFront();
|
updatedPolyline.bringToFront();
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -83,10 +77,12 @@ export const setupPolylines = (map, linePositions, lineColors, tooltipContents,
|
|||||||
updatedPolyline.setStyle({ weight: 3 });
|
updatedPolyline.setStyle({ weight: 3 });
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Alte Polyline entfernen und die neue setzen
|
||||||
polylines[lineIndex].remove();
|
polylines[lineIndex].remove();
|
||||||
polylines[lineIndex] = updatedPolyline;
|
polylines[lineIndex] = updatedPolyline;
|
||||||
lineData.coordinates = newCoordinates;
|
lineData.coordinates = newCoordinates;
|
||||||
|
|
||||||
|
// Koordinaten aktualisieren
|
||||||
const requestData = {
|
const requestData = {
|
||||||
idModul: lineData.idModul,
|
idModul: lineData.idModul,
|
||||||
idLD: lineData.idLD,
|
idLD: lineData.idLD,
|
||||||
@@ -116,75 +112,37 @@ export const setupPolylines = (map, linePositions, lineColors, tooltipContents,
|
|||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
marker.on("mouseover", function () {
|
// Marker in die Liste einfügen
|
||||||
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();
|
|
||||||
});
|
|
||||||
|
|
||||||
lineMarkers.push(marker);
|
lineMarkers.push(marker);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Polyline hinzufügen
|
||||||
const polyline = L.polyline(lineData.coordinates, {
|
const polyline = L.polyline(lineData.coordinates, {
|
||||||
color: lineColors[`${lineData.idLD}-${lineData.idModul}`] || "#000000",
|
color: lineColors[`${lineData.idLD}-${lineData.idModul}`] || "#000000",
|
||||||
weight: 3,
|
weight: 3,
|
||||||
contextmenu: true,
|
contextmenu: true, // Ermögliche das Kontextmenü für Polylines
|
||||||
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();
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
}).addTo(map);
|
}).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", {
|
polyline.bindTooltip(tooltipContents[`${lineData.idLD}-${lineData.idModul}`] || "Standard-Tooltip-Inhalt", {
|
||||||
permanent: false,
|
permanent: false,
|
||||||
direction: "auto",
|
direction: "auto",
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Hover-Ereignisse für Polylines
|
||||||
polyline.on("mouseover", (e) => {
|
polyline.on("mouseover", (e) => {
|
||||||
//console.log("Mouseover on polyline", lineData);
|
|
||||||
polyline.setStyle({ weight: 14 });
|
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);
|
console.log("Link der Linie:", link);
|
||||||
localStorage.setItem("lastElementType", "polyline");
|
localStorage.setItem("lastElementType", "polyline");
|
||||||
localStorage.setItem("polylineLink", link);
|
localStorage.setItem("polylineLink", link);
|
||||||
});
|
});
|
||||||
|
|
||||||
polyline.on("mouseout", (e) => {
|
polyline.on("mouseout", (e) => {
|
||||||
// console.log("Mouseout from polyline", lineData);
|
|
||||||
polyline.setStyle({ weight: 3 });
|
polyline.setStyle({ weight: 3 });
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Polyline und Marker in ihre jeweiligen Listen einfügen
|
||||||
polylines.push(polyline);
|
polylines.push(polyline);
|
||||||
markers.push(...lineMarkers);
|
markers.push(...lineMarkers);
|
||||||
});
|
});
|
||||||
|
|||||||
Reference in New Issue
Block a user