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

Manuell layerGroup anzeigen

Browse Source
This commit is contained in:
ISA
2024-04-23 08:17:58 +02:00
parent a33efd44f7
commit 0ca9db9374
3 changed files with 94 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
components/DataSheet.js
View File

@@ -68,13 +68,10 @@ function DataSheet() {
const [checkedStations, setCheckedStations] = useState({}); const [checkedStations, setCheckedStations] = useState({});
const handleCheckboxChange = (layerName) => { const handleCheckboxChange = (layerName) => {
setCheckedStations((prev) => ({ // Umschalten der Sichtbarkeit im Zustand
...prev,
[layerName]: !prev[layerName],
}));
setLayers((prevLayers) => ({ setLayers((prevLayers) => ({
...prevLayers, ...prevLayers,
[layerName]: !prevLayers[layerName], [layerName]: !prevLayers[layerName], // Umschalten des Booleschen Werts
})); }));
}; };
@@ -121,7 +118,7 @@ function DataSheet() {
type="checkbox" type="checkbox"
id={`box-${station.id}`} id={`box-${station.id}`}
className="accent-blue-500 checked:bg-blue-500" 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)} onChange={() => handleCheckboxChange(station.name)}
/> />
<label <label

165
components/MapComponent.js
View File

@@ -906,156 +906,143 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
map.removeLayer(marker); map.removeLayer(marker);
}); });
}, [map, locations, GisStationsStaticDistrict]); // Fügen Sie weitere Abhängigkeiten hinzu, falls erforderlich }, [map, locations, GisStationsStaticDistrict]); // Fügen Sie weitere Abhängigkeiten hinzu, falls erforderlich
//------------------------------------------------------------------------------------------------------------------------- //-------------------------------------------------------------------------------------------------------------------------
//GMA Layer //GMA Layer
const [layerGMA, setLayerGMA] = useState([]); const [layerGMA, setLayerGMA] = useState([]);
const [showGMA, setShowGMA] = useState(false);
useEffect(() => { useEffect(() => {
if (!map || !GisStationsStaticDistrict) return; if (!map || !GisStationsStaticDistrict) return;
// Clear existing markers to prevent duplicates // Clear existing markers to prevent duplicates
GMA.clearLayers(); GMA.clearLayers();
// Wenn nicht schon vorhanden, erstellen Sie eine Instanz von OverlappingMarkerSpiderfier // Wenn nicht schon vorhanden, erstellen Sie eine Instanz von OverlappingMarkerSpiderfier
if (!oms) { if (!oms) {
setOms(new OverlappingMarkerSpiderfier(map, { setOms(
// Konfigurationen für OverlappingMarkerSpiderfier new OverlappingMarkerSpiderfier(map, {
keepSpiderfied: true // Konfigurationen für OverlappingMarkerSpiderfier
})); keepSpiderfied: true,
})
);
} }
GisStationsStaticDistrict.forEach(station => { GisStationsStaticDistrict.forEach((station) => {
if (parseInt(station.System) === 11) { if (parseInt(station.System) === 11) {
const icon = L.icon({ const icon = L.icon({
iconUrl: `TileMap/img/icons/marker-icon-${station.Icon}.png`, iconUrl: `TileMap/img/icons/marker-icon-${station.Icon}.png`,
iconSize: [25, 41], 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 }); const marker = L.marker([station.X, station.Y], { icon });
// Hier fügen wir den Marker sowohl zum Layer als auch zu OverlappingMarkerSpiderfier hinzu // Hier fügen wir den Marker sowohl zum Layer als auch zu OverlappingMarkerSpiderfier hinzu
marker.addTo(GMA); marker.addTo(GMA);
oms.addMarker(marker); oms.addMarker(marker);
// Adjust the popup anchor based on your icon's appearance // Adjust the popup anchor based on your icon's appearance
marker.bindPopup(` marker.bindPopup(
`
<b>${station.LD_Name}</b><br> <b>${station.LD_Name}</b><br>
${station.Device}<br> ${station.Device}<br>
${station.Area_Short} (${station.Area_Name})<br> ${station.Area_Short} (${station.Area_Name})<br>
${station.Location_Short} (${station.Location_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 // Events for mouse interactions
marker.on('mouseover', () => marker.openPopup()); marker.on("mouseover", () => marker.openPopup());
marker.on('mouseout', () => marker.closePopup()); marker.on("mouseout", () => marker.closePopup());
} }
}); });
// Hier fügen wir den Layer zur Karte hinzu, nachdem alle Marker hinzugefügt wurden // 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); setLayerGMA(GMA);
console.log("layerGMA:", layerGMA); //console.log("layerGMA:", layerGMA);
console.log("GMA layerGroup:", GMA);
}, [map, GisStationsStaticDistrict, oms]); }, [map, GisStationsStaticDistrict, oms]);
//--------------------------------------------------------------------------------- //---------------------------------------------------------------------------------
//------------------------------------------------------------------------------------------------------------------------- //-------------------------------------------------------------------------------------------------------------------------
//TALAS Layer //TALAS Layer
const [layerTALAS, setLayerTALAS] = useState([]); const [layerTALAS, setLayerTALAS] = useState([]);
const [showTALAS, setShowTALAS] = useState(false);
useEffect(() => { useEffect(() => {
if (!map || !GisStationsStaticDistrict) return; if (!map || !GisStationsStaticDistrict) return;
// Clear existing markers to prevent duplicates // Clear existing markers to prevent duplicates
TALAS.clearLayers(); TALAS.clearLayers();
// Wenn nicht schon vorhanden, erstellen Sie eine Instanz von OverlappingMarkerSpiderfier // Wenn nicht schon vorhanden, erstellen Sie eine Instanz von OverlappingMarkerSpiderfier
if (!oms) { if (!oms) {
setOms(new OverlappingMarkerSpiderfier(map, { setOms(
// Konfigurationen für OverlappingMarkerSpiderfier new OverlappingMarkerSpiderfier(map, {
keepSpiderfied: true // Konfigurationen für OverlappingMarkerSpiderfier
})); keepSpiderfied: true,
})
);
} }
GisStationsStaticDistrict.forEach(station => { GisStationsStaticDistrict.forEach((station) => {
if (parseInt(station.System) === 1) { if (parseInt(station.System) === 1) {
const icon = L.icon({ const icon = L.icon({
iconUrl: `TileMap/img/icons/marker-icon-${station.Icon}.png`, iconUrl: `TileMap/img/icons/marker-icon-${station.Icon}.png`,
iconSize: [25, 41], 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 }); const marker = L.marker([station.X, station.Y], { icon });
// Hier fügen wir den Marker sowohl zum Layer als auch zu OverlappingMarkerSpiderfier hinzu // Hier fügen wir den Marker sowohl zum Layer als auch zu OverlappingMarkerSpiderfier hinzu
marker.addTo(TALAS); marker.addTo(TALAS);
oms.addMarker(marker); oms.addMarker(marker);
// Adjust the popup anchor based on your icon's appearance // Adjust the popup anchor based on your icon's appearance
marker.bindPopup(` marker.bindPopup(
`
<b>${station.LD_Name}</b><br> <b>${station.LD_Name}</b><br>
${station.Device}<br> ${station.Device}<br>
${station.Area_Short} (${station.Area_Name})<br> ${station.Area_Short} (${station.Area_Name})<br>
${station.Location_Short} (${station.Location_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 // Events for mouse interactions
marker.on('mouseover', () => marker.openPopup()); marker.on("mouseover", () => marker.openPopup());
marker.on('mouseout', () => marker.closePopup()); marker.on("mouseout", () => marker.closePopup());
} }
}); });
// Hier fügen wir den Layer zur Karte hinzu, nachdem alle Marker hinzugefügt wurden // 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); setLayerTALAS(TALAS);
console.log("layerTALAS:", layerTALAS); //console.log("layerTALAS:", layerTALAS);
console.log("TALAS layerGroup:", TALAS);
}, [map, GisStationsStaticDistrict, oms]); }, [map, GisStationsStaticDistrict, oms, showTALAS]);
//--------------------------------------------------------------------------------- //---------------------------------------------------------------------------------
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("GisStationsStatusDistrict:", GisStationsStatusDistrict); //console.log("GisStationsStatusDistrict:", GisStationsStatusDistrict);
//------------------------------------------ //------------------------------------------
/* useEffect(() => { /* useEffect(() => {
if (!map || !GisStationsStaticDistrict.length || !GisSystemStatic.length) if (!map || !GisStationsStaticDistrict.length || !GisSystemStatic.length)

30
states/mapLayersState.js
View File

@@ -5,20 +5,20 @@ export const mapLayersState = atom({
key: "mapLayersState", // Eindeutiger Schlüssel für das Atom key: "mapLayersState", // Eindeutiger Schlüssel für das Atom
default: { default: {
// Standardwerte für jeden Layer // Standardwerte für jeden Layer
TALAS: false, show_TALAS: false,
ECI: false, show_ECI: false,
ULAF: false, show_ULAF: false,
GSMModem: false, show_GSMModem: false,
CiscoRouter: false, show_CiscoRouter: false,
WAGO: false, show_WAGO: false,
Siemens: false, show_Siemens: false,
OTDR: false, show_OTDR: false,
WDM: false, show_WDM: false,
GMA: false, show_GMA: false,
Messstellen: false, show_Messstellen: false,
TALASICL: false, show_TALASICL: false,
DAUZ: false, show_DAUZ: false,
SMSFunkmodem: false, show_SMSFunkmodem: false,
Sonstige: false, show_Sonstige: false,
}, },
}); });