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

Station öffnen (Tab) für polylines ok, aber für marker muss noch option.link nehmen

Browse Source
This commit is contained in:
ISA
2024-09-02 15:58:42 +02:00
parent 9724c886b2
commit 17a8075d73
3 changed files with 55 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
utils/geometryUtils.js
View File

@@ -1,5 +1,22 @@
// utils/geometryUtils.js
/**
* Parses a point string in the format "POINT (longitude latitude)" and returns an object with latitude and longitude as numbers.
* @param {string} position - The position string in the format "POINT (longitude latitude)".
* @returns {{latitude: number, longitude: number}} An object containing the latitude and longitude as numbers.
*/
export const parsePoint = (position) => {
const [longitude, latitude] = position.slice(6, -1).split(" ");
return { latitude: parseFloat(latitude), longitude: parseFloat(longitude) };
};
/**
* Finds the closest points on a polyline to a new point.
* @param {Array} coordinates - The coordinates of the polyline.
* @param {Object} newPoint - The new point (with latitude and longitude).
* @param {Object} map - The map object.
* @returns {Array} The closest pair of points on the polyline.
*/
export const findClosestPoints = (coordinates, newPoint, map) => {
if (!map) {
console.error("Map is not defined. Cannot find closest points.");

137
utils/mapFeatures.js
View File

@@ -2,22 +2,15 @@
import { findClosestPoints } from "./geometryUtils";
import handlePoiSelect from "./handlePoiSelect";
import { updateLocationInDatabase } from "../services/apiService";
import { handleEditPoi, insertNewMarker, removeMarker } from "./markerUtils"; // Import removeMarker here
import { handleEditPoi, insertNewMarker, removeMarker } from "./markerUtils";
import { parsePoint } from "./geometryUtils"; // Importiere parsePoint hier
import circleIcon from "../components/gisPolylines/icons/CircleIcon";
import startIcon from "../components/gisPolylines/icons/StartIcon";
import endIcon from "../components/gisPolylines/icons/EndIcon";
import { AddSupportPointIcon, RemoveSupportPointIcon } from "../components/gisPolylines/icons/SupportPointIcons";
import { redrawPolyline } from "./mapUtils"; // Import redrawPolyline here
import { openInNewTab } from "../utils/contextMenuUtils"; // Importiere die Funktion, wenn nicht schon vorhanden
import { useState } from "react";
//----------------------------------
// geometryUtils.js
export const parsePoint = (position) => {
const [longitude, latitude] = position.slice(6, -1).split(" ");
return { latitude: parseFloat(latitude), longitude: parseFloat(longitude) };
};
import { redrawPolyline } from "./mapUtils";
import { openInNewTab } from "../utils/contextMenuUtils";
//----------------------------------
export const setupMarkers = async (
map,
locations,
@@ -48,8 +41,6 @@ export const setupMarkers = async (
const matchingIcon = poiData.find((poi) => poi.idPoi === location.idPoi);
const iconUrl = matchingIcon ? `/img/icons/pois/${matchingIcon.path}` : "/img/icons/pois/default-icon.png";
//console.log("Setting up marker for location:", location);
const marker = L.marker([latitude, longitude], {
icon: L.icon({
iconUrl: iconUrl,
@@ -74,12 +65,12 @@ export const setupMarkers = async (
});
marker.bindPopup(`
<div>
<b class="text-xl text-black-700">${location.description || "Unbekannt"}</b><br>
${deviceName}<br>
${poiTypName}<br>
</div>
`);
<div>
<b class="text-xl text-black-700">${location.description || "Unbekannt"}</b><br>
${deviceName}<br>
${poiTypName}<br>
</div>
`);
marker.on("mouseover", function () {
handlePoiSelect(
@@ -98,6 +89,8 @@ export const setupMarkers = async (
);
setCurrentPoi(location);
this.openPopup();
localStorage.setItem("lastElementType", "marker");
});
marker.on("mouseout", function () {
@@ -110,7 +103,7 @@ export const setupMarkers = async (
const newLng = e.target.getLatLng().lng;
const markerId = e.target.options.id;
updateLocationInDatabase(markerId, newLat, newLng).then(() => {
//onLocationUpdate(markerId, newLat, newLng);
// Optional: Update UI or state after dragging
});
} else {
console.error("Drag operation not allowed");
@@ -126,48 +119,14 @@ export const setupMarkers = async (
}
}
};
//----------------------------------
export const setupPolylines = (map, linePositions, lineColors, tooltipContents, setNewCoords, tempMarker, currentZoom, currentCenter) => {
const markers = [];
const polylines = [];
let isMouseOverMenuItem = false;
const checkMouseOverMenu = () => {
if (!isMouseOverMenuItem) {
//showContextMenuItemByIndex(map, 0);
//showContextMenuItemByIndex(map, 1);
closeContextMenu(); // Kontextmenü schließen, wenn die Maus nicht mehr darüber ist
}
};
const handleMouseOverMenuItem = () => {
isMouseOverMenuItem = true;
};
const handleMouseOutMenuItem = () => {
isMouseOverMenuItem = false;
setTimeout(checkMouseOverMenu, 500); // kleine Verzögerung, um sicherzustellen, dass es keine schnellen Bewegungen sind
};
const closeContextMenu = () => {
const contextMenuElement = document.querySelector(".leaflet-contextmenu");
if (contextMenuElement) {
contextMenuElement.style.display = "none"; // Kontextmenü ausblenden
}
};
const handleOutsideClick = (event) => {
const contextMenuElement = document.querySelector(".leaflet-contextmenu");
if (contextMenuElement && !contextMenuElement.contains(event.target)) {
closeContextMenu(); // Kontextmenü schließen, wenn der Klick außerhalb stattfindet
}
};
document.addEventListener("mousedown", handleOutsideClick);
linePositions.forEach((lineData, lineIndex) => {
const lineMarkers = [];
lineData.coordinates.forEach((coord, index) => {
let icon = circleIcon;
if (index === 0) {
@@ -200,9 +159,10 @@ export const setupPolylines = (map, linePositions, lineColors, tooltipContents,
});
updatedPolyline.on("mouseover", () => {
updatedPolyline.setStyle({ weight: 10 });
updatedPolyline.setStyle({ weight: 20 });
updatedPolyline.bringToFront();
});
updatedPolyline.on("mouseout", () => {
updatedPolyline.setStyle({ weight: 3 });
});
@@ -269,18 +229,9 @@ export const setupPolylines = (map, linePositions, lineColors, tooltipContents,
const polyline = L.polyline(lineData.coordinates, {
color: lineColors[`${lineData.idLD}-${lineData.idModul}`] || "#000000",
weight: 3, // Standard weight for better recognition
contextmenu: true,
contextmenuItems: [
{
text: "Station öffnen (Tab)",
icon: "/img/screen_new.png",
callback: (e) => {
console.log("lineData idLD:", lineData.idLD);
const idLD = lineData.idLD; // Angenommen, die ID der Station ist in lineData vorhanden
const link = `${process.env.NEXT_PUBLIC_BASE_URL}cpl.aspx?id=${idLD}`;
window.open(link, "_blank"); // Öffne direkt den Link in einem neuen Tab
},
},
{
text: "Stützpunkt hinzufügen",
icon: "/img/icons/gisLines/add-support-point.svg",
@@ -299,63 +250,21 @@ export const setupPolylines = (map, linePositions, lineColors, tooltipContents,
}).addTo(map);
polyline.on("mouseover", (e) => {
polyline.setStyle({ weight: 20 });
//hideContextMenuItemByIndex(map, 0);
//hideContextMenuItemByIndex(map, 1);
});
polyline.on("mousedown", (e) => {
polyline.setStyle({ weight: 20 });
});
polyline.on("mouseup", (e) => {
polyline.setStyle({ weight: 20 });
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 });
polyline.setStyle({ color: lineColors[`${lineData.idLD}-${lineData.idModul}`] || "#000000" });
setTimeout(checkMouseOverMenu, 500);
});
polyline.bindTooltip(tooltipContents[`${lineData.idLD}-${lineData.idModul}`] || "Standard-Tooltip-Inhalt", {
permanent: false,
direction: "auto",
});
polylines.push(polyline);
markers.push(...lineMarkers);
});
// Add listeners to the context menu items
const contextMenuElement = document.querySelector(".leaflet-contextmenu"); // Assuming the context menu class is 'leaflet-contextmenu'
if (contextMenuElement) {
contextMenuElement.addEventListener("mouseover", handleMouseOverMenuItem);
contextMenuElement.addEventListener("mouseout", handleMouseOutMenuItem);
}
return { markers, polylines };
};
// Funktion zum Ausblenden eines Kontextmenüelements nach Index
const hideContextMenuItemByIndex = (map, index) => {
const items = map.contextmenu._items;
if (index >= 0 && index < items.length) {
const itemElement = items[index].el;
if (itemElement) {
itemElement.style.display = "none"; // Verstecke das Element
}
}
};
// Funktion zum Einblenden eines Kontextmenüelements nach Index
const showContextMenuItemByIndex = (map, index) => {
const items = map.contextmenu._items;
if (index >= 0 && index < items.length) {
const itemElement = items[index].el;
if (itemElement) {
itemElement.style.display = ""; // Zeige das Element wieder an
}
}
};

21
utils/mapInitialization.js
View File

@@ -1,18 +1,15 @@
// /utils/mapInitialization.js
import L from "leaflet";
//import OverlappingMarkerSpiderfier from "overlapping-marker-spiderfier-leaflet";
import "leaflet-contextmenu";
import "leaflet/dist/leaflet.css";
import "leaflet-contextmenu/dist/leaflet.contextmenu.css";
import * as urls from "../config/urls.js";
import * as layers from "../config/layers.js";
import { addContextMenuToMarker, openInNewTab } from "../utils/contextMenuUtils.js";
import { addContextMenuToMarker, openInNewTab } from "../utils/contextMenuUtils";
export const initializeMap = (mapRef, setMap, setOms, setMenuItemAdded, addItemsToMapContextMenu, hasRights) => {
const offlineTileLayer = urls.OFFLINE_TILE_LAYER;
//const offlineTileLayer = process.env.OFFLINE_TILE_LAYER;
const onlineTileLayer = urls.ONLINE_TILE_LAYER;
//const onlineTileLayer = process.env.ONLINE_TILE_LAYER;
const TALAS = layers.MAP_LAYERS.TALAS;
const ECI = layers.MAP_LAYERS.ECI;
const ULAF = layers.MAP_LAYERS.ULAF;
@@ -40,8 +37,20 @@ export const initializeMap = (mapRef, setMap, setOms, setMenuItemAdded, addItems
text: "Station öffnen (Tab)",
icon: "/img/screen_new.png",
callback: (e) => {
const clickedMarker = e.relatedTarget;
openInNewTab(e, clickedMarker);
const lastElementType = localStorage.getItem("lastElementType");
if (lastElementType === "polyline") {
const storedLink = localStorage.getItem("polylineLink");
if (storedLink) {
console.log("Opening polyline link:", storedLink);
window.open(storedLink, "_blank");
}
} else if (lastElementType === "marker") {
const clickedItem = e.relatedTarget;
if (clickedItem instanceof L.Marker) {
openInNewTab(e, clickedItem);
}
}
},
},
"-",