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

Sattion öffnen (Tab) für polylines und Geräte funktioniert nicht zu 100% muss noch optimiert werden

Browse Source
This commit is contained in:
ISA
2024-09-03 08:50:58 +02:00
parent 03de1ab43e
commit 46a9f05894
3 changed files with 72 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
.env.local
View File

@@ -18,30 +18,30 @@
#########################
#DB_HOST=10.10.0.70
#DB_USER=root
#DB_PASSWORD="root#$"
#DB_NAME=talas_v5
#DB_PORT=3306
#########################
#NEXT_PUBLIC_BASE_URL="http://10.10.0.30/talas5/devices/"
#NEXT_PUBLIC_SERVER_URL="http://10.10.0.70"
#NEXT_PUBLIC_PROXY_TARGET="http://10.10.0.70"
#NEXT_PUBLIC_ONLINE_TILE_LAYER="http://10.10.0.13:3000/mapTiles/{z}/{x}/{y}.png"
#NEXT_PUBLIC_ONLINE_TILE_LAYER="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
#########################
DB_HOST=192.168.10.167
DB_HOST=10.10.0.70
DB_USER=root
DB_PASSWORD="root#$"
DB_NAME=talas_v5
DB_PORT=3306
#########################
NEXT_PUBLIC_BASE_URL="http://10.10.0.30/talas5/devices/"
NEXT_PUBLIC_SERVER_URL="http://10.10.0.70"
NEXT_PUBLIC_PROXY_TARGET="http://10.10.0.70"
NEXT_PUBLIC_ONLINE_TILE_LAYER="http://10.10.0.13:3000/mapTiles/{z}/{x}/{y}.png"
#NEXT_PUBLIC_ONLINE_TILE_LAYER="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
#########################
#DB_HOST=192.168.10.167
#DB_USER=root
#DB_PASSWORD="root#$"
#DB_NAME=talas_v5
#DB_PORT=3306
#########################
#URLs für den Client (clientseitig)
NEXT_PUBLIC_BASE_URL="http://192.168.10.167/talas5/devices/"
NEXT_PUBLIC_SERVER_URL="http://192.168.10.167"
NEXT_PUBLIC_PROXY_TARGET="http://192.168.10.167"
NEXT_PUBLIC_ONLINE_TILE_LAYER="http://192.168.10.14:3000/mapTiles/{z}/{x}/{y}.png"
#NEXT_PUBLIC_BASE_URL="http://192.168.10.167/talas5/devices/"
#NEXT_PUBLIC_SERVER_URL="http://192.168.10.167"
#NEXT_PUBLIC_PROXY_TARGET="http://192.168.10.167"
#NEXT_PUBLIC_ONLINE_TILE_LAYER="http://192.168.10.14:3000/mapTiles/{z}/{x}/{y}.png"

52
utils/mapFeatures.js
View File

@@ -3,14 +3,39 @@ import { findClosestPoints } from "./geometryUtils";
import handlePoiSelect from "./handlePoiSelect";
import { updateLocationInDatabase } from "../services/apiService";
import { handleEditPoi, insertNewMarker, removeMarker } from "./markerUtils";
import { parsePoint } from "./geometryUtils"; // Importiere parsePoint hier
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 { AddSupportPointIcon, RemoveSupportPointIcon } from "../components/gisPolylines/icons/SupportPointIcons";
import { redrawPolyline } from "./mapUtils";
import { openInNewTab } from "../utils/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 setupMarkers = async (
map,
locations,
@@ -52,7 +77,7 @@ export const setupMarkers = async (
id: location.idPoi,
name: location.name,
description: location.description,
link: location.link, // Marker-specific link
link: location.link,
}).bindContextMenu({
contextmenu: true,
contextmenuWidth: 140,
@@ -91,8 +116,11 @@ export const setupMarkers = async (
setCurrentPoi(location);
this.openPopup();
// Deaktiviere Polyline-Ereignisse beim Öffnen des Kontextmenüs des Markers
disablePolylineEvents(window.polylines);
localStorage.setItem("lastElementType", "marker");
localStorage.setItem("markerLink", this.options.link); // Store the marker-specific link
localStorage.setItem("markerLink", this.options.link);
});
marker.on("mouseout", function () {
@@ -104,9 +132,7 @@ export const setupMarkers = async (
const newLat = e.target.getLatLng().lat;
const newLng = e.target.getLatLng().lng;
const markerId = e.target.options.id;
updateLocationInDatabase(markerId, newLat, newLng).then(() => {
// Optional: Update UI or state after dragging
});
updateLocationInDatabase(markerId, newLat, newLng).then(() => {});
} else {
console.error("Drag operation not allowed");
}
@@ -231,7 +257,7 @@ 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
weight: 3,
contextmenu: true,
contextmenuItems: [
{
@@ -251,6 +277,12 @@ export const setupPolylines = (map, linePositions, lineColors, tooltipContents,
],
}).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 });
@@ -268,5 +300,9 @@ export const setupPolylines = (map, linePositions, lineColors, tooltipContents,
markers.push(...lineMarkers);
});
// Speichere Polylines und LineColors global für den Zugriff in anderen Funktionen
window.polylines = polylines;
window.lineColors = lineColors;
return { markers, polylines };
};

8
utils/mapInitialization.js
View File

@@ -6,6 +6,7 @@ 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";
import { disablePolylineEvents, enablePolylineEvents } from "./mapFeatures"; // Importiere die Funktionen
export const initializeMap = (mapRef, setMap, setOms, setMenuItemAdded, addItemsToMapContextMenu, hasRights) => {
const offlineTileLayer = urls.OFFLINE_TILE_LAYER;
@@ -45,10 +46,10 @@ export const initializeMap = (mapRef, setMap, setOms, setMenuItemAdded, addItems
console.log("Opening polyline link:", storedLink);
window.open(storedLink, "_blank");
}
//} else if (lastElementType === "marker") {
} else {
const clickedMarker = e.relatedTarget;
openInNewTab(e, clickedMarker);
console.log("Opening marker link:", clickedMarker.options.link);
}
},
},
@@ -67,6 +68,11 @@ export const initializeMap = (mapRef, setMap, setOms, setMenuItemAdded, addItems
setMap(initMap);
setOms(overlappingMarkerSpiderfier);
// Polyline-Ereignisse aktivieren, wenn das Kontextmenü geschlossen wird
initMap.on("contextmenu.close", function () {
enablePolylineEvents(window.polylines, window.lineColors);
});
initMap.on("zoomend", function () {
if (initMap.getZoom() > 15) {
initMap.setZoom(15);