fix: Marker-Duplikate & Spiderfy repariert | version 1.1.230

This commit is contained in:
ISA
2025-06-04 08:23:55 +02:00
parent 66afc1cee7
commit 569790d35f
6 changed files with 273 additions and 174 deletions

View File

@@ -1,12 +1,12 @@
// /utils/devices/createAndSetDevices.js
import L from "leaflet";
import "leaflet.smooth_marker_bouncing";
import { store } from "../../redux/store.js";
import { setSelectedDevice } from "../../redux/slices/selectedDeviceSlice.js";
import { selectGisStationsStaticDistrict } from "../../redux/slices/webservice/gisStationsStaticDistrictSlice.js";
import { selectGisStationsStatusDistrict } from "../../redux/slices/webservice/gisStationsStatusDistrictSlice.js";
import { selectGisStationsMeasurements } from "../../redux/slices/webservice/gisStationsMeasurementsSlice.js";
import { addContextMenuToMarker } from "../../utils/contextMenuUtils";
import { store } from "@/redux/store.js";
import { setSelectedDevice } from "@/redux/slices/selectedDeviceSlice.js";
import { selectGisStationsStaticDistrict } from "@/redux/slices/webservice/gisStationsStaticDistrictSlice.js";
import { selectGisStationsStatusDistrict } from "@/redux/slices/webservice/gisStationsStatusDistrictSlice.js";
import { selectGisStationsMeasurements } from "@/redux/slices/webservice/gisStationsMeasurementsSlice.js";
import { addContextMenuToMarker } from "@/utils/contextMenuUtils";
const determinePriority = (iconPath, priorityConfig) => {
for (let priority of priorityConfig) {
@@ -17,7 +17,14 @@ const determinePriority = (iconPath, priorityConfig) => {
return 5;
};
export const createAndSetDevices = async (systemId, setMarkersFunction, GisSystemStatic, priorityConfig, measurements) => {
export const createAndSetDevices = async (
systemId,
setMarkersFunction,
GisSystemStatic,
priorityConfig,
measurements,
oms // 🔁 OMS für Spiderfy hinzugefügt
) => {
const basePath = process.env.NEXT_PUBLIC_BASE_PATH || "";
try {
@@ -28,20 +35,24 @@ export const createAndSetDevices = async (systemId, setMarkersFunction, GisSyste
if (!staticDistrictData?.Points?.length || !statusDistrictData?.length) return;
const statisMap = new Map(statusDistrictData.map((s) => [s.IdLD, s]));
const statisMap = new Map(statusDistrictData.map(s => [s.IdLD, s]));
const measurementsMap = new Map();
measurementData?.forEach((m) => {
measurementData?.forEach(m => {
if (!measurementsMap.has(m.IdLD)) {
measurementsMap.set(m.IdLD, m);
}
});
const activeStations = staticDistrictData.Points.filter((station) => station.System === systemId && station.Active === 1);
const activeStations = staticDistrictData.Points.filter(
station => station.System === systemId && station.Active === 1
);
const markersData = activeStations.map((station) => {
const markersData = activeStations.map(station => {
const statis = statisMap.get(station.IdLD);
const messung = measurementsMap.get(station.IdLD);
const iconPath = statis ? `img/icons/${statis.Na}-marker-icon-${station.Icon}.png` : `img/icons/marker-icon-${station.Icon}.png`;
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);
@@ -60,19 +71,23 @@ export const createAndSetDevices = async (systemId, setMarkersFunction, GisSyste
idDevice: station.IdLD,
});
// ✅ Popups nur für Statusdaten
// ✅ Popup
let popupContent = `
<div class="bg-white rounded-lg">
<span class="text-lg font-semibold text-gray-900">${station.LD_Name}</span>
<span class="text-md font-bold text-gray-800">${station.Device}</span><br>
<span class="text-gray-800"><strong>${station.Area_Short}</strong> (${station.Area_Name})</span><br>
<span class="text-gray-800"><strong>${station.Location_Short}</strong> (${station.Location_Name})</span>
<span class="text-gray-800"><strong>${station.Area_Short}</strong> (${
station.Area_Name
})</span><br>
<span class="text-gray-800"><strong>${station.Location_Short}</strong> (${
station.Location_Name
})</span>
<div class="mt-2">
${statusDistrictData
.filter((status) => status.IdLD === station.IdLD)
.filter(status => status.IdLD === station.IdLD)
.reverse()
.map(
(status) => `
status => `
<div class="flex items-center my-1">
<div class="w-2 h-2 mr-2 inline-block rounded-full" style="background-color: ${status.Co};"></div>
${status.Me}&nbsp;<span style="color: ${status.Co};">(${status.Na})</span>
@@ -81,9 +96,10 @@ export const createAndSetDevices = async (systemId, setMarkersFunction, GisSyste
.join("")}
</div>
</div>`;
marker.bindPopup(popupContent);
// ✅ Tooltip im GMA-Stil mit Messwerten
// ✅ Tooltip (nur für System 11)
if (station.System === 11 && messung) {
const lt = messung["LT"] ?? "-";
const fbt = messung["FBT"] ?? "-";
@@ -132,6 +148,11 @@ export const createAndSetDevices = async (systemId, setMarkersFunction, GisSyste
addContextMenuToMarker(marker);
// ✅ OverlappingMarkerSpiderfier hinzufügen
if (oms) {
oms.addMarker(marker);
}
return marker;
});