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

icons nur grün da und erstemal statische Farbe mit Level in createAndSetDevice.js

Browse Source
This commit is contained in:
ISA
2024-12-28 11:47:47 +01:00
parent 6f7c60d341
commit ee69f85734
174 changed files with 113 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

141
utils/createAndSetDevices.js
View File

@@ -1,110 +1,68 @@
// /utils/createAndSetDevices.js
import circleIcon from "../components/gisPolylines/icons/CircleIcon";
import { saveLineData, redrawPolyline } from "./mapUtils";
import L from "leaflet";
import "leaflet.smooth_marker_bouncing";
import { toast } from "react-toastify";
import * as config from "../config/config.js";
import { disablePolylineEvents, enablePolylineEvents } from "./setupPolylines"; // Importiere die Funktion zum Deaktivieren der Polyline-Ereignisse
import { setPolylineEventsDisabled } from "../redux/slices/polylineEventsDisabledSlice"; // Importiere den Recoil-Atom-Zustand
import { SERVER_URL } from "../config/urls.js";
import * as config from "../config/config.js";
// Funktion zum Bestimmen der Priorität basierend auf dem Icon-Pfad
const determinePriority = (iconPath, priorityConfig) => {
for (let priority of priorityConfig) {
if (iconPath.includes(priority.name.toLowerCase())) {
return priority.level;
}
}
return 5; // Standardpriorität (niedrigste)
// Funktion zur Bestimmung der Farbklasse basierend auf der Priorität
const getColorClass = (level) => {
if (level === 1) return "red";
if (level === 2) return "orange";
if (level === 3) return "yellow";
return "green"; // Standardfarbe
};
// Funktion zum Erstellen und Setzen von Markern
export const createAndSetDevices = async (systemId, setMarkersFunction, GisSystemStatic, priorityConfig) => {
try {
// Zähler für externe API-Aufrufe in localStorage speichern
let requestCount = localStorage.getItem("gisStationsStaticRequestCount-createDevice") || 0;
requestCount++;
localStorage.setItem("gisStationsStaticRequestCount-createDevice", requestCount);
//console.log(`config.mapGisStationsStaticDistrictUrl in createAndSetDevice wurde ${requestCount} Mal aufgerufen.`);
// Lade die statischen Daten
const response1 = await fetch(config.mapGisStationsStaticDistrictUrl);
const jsonResponse = await response1.json();
const response2 = await fetch(config.mapGisStationsStatusDistrictUrl);
const statusResponse = await response2.json();
const BASE_URL = SERVER_URL;
const getIdSystemAndAllowValueMap = new Map(GisSystemStatic.map((system) => [system.IdSystem, system.Allow]));
if (jsonResponse.Points && statusResponse.Statis) {
console.log("jsonResponse.Points: ", jsonResponse.Points);
console.log("statusResponse.Statis: ", statusResponse.Statis);
localStorage.setItem("jsonResponse.Points", JSON.stringify(jsonResponse.Points));
localStorage.setItem("statusResponse.Statis", JSON.stringify(statusResponse.Statis));
const statisMap = new Map(statusResponse.Statis.map((s) => [s.IdLD, s]));
let markersData = jsonResponse.Points.filter((station) => station.System === systemId && getIdSystemAndAllowValueMap.get(station.System) === 1).map((station) => {
const statis = statisMap.get(station.IdLD);
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 * (6 - priority); // Adjusted for simplicity and positive values
let markersData = jsonResponse.Points
.filter((station) => station.System === systemId && getIdSystemAndAllowValueMap.get(station.System) === 1)
.map((station) => {
const statis = statisMap.get(station.IdLD);
const marker = L.marker([station.X, station.Y], {
icon: L.icon({
iconUrl: iconPath,
iconSize: [25, 41],
iconAnchor: [12, 41],
popupAnchor: [1, -34],
}),
areaName: station.Area_Name, // Stelle sicher, dass dieser Bereich gesetzt wird
link: station.Link,
zIndexOffset: zIndexOffset,
});
// Priorität und Farbklasse bestimmen
const priorityConfigForStation = priorityConfig.find((p) => p.location_id === station.IdLD);
const level = priorityConfigForStation ? priorityConfigForStation.prio_level : 5; // Standardlevel
const colorClass = getColorClass(level); // Farbklasse ermitteln
// Deaktiviere Polyline-Ereignisse beim Überfahren des Markers
marker.on("mouseover", function () {
this.openPopup();
});
// Dynamische CSS-Filter verwenden
const marker = L.marker([station.X, station.Y], {
icon: L.divIcon({
className: `leaflet-marker-icon ${colorClass}`, // Dynamische CSS-Klasse für Filter
html: `<img src="img/icons/marker-icon-${station.Icon}.png" style="filter: hue-rotate(${level * 30}deg);" />`, // Dynamischer Filter
iconSize: [25, 41],
iconAnchor: [12, 41],
popupAnchor: [1, -34],
}),
zIndexOffset: 100 * (6 - level), // Z-Index nach Priorität
});
// Verwende das `contextmenu`-Ereignis für den Rechtsklick
// Popup-Info dynamisch erstellen
const statusInfo = statusResponse.Statis.filter((status) => status.IdLD === station.IdLD)
.reverse()
.map(
(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>
</div>
`
)
.join("");
marker.on("contextmenu", function (event) {
if (event && event.preventDefault) {
event.preventDefault(); // Verhindert das Standard-Kontextmenü
}
//setPolylineEventsDisabled(true);
//disablePolylineEvents(window.polylines);
this.openPopup();
});
document.addEventListener("mouseout", function (event) {
if (event.relatedTarget === null || event.relatedTarget.nodeName === "BODY") {
//setPolylineEventsDisabled(false);
enablePolylineEvents(window.polylines, window.lineColors);
}
});
marker.on("mouseout", function () {
this.closePopup();
});
// Überprüfe, ob die bounce-Funktion verfügbar ist und verwende sie
if (typeof marker.bounce === "function" && statis) {
marker.on("add", () => marker.bounce(3));
}
const statusInfo = statusResponse.Statis.filter((status) => status.IdLD === station.IdLD)
.reverse()
.map(
(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>
</div>
`
)
.join("");
marker.bindPopup(`
marker.bindPopup(`
<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>
@@ -114,12 +72,23 @@ export const createAndSetDevices = async (systemId, setMarkersFunction, GisSyste
</div>
`);
return marker;
});
// **Mouseover zeigt Popup**
marker.on("mouseover", function () {
this.openPopup();
});
// **Mouseout schließt Popup**
marker.on("mouseout", function () {
this.closePopup();
});
return marker;
});
setMarkersFunction(markersData);
}
} catch (error) {
console.error("Error fetching data: ", error);
console.error("Fehler beim Abrufen der Daten: ", error);
}
};