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

fix: zIndexOffset-Berechnung angepasst, um Marker-Priorität zu verbessern

Browse Source 
- zIndexOffset in `createAndSetDevices` von `100 * (5 - priority)` auf `100 * (6 - priority)` geändert.
- Dadurch erhalten Marker mit höherer Priorität einen größeren zIndex-Wert.
- Problem gelöst, bei dem POI-Marker von anderen Layern oder Markern überlagert wurden.
- Logik angepasst, um die Sichtbarkeit und Priorisierung der Marker zu stabilisieren.
This commit is contained in:
ISA
2024-12-04 12:57:04 +01:00
parent b765ef6e6a
commit c62659ba4c
4 changed files with 4 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
.env.local
View File

@@ -28,7 +28,7 @@ DB_PORT=3306
#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="http://127.0.0.1:3000/mapTiles/{z}/{x}/{y}.png"
#NEXT_PUBLIC_ONLINE_TILE_LAYER="http://127.0.0.1:3000/mapTiles/{z}/{x}/{y}.png"
#########################
#DB_HOST=192.168.10.168
@@ -44,4 +44,4 @@ NEXT_PUBLIC_ONLINE_TILE_LAYER="http://127.0.0.1:3000/mapTiles/{z}/{x}/{y}.png"
#NEXT_PUBLIC_ONLINE_TILE_LAYER="http://192.168.10.14:3000/mapTiles/{z}/{x}/{y}.png"
######################### online
#NEXT_PUBLIC_ONLINE_TILE_LAYER="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
NEXT_PUBLIC_ONLINE_TILE_LAYER="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"

1
components/PoiUtils.js
View File

@@ -1,3 +1,4 @@
//components/PoiUtils.js
import L from "leaflet";
// Funktion, um POI Markers zu erstellen

102
hooks/layers/useTalasMarkers.js
View File

@@ -1,102 +0,0 @@
// /hooks/useTalasMarkers.js
import { useEffect, useState } from "react";
import L from "leaflet";
import "leaflet-contextmenu";
import { useRecoilValue } from "recoil";
import { mapLayersState } from "../../store/atoms/mapLayersState.js";
import { selectedAreaState } from "../../store/atoms/selectedAreaState.js";
import { zoomTriggerState } from "../../store/atoms/zoomTriggerState.js";
import { addContextMenuToMarker } from "../../utils/addContextMenuToMarker.js";
import { checkOverlappingMarkers } from "../../utils/mapUtils.js";
import plusRoundIcon from "../../components/PlusRoundIcon.js";
import { gisStationsStaticDistrictState } from "../../store/atoms/gisStationState.js";
const useTalasMarkers = (map, oms, layers, priorityConfig) => {
const [talasMarkers, setTalasMarkers] = useState([]);
const mapLayersVisibility = useRecoilValue(mapLayersState);
const selectedArea = useRecoilValue(selectedAreaState);
const zoomTrigger = useRecoilValue(zoomTriggerState);
const GisStationsStaticDistrict = useRecoilValue(gisStationsStaticDistrictState);
// Funktion zum Erstellen und Setzen der Marker
const createAndSetDevices = (systemId, setMarkers, GisSystemStatic, priorityConfig) => {
const markers = GisSystemStatic.filter((station) => station.System === systemId).map((station) => {
const marker = L.marker([station.Latitude, station.Longitude], {
title: station.Name,
contextmenu: true,
contextmenuItems: [],
});
marker.bindPopup(`<b>${station.Name}</b><br>${station.Description}`);
if (priorityConfig.includes(station.Priority)) {
marker.setIcon(
L.icon({
iconUrl: `/icons/priority_${station.Priority}.png`,
iconSize: [25, 41],
iconAnchor: [12, 41],
popupAnchor: [1, -34],
})
);
}
return marker;
});
setMarkers(markers);
};
useEffect(() => {
if (map && talasMarkers.length) {
talasMarkers.forEach((marker) => {
marker.addTo(map);
oms.addMarker(marker);
marker.on("mouseover", function () {
this.openPopup();
});
marker.on("mouseout", function () {
this.closePopup();
});
addContextMenuToMarker(marker);
});
map.addLayer(layers.TALAS);
checkOverlappingMarkers(oms, map, plusRoundIcon);
}
}, [map, talasMarkers]);
useEffect(() => {
if (!map || !talasMarkers) return;
const toggleLayer = (isVisible) => {
if (isVisible) {
talasMarkers.forEach((marker) => marker.addTo(map));
} else {
talasMarkers.forEach((marker) => map.removeLayer(marker));
}
};
toggleLayer(mapLayersVisibility.TALAS);
}, [map, talasMarkers, mapLayersVisibility.TALAS]);
useEffect(() => {
if (selectedArea && map) {
const station = GisStationsStaticDistrict.find((s) => s.Area_Name === selectedArea);
if (station) {
map.flyTo([station.X, station.Y], 14);
}
}
}, [selectedArea, map, GisStationsStaticDistrict]);
useEffect(() => {
if (zoomTrigger && map) {
map.flyTo([51.41321407879154, 7.739617925303934], 7);
}
}, [zoomTrigger, map]);
return [talasMarkers, setTalasMarkers, createAndSetDevices];
};
export default useTalasMarkers;

2
utils/createAndSetDevices.js
View File

@@ -47,7 +47,7 @@ export const createAndSetDevices = async (systemId, setMarkersFunction, GisSyste
const iconPath = statis ? `img/icons/${statis.Na}-marker-icon-${station.Icon}.png` : `img/icons/marker-icon-${station.Icon}.png`;
const priority = determinePriority(iconPath, priorityConfig);
const zIndexOffset = 100 * (5 - priority); // Adjusted for simplicity and positive values
const zIndexOffset = 100 * (6 - priority); // Adjusted for simplicity and positive values
const marker = L.marker([station.X, station.Y], {
icon: L.icon({