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

Merge branch 'temp-branch2' into feature/main-contextmenu-line

Browse Source
This commit is contained in:
ISA
2024-09-02 20:46:09 +02:00
parent 566573eff6 8500be8d5a
commit 03de1ab43e
5 changed files with 79 additions and 123 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"

8
hooks/useLineData.js
View File

@@ -25,7 +25,7 @@ const useLineData = (webserviceGisLinesStatusUrl, setLineStatusData) => {
// Sortiere die Meldungen nach Level, damit die höchste Priorität (kleinster Level) zuerst kommt
const sortedStatis = [...data1.Statis].sort((a, b) => a.Level - b.Level);
//console.log("Sortierte Daten:", sortedStatis);
console.log("Sortierte Daten:", sortedStatis);
// Filtere Objekte mit gleichem IdLD und Modul, und Level > 0, und entferne die Objekte mit dem höchsten Level
const filteredStatis = [];
@@ -45,7 +45,7 @@ const useLineData = (webserviceGisLinesStatusUrl, setLineStatusData) => {
}
});
//console.log("Gefilterte Daten (Objekte mit höchstem Level entfernt):", filteredStatis);
console.log("Gefilterte Daten (Objekte mit höchstem Level entfernt):", filteredStatis);
filteredStatis.forEach((statis) => {
const key = `${statis.IdLD}-${statis.Modul}`;
@@ -147,10 +147,10 @@ const useLineData = (webserviceGisLinesStatusUrl, setLineStatusData) => {
fetchData();
// Setze ein Intervall, um die Daten alle 20 Sekunden erneut abzurufen
const intervalId = setInterval(fetchData, 20000);
//const intervalId = setInterval(fetchData, 20000);
// Räumt das Intervall auf, wenn die Komponente entladen wird
return () => clearInterval(intervalId);
//return () => clearInterval(intervalId);
}, [webserviceGisLinesStatusUrl, setLineStatusData]);
return { lineColors, tooltipContents };

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.");

64
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,
@@ -61,6 +52,7 @@ export const setupMarkers = async (
id: location.idPoi,
name: location.name,
description: location.description,
link: location.link, // Marker-specific link
}).bindContextMenu({
contextmenu: true,
contextmenuWidth: 140,
@@ -74,12 +66,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 +90,9 @@ export const setupMarkers = async (
);
setCurrentPoi(location);
this.openPopup();
localStorage.setItem("lastElementType", "marker");
localStorage.setItem("markerLink", this.options.link); // Store the marker-specific link
});
marker.on("mouseout", function () {
@@ -110,7 +105,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,7 +121,6 @@ export const setupMarkers = async (
}
}
};
//----------------------------------
export const setupPolylines = (map, linePositions, lineColors, tooltipContents, setNewCoords, tempMarker, currentZoom, currentCenter) => {
const markers = [];
@@ -134,6 +128,7 @@ export const setupPolylines = (map, linePositions, lineColors, tooltipContents,
linePositions.forEach((lineData, lineIndex) => {
const lineMarkers = [];
lineData.coordinates.forEach((coord, index) => {
let icon = circleIcon;
if (index === 0) {
@@ -166,9 +161,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 });
});
@@ -235,18 +231,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",
@@ -265,17 +252,16 @@ export const setupPolylines = (map, linePositions, lineColors, tooltipContents,
}).addTo(map);
polyline.on("mouseover", (e) => {
polyline.setStyle({ weight: 10 });
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" });
});
polyline.bindTooltip(tooltipContents[`${lineData.idLD}-${lineData.idModul}`] || "Standard-Tooltip-Inhalt", {
permanent: false,
direction: "auto",
});
polylines.push(polyline);

71
utils/mapInitialization.js
View File

@@ -5,10 +5,7 @@ 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 { openInNewTab } from "../utils/contextMenuUtils.js";
import { findNearestPolyline } from "./geometryUtils"; // Importiere die Funktion zur Suche der nächsten Linie
let lastClickedTarget = null; // Variable zur Zwischenspeicherung des Ziels
import { addContextMenuToMarker, openInNewTab } from "../utils/contextMenuUtils";
export const initializeMap = (mapRef, setMap, setOms, setMenuItemAdded, addItemsToMapContextMenu, hasRights) => {
const offlineTileLayer = urls.OFFLINE_TILE_LAYER;
@@ -37,43 +34,24 @@ export const initializeMap = (mapRef, setMap, setOms, setMenuItemAdded, addItems
contextmenu: true,
contextmenuItems: [
{
text: "Station Öffnen (Tab)",
text: "Station öffnen (Tab)",
icon: "/img/screen_new.png",
callback: (e) => {
const clickedTarget = lastClickedTarget || e.relatedTarget || e.layer;
const lastElementType = localStorage.getItem("lastElementType");
if (!clickedTarget) {
console.error("Kein gültiges Ziel im Kontextmenü");
return;
}
// Prüfen, ob das Element eine Station (Marker) oder Linie (Polyline) ist
if (clickedTarget instanceof L.Marker) {
console.log("Marker angeklickt");
openInNewTab(e, clickedTarget);
} else if (clickedTarget instanceof L.Polyline) {
console.log("Linie angeklickt:", clickedTarget.options.idLD); // Hier kannst du die ID oder andere Optionen der Polyline verwenden
// Optional: Funktion zum Öffnen der Linie implementieren
openInNewTab(e, clickedTarget);
if (lastElementType === "polyline") {
const storedLink = localStorage.getItem("polylineLink");
if (storedLink) {
console.log("Opening polyline link:", storedLink);
window.open(storedLink, "_blank");
}
//} else if (lastElementType === "marker") {
} else {
console.error("Unbekanntes Element");
const clickedMarker = e.relatedTarget;
openInNewTab(e, clickedMarker);
}
},
},
/* callback: (e) => {
//Wenn Kein Station oder ein Station ist
const clickedMarker = e.relatedTarget; // Zugriff auf den Marker, der das Event ausgelöst hat
openInNewTab(e, clickedMarker);
//wenn Linie ist (polyline)
const clickedTarget = lastClickedTarget || findNearestPolyline(initMap, e.latlng); // Verwende zwischengespeichertes Ziel oder die nächstgelegene Linie
if (clickedTarget) {
openInNewTab(e, clickedTarget); // Gemeinsame Funktion für Linien und Stationen
} else {
console.error("Kein gültiges Ziel im Kontextmenü");
}
},
}, */
"-",
],
});
@@ -97,31 +75,6 @@ export const initializeMap = (mapRef, setMap, setOms, setMenuItemAdded, addItems
}
});
// Speichere das Ziel, wenn die Maus über eine Linie oder einen Marker fährt
initMap.on("mouseover", function (e) {
if (e.layer instanceof L.Polyline || e.layer instanceof L.Marker) {
lastClickedTarget = e.layer; // Speichere das zuletzt überfahrene Element
}
});
// Kontextmenü-Event
initMap.on("contextmenu", function (e) {
const clickedTarget = lastClickedTarget || findNearestPolyline(initMap, e.latlng) || e.relatedTarget || e.layer; // Verwende entweder das zwischengespeicherte Ziel oder die nächstgelegene Linie
if (!clickedTarget) {
console.error("Kein gültiges Ziel im Kontextmenü");
return;
}
if (clickedTarget instanceof L.Polyline) {
console.log("ID der Linie (idLD):", clickedTarget.options.idLD);
// Das Kontextmenü wird nun geöffnet und beim Klicken wird `openInNewTab` ausgeführt
} else if (clickedTarget instanceof L.Marker) {
openInNewTab(e, clickedTarget);
} else {
console.error("Fehler: Ungültiges Ziel.");
}
});
initMap.whenReady(() => {
console.log("Karte ist jetzt bereit und initialisiert.");
addItemsToMapContextMenu(hasRights);