Manuell layerGroup anzeigen
This commit is contained in:
ISA
@@ -906,156 +906,143 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
|
||||
map.removeLayer(marker);
|
||||
});
|
||||
}, [map, locations, GisStationsStaticDistrict]); // Fügen Sie weitere Abhängigkeiten hinzu, falls erforderlich
|
||||
|
||||
|
||||
//-------------------------------------------------------------------------------------------------------------------------
|
||||
//GMA Layer
|
||||
const [layerGMA, setLayerGMA] = useState([]);
|
||||
const [showGMA, setShowGMA] = useState(false);
|
||||
useEffect(() => {
|
||||
if (!map || !GisStationsStaticDistrict) return;
|
||||
|
||||
|
||||
// Clear existing markers to prevent duplicates
|
||||
GMA.clearLayers();
|
||||
|
||||
|
||||
// Wenn nicht schon vorhanden, erstellen Sie eine Instanz von OverlappingMarkerSpiderfier
|
||||
if (!oms) {
|
||||
setOms(new OverlappingMarkerSpiderfier(map, {
|
||||
// Konfigurationen für OverlappingMarkerSpiderfier
|
||||
keepSpiderfied: true
|
||||
}));
|
||||
setOms(
|
||||
new OverlappingMarkerSpiderfier(map, {
|
||||
// Konfigurationen für OverlappingMarkerSpiderfier
|
||||
keepSpiderfied: true,
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
GisStationsStaticDistrict.forEach(station => {
|
||||
|
||||
GisStationsStaticDistrict.forEach((station) => {
|
||||
if (parseInt(station.System) === 11) {
|
||||
const icon = L.icon({
|
||||
iconUrl: `TileMap/img/icons/marker-icon-${station.Icon}.png`,
|
||||
iconSize: [25, 41],
|
||||
iconAnchor: [12, 41] // iconAnchor set to the tip of the icon
|
||||
iconAnchor: [12, 41], // iconAnchor set to the tip of the icon
|
||||
});
|
||||
|
||||
|
||||
const marker = L.marker([station.X, station.Y], { icon });
|
||||
|
||||
|
||||
// Hier fügen wir den Marker sowohl zum Layer als auch zu OverlappingMarkerSpiderfier hinzu
|
||||
marker.addTo(GMA);
|
||||
oms.addMarker(marker);
|
||||
|
||||
|
||||
// Adjust the popup anchor based on your icon's appearance
|
||||
marker.bindPopup(`
|
||||
marker.bindPopup(
|
||||
`
|
||||
<b>${station.LD_Name}</b><br>
|
||||
${station.Device}<br>
|
||||
${station.Area_Short} (${station.Area_Name})<br>
|
||||
${station.Location_Short} (${station.Location_Name})<br>
|
||||
`, {
|
||||
offset: L.point(0, -20),
|
||||
autoClose: false
|
||||
});
|
||||
|
||||
`,
|
||||
{
|
||||
offset: L.point(0, -20),
|
||||
autoClose: false,
|
||||
}
|
||||
);
|
||||
|
||||
// Events for mouse interactions
|
||||
marker.on('mouseover', () => marker.openPopup());
|
||||
marker.on('mouseout', () => marker.closePopup());
|
||||
marker.on("mouseover", () => marker.openPopup());
|
||||
marker.on("mouseout", () => marker.closePopup());
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// Hier fügen wir den Layer zur Karte hinzu, nachdem alle Marker hinzugefügt wurden
|
||||
TALAS.addTo(map);
|
||||
//GMA.addTo(map);
|
||||
if (!map) return;
|
||||
if (showGMA) {
|
||||
GMA.addTo(map);
|
||||
} else {
|
||||
GMA.remove();
|
||||
}
|
||||
setLayerGMA(GMA);
|
||||
console.log("layerGMA:", layerGMA);
|
||||
|
||||
//console.log("layerGMA:", layerGMA);
|
||||
console.log("GMA layerGroup:", GMA);
|
||||
}, [map, GisStationsStaticDistrict, oms]);
|
||||
//---------------------------------------------------------------------------------
|
||||
//---------------------------------------------------------------------------------
|
||||
//-------------------------------------------------------------------------------------------------------------------------
|
||||
//TALAS Layer
|
||||
const [layerTALAS, setLayerTALAS] = useState([]);
|
||||
const [showTALAS, setShowTALAS] = useState(false);
|
||||
useEffect(() => {
|
||||
if (!map || !GisStationsStaticDistrict) return;
|
||||
|
||||
|
||||
// Clear existing markers to prevent duplicates
|
||||
TALAS.clearLayers();
|
||||
|
||||
|
||||
// Wenn nicht schon vorhanden, erstellen Sie eine Instanz von OverlappingMarkerSpiderfier
|
||||
if (!oms) {
|
||||
setOms(new OverlappingMarkerSpiderfier(map, {
|
||||
// Konfigurationen für OverlappingMarkerSpiderfier
|
||||
keepSpiderfied: true
|
||||
}));
|
||||
setOms(
|
||||
new OverlappingMarkerSpiderfier(map, {
|
||||
// Konfigurationen für OverlappingMarkerSpiderfier
|
||||
keepSpiderfied: true,
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
GisStationsStaticDistrict.forEach(station => {
|
||||
|
||||
GisStationsStaticDistrict.forEach((station) => {
|
||||
if (parseInt(station.System) === 1) {
|
||||
const icon = L.icon({
|
||||
iconUrl: `TileMap/img/icons/marker-icon-${station.Icon}.png`,
|
||||
iconSize: [25, 41],
|
||||
iconAnchor: [12, 41] // iconAnchor set to the tip of the icon
|
||||
iconAnchor: [12, 41], // iconAnchor set to the tip of the icon
|
||||
});
|
||||
|
||||
|
||||
const marker = L.marker([station.X, station.Y], { icon });
|
||||
|
||||
|
||||
// Hier fügen wir den Marker sowohl zum Layer als auch zu OverlappingMarkerSpiderfier hinzu
|
||||
marker.addTo(TALAS);
|
||||
oms.addMarker(marker);
|
||||
|
||||
|
||||
// Adjust the popup anchor based on your icon's appearance
|
||||
marker.bindPopup(`
|
||||
marker.bindPopup(
|
||||
`
|
||||
<b>${station.LD_Name}</b><br>
|
||||
${station.Device}<br>
|
||||
${station.Area_Short} (${station.Area_Name})<br>
|
||||
${station.Location_Short} (${station.Location_Name})<br>
|
||||
`, {
|
||||
offset: L.point(0, -20),
|
||||
autoClose: false
|
||||
});
|
||||
|
||||
`,
|
||||
{
|
||||
offset: L.point(0, -20),
|
||||
autoClose: false,
|
||||
}
|
||||
);
|
||||
|
||||
// Events for mouse interactions
|
||||
marker.on('mouseover', () => marker.openPopup());
|
||||
marker.on('mouseout', () => marker.closePopup());
|
||||
marker.on("mouseover", () => marker.openPopup());
|
||||
marker.on("mouseout", () => marker.closePopup());
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// Hier fügen wir den Layer zur Karte hinzu, nachdem alle Marker hinzugefügt wurden
|
||||
TALAS.addTo(map);
|
||||
//TALAS.addTo(map);
|
||||
if (showTALAS) {
|
||||
TALAS.addTo(map);
|
||||
} else {
|
||||
console.log("Removing TALAS from map");
|
||||
TALAS.remove();
|
||||
}
|
||||
setLayerTALAS(TALAS);
|
||||
console.log("layerTALAS:", layerTALAS);
|
||||
|
||||
}, [map, GisStationsStaticDistrict, oms]);
|
||||
//---------------------------------------------------------------------------------
|
||||
const [activeLayer, setActiveLayer] = useState(null);
|
||||
useEffect(() => {
|
||||
if (!map) return;
|
||||
|
||||
// Erstelle eine Funktion, um alle Layer zu entfernen
|
||||
const removeLayers = () => {
|
||||
[TALAS, ECI, ULAF, GSMModem, CiscoRouter, WAGO, Siemens, OTDR, WDM, GMA, Sonstige, TALASICL].forEach(layer => {
|
||||
if (map.hasLayer(layer)) {
|
||||
map.removeLayer(layer);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// Entferne alle Layer zuerst
|
||||
removeLayers();
|
||||
|
||||
// Füge nur den aktiven Layer hinzu, wenn er definiert ist
|
||||
if (activeLayer && map.hasLayer(activeLayer) === false) {
|
||||
activeLayer.addTo(map);
|
||||
}
|
||||
}, [activeLayer, map]); // Abhängigkeiten von activeLayer und map
|
||||
|
||||
useEffect(() => {
|
||||
// Setze TALAS als aktiven Layer, wenn die entsprechenden Daten geladen sind
|
||||
if (GisStationsStaticDistrict.length > 0) {
|
||||
setActiveLayer(TALAS); // Diese Funktion aktualisiert den aktiven Layer, der dann im anderen useEffect behandelt wird
|
||||
setActiveLayer(GMA);
|
||||
}
|
||||
}, [GisStationsStaticDistrict]); // Reagiere auf Änderungen in GisStationsStaticDistrict
|
||||
|
||||
|
||||
// Verwenden von Systemdaten zur Aktualisierung der LayerGroup-----------3
|
||||
useEffect(() => {
|
||||
console.log("Verarbeitung der talasSystem-Daten:", layerTALAS);
|
||||
// Hier könnten Sie Ihre Leaflet LayerGroup-Aktionen ausführen
|
||||
}, [layerTALAS,layerGMA]);
|
||||
//console.log("layerTALAS:", layerTALAS);
|
||||
console.log("TALAS layerGroup:", TALAS);
|
||||
}, [map, GisStationsStaticDistrict, oms, showTALAS]);
|
||||
//---------------------------------------------------------------------------------
|
||||
|
||||
//console.log("GisStationsStatusDistrict:", GisStationsStatusDistrict);
|
||||
|
||||
//------------------------------------------
|
||||
/* useEffect(() => {
|
||||
if (!map || !GisStationsStaticDistrict.length || !GisSystemStatic.length)
|
||||
|
||||
Reference in New Issue
Block a user