useEffect von Marker MySQL Datenbank und APIs in einzige useEffect
This commit is contained in:
@@ -279,14 +279,14 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
|
||||
}, [mapRef, map]); // Abhängigkeiten prüfen
|
||||
|
||||
// Marker hinzufügen von lokale MySQL Datenbank und nicht von APIs
|
||||
useEffect(() => {
|
||||
/* useEffect(() => {
|
||||
// Remove old markers
|
||||
if (map) {
|
||||
/* map.eachLayer((layer) => {
|
||||
map.eachLayer((layer) => {
|
||||
if (layer instanceof L.Marker) {
|
||||
map.removeLayer(layer);
|
||||
}
|
||||
}); */
|
||||
});
|
||||
|
||||
// Add new markers
|
||||
locations.forEach((location) => {
|
||||
@@ -302,10 +302,10 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
|
||||
id: location.idPoi,
|
||||
});
|
||||
|
||||
/* marker.bindPopup(
|
||||
marker.bindPopup(
|
||||
`<div class="bg-red-500 text-red p-2 translate-y-8"><b>${location.description || "Unbekannt"}</b><br>Type: ${location.idPoiTyp || "N/A"}<br>Lat: ${latitude.toFixed(5)}, Lng: ${longitude.toFixed(5)}</div>`,
|
||||
{ permanent: false, closeButton: true }
|
||||
); */
|
||||
);
|
||||
marker.bindTooltip(
|
||||
`<div class=" text-red p-2 "><b>${location.description || "Unbekannt"}</b><br>Type: ${location.idPoiTyp || "N/A"}<br>Lat: ${latitude.toFixed(5)}, Lng: ${longitude.toFixed(5)}</div>`,
|
||||
{ permanent: false, direction: "top", offset: [0, -30] }
|
||||
@@ -323,7 +323,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
|
||||
marker.addTo(map);
|
||||
});
|
||||
}
|
||||
}, [map, locations, onLocationUpdate]);
|
||||
}, [map, locations, onLocationUpdate]); */
|
||||
|
||||
//------------------------------------------
|
||||
function parsePoint(pointString) {
|
||||
@@ -549,7 +549,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
|
||||
// minor-marker-icon-23.png
|
||||
|
||||
// Marker hinzufügen für GisStationsStaticDistrict
|
||||
useEffect(() => {
|
||||
/* useEffect(() => {
|
||||
// Stellen Sie sicher, dass sowohl `map` als auch `oms` initialisiert sind
|
||||
if (!map || !oms) {
|
||||
console.error("Map or OMS is not initialized");
|
||||
@@ -668,22 +668,202 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
|
||||
${statusInfo}<br>
|
||||
`);
|
||||
let LocID = station.IdLocation;
|
||||
/* marker
|
||||
.bindTooltip(
|
||||
`<div class="bg-white text-black p-2 border border-gray-300 rounded shadow">${LocID}</div>`,
|
||||
{
|
||||
permanent: true,
|
||||
direction: "right",
|
||||
opacity: 0,
|
||||
offset: L.point({ x: 10, y: 0 }),
|
||||
}
|
||||
)
|
||||
.addTo(GMA); */
|
||||
|
||||
});
|
||||
|
||||
}, [map, oms, GisStationsStaticDistrict, GisStationsStatusDistrict]);
|
||||
|
||||
//------------------------------------------
|
||||
//------------------------------------------ */
|
||||
//------------------------------------------ */
|
||||
//useEffect zusammen von MySQL Daten bank und von APIs
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
const responses = await Promise.all([
|
||||
fetch(mapGisStationsStaticDistrictUrl),
|
||||
fetch(mapGisStationsStatusDistrictUrl),
|
||||
// Andere relevante API-Anfragen
|
||||
]);
|
||||
const data = await Promise.all(responses.map(res => res.json()));
|
||||
|
||||
if (data[0] && data[0].Points) {
|
||||
setGisStationsStaticDistrict(data[0].Points);
|
||||
} else {
|
||||
console.error('Daten für GisStationsStaticDistrict nicht gefunden');
|
||||
setGisStationsStaticDistrict([]);
|
||||
}
|
||||
|
||||
if (data[1] && data[1].Statis) {
|
||||
setGisStationsStatusDistrict(data[1].Statis);
|
||||
} else {
|
||||
console.error('Daten für GisStationsStatusDistrict nicht gefunden');
|
||||
setGisStationsStatusDistrict([]);
|
||||
}
|
||||
|
||||
// Weitere Datenverarbeitung...
|
||||
|
||||
} catch (error) {
|
||||
console.error("Fehler beim Laden der Daten: ", error);
|
||||
// Setzen Sie Zustände auf leere Arrays oder Fehlerzustände
|
||||
}
|
||||
};
|
||||
|
||||
fetchData();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (!map) return;
|
||||
map.eachLayer((layer) => {
|
||||
if (layer instanceof L.Marker) {
|
||||
map.removeLayer(layer);
|
||||
}
|
||||
});
|
||||
|
||||
// Marker für lokale MySQL-Daten
|
||||
locations.forEach((location) => {
|
||||
const { latitude, longitude } = parsePoint(location.position);
|
||||
const marker = L.marker([latitude, longitude], {
|
||||
icon: L.icon({
|
||||
iconUrl: "/location.svg",
|
||||
iconSize: [34, 34],
|
||||
iconAnchor: [17, 34],
|
||||
popupAnchor: [0, -34],
|
||||
}),
|
||||
draggable: true,
|
||||
id: location.idPoi,
|
||||
});
|
||||
|
||||
marker.bindPopup(
|
||||
`<div class="bg-red-500 text-red p-2 translate-y-8"><b>${location.description || "Unbekannt"}</b><br>Type: ${location.idPoiTyp || "N/A"}<br>Lat: ${latitude.toFixed(5)}, Lng: ${longitude.toFixed(5)}</div>`,
|
||||
{ permanent: false, closeButton: true }
|
||||
);
|
||||
marker.bindTooltip(
|
||||
`<div class=" text-red p-2 "><b>${location.description || "Unbekannt"}</b><br>Type: ${location.idPoiTyp || "N/A"}<br>Lat: ${latitude.toFixed(5)}, Lng: ${longitude.toFixed(5)}</div>`,
|
||||
{ permanent: false, direction: "top", offset: [0, -30] }
|
||||
);
|
||||
|
||||
marker.on("dragend", function (e) {
|
||||
const newLat = e.target.getLatLng().lat;
|
||||
const newLng = e.target.getLatLng().lng;
|
||||
const markerId = e.target.options.id;
|
||||
updateLocationInDatabase(markerId, newLat, newLng).then(() => {
|
||||
onLocationUpdate(markerId, newLat, newLng);
|
||||
});
|
||||
});
|
||||
|
||||
marker.addTo(map);
|
||||
});
|
||||
|
||||
// Marker für GisStationsStaticDistrict
|
||||
GisStationsStaticDistrict.forEach((station) => {
|
||||
// Filter für Statusobjekte dieser spezifischen Station
|
||||
const matchingStatuses = GisStationsStatusDistrict.filter(
|
||||
(status) => status.IdLD === station.IdLD
|
||||
);
|
||||
|
||||
const marker = L.marker([station.X, station.Y], {
|
||||
icon: L.icon({
|
||||
iconUrl: "default-icon.png", // Default, wird geändert
|
||||
iconSize: [25, 41],
|
||||
iconAnchor: [12, 41],
|
||||
popupAnchor: [1, -34],
|
||||
shadowSize: [41, 41],
|
||||
}),
|
||||
}).addTo(map);
|
||||
|
||||
// Popup beim Überfahren mit der Maus öffnen
|
||||
marker.on("mouseover", function (e) {
|
||||
this.openPopup();
|
||||
});
|
||||
|
||||
// Popup schließen, wenn die Maus den Marker verlässt
|
||||
marker.on("mouseout", function (e) {
|
||||
this.closePopup();
|
||||
});
|
||||
|
||||
// String-Zusammenstellung für das Popup-Infofenster
|
||||
let statusInfo = matchingStatuses
|
||||
.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} <span style="color: ${status.Co};">(${status.Na})</span>
|
||||
</div>
|
||||
`
|
||||
)
|
||||
.join("");
|
||||
|
||||
// Bestimmen des Icons basierend auf dem Status
|
||||
let iconPath = getIconPath(
|
||||
matchingStatuses[0]?.Na || "",
|
||||
station.Icon,
|
||||
marker
|
||||
);
|
||||
|
||||
marker.setIcon(
|
||||
L.icon({
|
||||
iconUrl: iconPath,
|
||||
iconSize: [25, 41],
|
||||
iconAnchor: [12, 41],
|
||||
popupAnchor: [1, -34],
|
||||
shadowSize: [41, 41],
|
||||
})
|
||||
);
|
||||
// Check if the icon path includes 'critical' and initiate bouncing
|
||||
if (
|
||||
iconPath.includes("critical") ||
|
||||
iconPath.includes("major") ||
|
||||
iconPath.includes("minor") ||
|
||||
iconPath.includes("system")
|
||||
) {
|
||||
marker.setBouncingOptions({
|
||||
bounceHeight: 15,
|
||||
contractHeight: 12,
|
||||
bounceSpeed: 52,
|
||||
contractSpeed: 52,
|
||||
shadowAngle: null,
|
||||
});
|
||||
marker.bounce(3);
|
||||
}
|
||||
// Prüfen, ob der Name der Station "GMA Littwin (TEST)" entspricht
|
||||
if (station.LD_Name === "GMA Littwin (TEST)") {
|
||||
marker.bindTooltip(
|
||||
`<div class="bg-white text-black p-2 border border-gray-300 rounded shadow">${station.Area_Name}</div>`,
|
||||
{
|
||||
permanent: true,
|
||||
direction: "right",
|
||||
opacity: 1, // Tooltip immer sichtbar
|
||||
offset: L.point({ x: 10, y: 0 }),
|
||||
}
|
||||
).addTo(GMA);
|
||||
} else {
|
||||
marker.bindTooltip(
|
||||
`<div class="bg-white text-black p-2 border border-gray-300 rounded shadow">${station.LD_Name}</div>`,
|
||||
{
|
||||
permanent: false,
|
||||
direction: "right",
|
||||
opacity: 0,
|
||||
offset: L.point({ x: 10, y: 0 }),
|
||||
}
|
||||
).addTo(GMA);
|
||||
}
|
||||
// Marker zu OMS und der Karte hinzufügen
|
||||
oms.addMarker(marker);
|
||||
marker.addTo(map).bindPopup(`
|
||||
<b>${station.LD_Name}</b><br>
|
||||
${station.Device}<br>
|
||||
${station.Area_Short} (${station.Area_Name})<br>
|
||||
${station.Location_Short} (${station.Location_Name})<br>
|
||||
${statusInfo}<br>
|
||||
`);
|
||||
let LocID = station.IdLocation;
|
||||
|
||||
});
|
||||
}, [map, locations, GisStationsStaticDistrict]); // Fügen Sie weitere Abhängigkeiten hinzu, falls erforderlich
|
||||
|
||||
|
||||
//------------------------------------------ */
|
||||
let uniqueIdLDsData = [];
|
||||
let Tooltip = [];
|
||||
|
||||
|
||||
Reference in New Issue
Block a user