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

fix: Koordinaten anzeigen in GMA Tooltip Kontextmenü

Browse Source
This commit is contained in:
ISA
2024-12-15 10:55:30 +01:00
parent 635f2b6aa9
commit db6240335c
1 changed files with 27 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
hooks/layers/useGmaMarkersLayer.js
View File

@@ -1,6 +1,5 @@
import { useEffect } from "react"; import { useEffect } from "react";
import { addContextMenuToMarker } from "../../utils/addContextMenuToMarker"; import { addContextMenuToMarker } from "../../utils/addContextMenuToMarker";
import { addItemsToMapContextMenu } from "../../components/useMapContextMenu"; // Importiere die Funktion
const useGmaMarkersLayer = (map, markers, GisStationsMeasurements, GMA, oms, isVisible) => { const useGmaMarkersLayer = (map, markers, GisStationsMeasurements, GMA, oms, isVisible) => {
const zoomIn = (map, latlng) => { const zoomIn = (map, latlng) => {
@@ -8,16 +7,15 @@ const useGmaMarkersLayer = (map, markers, GisStationsMeasurements, GMA, oms, isV
console.error("map is not defined in zoomIn"); console.error("map is not defined in zoomIn");
return; return;
} }
const currentZoom = map.getZoom(); const currentZoom = map.getZoom();
if (currentZoom < 14) { if (currentZoom < 14) {
map.flyTo(latlng, 14); map.flyTo(latlng, 14);
localStorage.setItem("mapZoom", 14); localStorage.setItem("mapZoom", 14);
localStorage.setItem("mapCenter", JSON.stringify(map.getCenter())); localStorage.setItem("mapCenter", JSON.stringify(map.getCenter()));
} }
}; };
const zoomOut = (map) => { const zoomOut = (map) => {
if (!map) { if (!map) {
@@ -47,9 +45,6 @@ const useGmaMarkersLayer = (map, markers, GisStationsMeasurements, GMA, oms, isV
localStorage.setItem("mapZoom", map.getZoom()); localStorage.setItem("mapZoom", map.getZoom());
localStorage.setItem("mapCenter", JSON.stringify(map.getCenter())); 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
useEffect(() => { useEffect(() => {
if (!map || !isVisible) return; if (!map || !isVisible) return;
@@ -100,6 +95,15 @@ const useGmaMarkersLayer = (map, markers, GisStationsMeasurements, GMA, oms, isV
} }
); );
let currentMouseLatLng = null;
const mouseMoveHandler = (event) => {
currentMouseLatLng = event.latlng;
};
// Mousemove-Listener hinzufügen, um die aktuellen Koordinaten zu speichern
map.on("mousemove", mouseMoveHandler);
marker.on("tooltipopen", (e) => { marker.on("tooltipopen", (e) => {
const tooltipElement = e.tooltip._contentNode; const tooltipElement = e.tooltip._contentNode;
@@ -108,7 +112,6 @@ const useGmaMarkersLayer = (map, markers, GisStationsMeasurements, GMA, oms, isV
event.preventDefault(); event.preventDefault();
console.log("Rechtsklick auf Tooltip erkannt"); console.log("Rechtsklick auf Tooltip erkannt");
// Kombiniere die Kontextmenü-Items
// Kombiniere die Kontextmenü-Items // Kombiniere die Kontextmenü-Items
const combinedContextMenuItems = [ const combinedContextMenuItems = [
{ {
@@ -116,7 +119,7 @@ const useGmaMarkersLayer = (map, markers, GisStationsMeasurements, GMA, oms, isV
icon: "/img/screen_new.png", icon: "/img/screen_new.png",
callback: () => { callback: () => {
if (marker.options.link) { if (marker.options.link) {
const fullUrl = `${baseUrl}${marker.options.link}`; const fullUrl = `${marker.options.link}`;
window.open(fullUrl, "_blank"); window.open(fullUrl, "_blank");
console.log("Link in neuem Tab geöffnet:", fullUrl); console.log("Link in neuem Tab geöffnet:", fullUrl);
} else { } else {
@@ -125,21 +128,25 @@ const useGmaMarkersLayer = (map, markers, GisStationsMeasurements, GMA, oms, isV
}, },
}, },
{ separator: true }, { separator: true },
//Koordinaten anzeigen auf den gesamte Tooltip fläche ist ein Wert, deswegen ausgeblendet {
/* {
text: "Koordinaten anzeigen", text: "Koordinaten anzeigen",
icon: "/img/not_listed_location.png", icon: "/img/not_listed_location.png",
callback: () => { callback: () => {
const latlng = marker.getLatLng(); // Hole die Koordinaten direkt vom Marker if (currentMouseLatLng) {
alert("Breitengrad: " + latlng.lat.toFixed(5) + "\nLängengrad: " + latlng.lng.toFixed(5)); alert(
`Breitengrad: ${currentMouseLatLng.lat.toFixed(5)}\nLängengrad: ${currentMouseLatLng.lng.toFixed(5)}`
);
} else {
console.error("Keine gültigen Koordinaten erkannt.");
}
}, },
}, */ },
{ separator: true }, { separator: true },
{ {
text: "Reinzoomen", text: "Reinzoomen",
icon: "img/zoom_in.png", icon: "img/zoom_in.png",
callback: () => { callback: () => {
const latlng = marker.getLatLng(); // Hole die Koordinaten direkt vom Marker const latlng = marker.getLatLng();
zoomIn(map, latlng); zoomIn(map, latlng);
}, },
}, },
@@ -152,7 +159,7 @@ const useGmaMarkersLayer = (map, markers, GisStationsMeasurements, GMA, oms, isV
text: "Hier zentrieren", text: "Hier zentrieren",
icon: "img/center_focus.png", icon: "img/center_focus.png",
callback: () => { callback: () => {
const latlng = marker.getLatLng(); // Hole die Koordinaten direkt vom Marker const latlng = marker.getLatLng();
centerHere({ latlng }, map); centerHere({ latlng }, map);
}, },
}, },
@@ -212,6 +219,10 @@ const useGmaMarkersLayer = (map, markers, GisStationsMeasurements, GMA, oms, isV
} }
}); });
marker.on("tooltipclose", () => {
map.off("mousemove", mouseMoveHandler);
});
addContextMenuToMarker(marker); addContextMenuToMarker(marker);
GMA.addLayer(marker); GMA.addLayer(marker);