From 4f154e262a487e021978ef2bcfe5162afdcc0c27 Mon Sep 17 00:00:00 2001 From: ISA Date: Thu, 12 Dec 2024 20:24:38 +0100 Subject: [PATCH] =?UTF-8?q?feat:=20dynamische=20ev.local=20und=20URL=20f?= =?UTF-8?q?=C3=BCr=20Karte,=20Karte=20ist=20lokal=20zugreifen=20ohne=20IP?= =?UTF-8?q?=20zu=20=C3=A4ndern=20auf=20verschiedene=20Server?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .env.local | 2 +- config/urls.js | 4 +- hooks/layers/useGmaMarkersLayer.js | 94 ++++++++++++++++++++++-------- 3 files changed, 74 insertions(+), 26 deletions(-) diff --git a/.env.local b/.env.local index 2350934c0..e37bc0865 100644 --- a/.env.local +++ b/.env.local @@ -6,7 +6,7 @@ DB_USER=root DB_PASSWORD="root#$" DB_NAME=talas_v5 DB_PORT=3306 -######################### Online Karte +######################### Karte die ist in /config/url.js #NEXT_PUBLIC_ONLINE_TILE_LAYER="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" ######################### Offline Karte #NEXT_PUBLIC_ONLINE_TILE_LAYER="http://127.0.0.1:3000/mapTiles/{z}/{x}/{y}.png" diff --git a/config/urls.js b/config/urls.js index 6cd72dfeb..a2778995a 100644 --- a/config/urls.js +++ b/config/urls.js @@ -12,7 +12,9 @@ if (typeof window !== "undefined") { SERVER_URL = originWithoutPort; // Dynamisch ermittelt, ohne Port PROXY_TARGET = `${originWithoutPort}:3000`; // Dynamisch für einen Proxy - OFFLINE_TILE_LAYER = "http://10.10.0.13:3000/mapTiles/{z}/{x}/{y}.png"; //Map von Talas_v5 Server + //OFFLINE_TILE_LAYER = "http://10.10.0.70:3000/mapTiles/{z}/{x}/{y}.png"; //Map von Talas_v5 Server + //OFFLINE_TILE_LAYER = "http://10.10.0.70/talas5/nodeMap/public/mapTiles/{z}/{x}/{y}.png"; //Map von Talas_v5 Server + OFFLINE_TILE_LAYER = `${originWithoutPort}/talas5/nodeMap/public/mapTiles/{z}/{x}/{y}.png`; //Map von Talas_v5 Server //OFFLINE_TILE_LAYER = `${originWithoutPort}:3000/mapTiles/{z}/{x}/{y}.png`; //OFFLINE_TILE_LAYER = `https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png`; MAP_TILES_LAYER = OFFLINE_TILE_LAYER; // Standardwert diff --git a/hooks/layers/useGmaMarkersLayer.js b/hooks/layers/useGmaMarkersLayer.js index 95faf8e6e..1597f90d9 100644 --- a/hooks/layers/useGmaMarkersLayer.js +++ b/hooks/layers/useGmaMarkersLayer.js @@ -3,6 +3,49 @@ import { addContextMenuToMarker } from "../../utils/addContextMenuToMarker"; import { addItemsToMapContextMenu } from "../../components/useMapContextMenu"; // Importiere die Funktion const useGmaMarkersLayer = (map, markers, GisStationsMeasurements, GMA, oms, isVisible) => { + const zoomIn = (e, map) => { + if (!map) { + console.error("map is not defined in zoomIn"); + return; + } + + const currentZoom = map.getZoom(); + + if (currentZoom < 14) { + map.flyTo(e.latlng, 14); + localStorage.setItem("mapZoom", 16); + localStorage.setItem("mapCenter", JSON.stringify(map.getCenter())); + } + }; + + const zoomOut = (map) => { + if (!map) { + console.error("map is not defined in zoomOut"); + return; + } + + const currentZoom = map.getZoom(); + + if (currentZoom > 7) { + const x = 51.41321407879154; + const y = 7.739617925303934; + const zoom = 7; + + map.flyTo([x, y], zoom); + localStorage.setItem("mapZoom", zoom); + localStorage.setItem("mapCenter", JSON.stringify(map.getCenter())); + } + }; + + const centerHere = (e, map) => { + if (!map) { + console.error("map is not defined in centerHere"); + return; + } + map.panTo(e.latlng); + localStorage.setItem("mapZoom", map.getZoom()); + localStorage.setItem("mapCenter", JSON.stringify(map.getCenter())); + }; const protocol = window.location.protocol; // Holt das Protokoll (z.B. http oder https) const hostname = window.location.hostname; // Holt den Hostnamen (z.B. 10.10.0.70) const baseUrl = `${protocol}//${hostname}/talas5/devices/`; // Basis-URL zusammenstellen @@ -64,6 +107,7 @@ const useGmaMarkersLayer = (map, markers, GisStationsMeasurements, GMA, oms, isV event.preventDefault(); console.log("Rechtsklick auf Tooltip erkannt"); + // Kombiniere die Kontextmenü-Items // Kombiniere die Kontextmenü-Items const combinedContextMenuItems = [ { @@ -80,32 +124,34 @@ const useGmaMarkersLayer = (map, markers, GisStationsMeasurements, GMA, oms, isV }, }, { separator: true }, - // Füge zusätzliche Items hinzu - ...[ - { - text: "Koordinaten anzeigen", - icon: "/img/not_listed_location.png", - callback: (e) => { - alert("Breitengrad: " + e.latlng.lat.toFixed(5) + "\nLängengrad: " + e.latlng.lng.toFixed(5)); - }, + //Koordinaten anzeigen auf den gesamte Tooltip fläche ist ein Wert, deswegen ausgeblendet + /* { + text: "Koordinaten anzeigen", + icon: "/img/not_listed_location.png", + callback: () => { + const latlng = marker.getLatLng(); // Hole die Koordinaten direkt vom Marker + alert("Breitengrad: " + latlng.lat.toFixed(5) + "\nLängengrad: " + latlng.lng.toFixed(5)); }, - { separator: true }, - { - text: "Reinzoomen", - icon: "img/zoom_in.png", - callback: () => map.zoomIn(), + }, */ + { separator: true }, + { + text: "Reinzoomen", + icon: "img/zoom_in.png", + callback: () => zoomIn(map), + }, + { + text: "Rauszoomen", + icon: "img/zoom_out.png", + callback: () => zoomOut(map), + }, + { + text: "Hier zentrieren", + icon: "img/center_focus.png", + callback: () => { + const latlng = marker.getLatLng(); // Hole die Koordinaten direkt vom Marker + centerHere({ latlng }, map); }, - { - text: "Rauszoomen", - icon: "img/zoom_out.png", - callback: () => map.zoomOut(), - }, - { - text: "Hier zentrieren", - icon: "img/center_focus.png", - callback: (e) => map.panTo(e.latlng), - }, - ], + }, ]; // Benutzerdefiniertes Kontextmenü anzeigen