Manuell layerGroup anzeigen
This commit is contained in:
ISA
@@ -68,13 +68,10 @@ function DataSheet() {
|
||||
const [checkedStations, setCheckedStations] = useState({});
|
||||
|
||||
const handleCheckboxChange = (layerName) => {
|
||||
setCheckedStations((prev) => ({
|
||||
...prev,
|
||||
[layerName]: !prev[layerName],
|
||||
}));
|
||||
// Umschalten der Sichtbarkeit im Zustand
|
||||
setLayers((prevLayers) => ({
|
||||
...prevLayers,
|
||||
[layerName]: !prevLayers[layerName],
|
||||
[layerName]: !prevLayers[layerName], // Umschalten des Booleschen Werts
|
||||
}));
|
||||
};
|
||||
|
||||
@@ -121,7 +118,7 @@ function DataSheet() {
|
||||
type="checkbox"
|
||||
id={`box-${station.id}`}
|
||||
className="accent-blue-500 checked:bg-blue-500"
|
||||
checked={checkedStations[station.id] || false}
|
||||
checked={layers[station.name] || false} // Zustand von Recoil verwenden
|
||||
onChange={() => handleCheckboxChange(station.name)}
|
||||
/>
|
||||
<label
|
||||
|
||||
@@ -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)
|
||||
|
||||
@@ -5,20 +5,20 @@ export const mapLayersState = atom({
|
||||
key: "mapLayersState", // Eindeutiger Schlüssel für das Atom
|
||||
default: {
|
||||
// Standardwerte für jeden Layer
|
||||
TALAS: false,
|
||||
ECI: false,
|
||||
ULAF: false,
|
||||
GSMModem: false,
|
||||
CiscoRouter: false,
|
||||
WAGO: false,
|
||||
Siemens: false,
|
||||
OTDR: false,
|
||||
WDM: false,
|
||||
GMA: false,
|
||||
Messstellen: false,
|
||||
TALASICL: false,
|
||||
DAUZ: false,
|
||||
SMSFunkmodem: false,
|
||||
Sonstige: false,
|
||||
show_TALAS: false,
|
||||
show_ECI: false,
|
||||
show_ULAF: false,
|
||||
show_GSMModem: false,
|
||||
show_CiscoRouter: false,
|
||||
show_WAGO: false,
|
||||
show_Siemens: false,
|
||||
show_OTDR: false,
|
||||
show_WDM: false,
|
||||
show_GMA: false,
|
||||
show_Messstellen: false,
|
||||
show_TALASICL: false,
|
||||
show_DAUZ: false,
|
||||
show_SMSFunkmodem: false,
|
||||
show_Sonstige: false,
|
||||
},
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user