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

Ein -und ausblenden LayerGroups durch Checkboxen, manche funktionieren, manche sollen die Benennung prüfen .

Browse Source 
MapComponent.js
25.04.2024
This commit is contained in:
ISA
2024-04-25 18:04:46 +02:00
parent b83a6456c7
commit 17afca6115
3 changed files with 243 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

237
components/MapComponent.js
View File

@@ -1121,6 +1121,243 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
toggleLayer(mapLayersVisibility.TALAS);
}, [map, talasMarkers, mapLayersVisibility.TALAS]);
//------------------------------------------ */
// Funktion zum Ein- und Ausblenden der ECI-Marker basierend auf dem Zustand von mapLayersVisibility.ECI
useEffect(() => {
if (!map || !eciMarkers) return;
const toggleLayer = (isVisible) => {
if (isVisible) {
eciMarkers.forEach((marker) => marker.addTo(map)); // Ensure markers are added
} else {
eciMarkers.forEach((marker) => map.removeLayer(marker)); // Remove markers individually
}
};
// Apply visibility state to the ECI layer
toggleLayer(mapLayersVisibility.ECI);
}, [map, eciMarkers, mapLayersVisibility.ECI]);
//------------------------------------------ */
// Funktion zum Ein- und Ausblenden der ULAF-Marker basierend auf dem Zustand von mapLayersVisibility.ULAF
useEffect(() => {
if (!map || !ulafMarkers) return;
const toggleLayer = (isVisible) => {
if (isVisible) {
ulafMarkers.forEach((marker) => marker.addTo(map)); // Ensure markers are added
} else {
ulafMarkers.forEach((marker) => map.removeLayer(marker)); // Remove markers individually
}
};
// Apply visibility
toggleLayer(mapLayersVisibility.ULAF);
}, [map, ulafMarkers, mapLayersVisibility.ULAF]);
//------------------------------------------ */
//------------------------------------------ */
// Funktion zum Ein- und Ausblenden der GSMModem-Marker basierend auf dem Zustand von mapLayersVisibility.GSMModem
useEffect(() => {
if (!map || !gsmModemMarkers) return;
const toggleLayer = (isVisible) => {
if (isVisible) {
gsmModemMarkers.forEach((marker) => marker.addTo(map)); // Ensure markers are added
} else {
gsmModemMarkers.forEach((marker) => map.removeLayer(marker)); // Remove markers individually
}
};
// Apply visibility
toggleLayer(mapLayersVisibility.GSMModem);
}, [map, gsmModemMarkers, mapLayersVisibility.GSMModem]);
//------------------------------------------ */
//------------------------------------------ */
// Funktion zum Ein- und Ausblenden der CiscoRouter-Marker basierend auf dem Zustand von mapLayersVisibility.CiscoRouter
useEffect(() => {
if (!map || !ciscoRouterMarkers) return;
const toggleLayer = (isVisible) => {
if (isVisible) {
ciscoRouterMarkers.forEach((marker) => marker.addTo(map)); // Ensure markers are added
} else {
ciscoRouterMarkers.forEach((marker) => map.removeLayer(marker)); // Remove markers individually
}
};
// Apply visibility
toggleLayer(mapLayersVisibility.CiscoRouter);
}, [map, ciscoRouterMarkers, mapLayersVisibility.CiscoRouter]);
//------------------------------------------ */
//------------------------------------------ */
// Funktion zum Ein- und Ausblenden der WAGO-Marker basierend auf dem Zustand von mapLayersVisibility.WAGO
useEffect(() => {
if (!map || !wagoMarkers) return;
const toggleLayer = (isVisible) => {
if (isVisible) {
wagoMarkers.forEach((marker) => marker.addTo(map)); // Ensure markers are added
} else {
wagoMarkers.forEach((marker) => map.removeLayer(marker)); // Remove markers individually
}
};
// Apply visibility
toggleLayer(mapLayersVisibility.WAGO);
}, [map, wagoMarkers, mapLayersVisibility.WAGO]);
//------------------------------------------ */
//------------------------------------------ */
// Funktion zum Ein- und Ausblenden der Siemens-Marker basierend auf dem Zustand von mapLayersVisibility.Siemens
useEffect(() => {
if (!map || !siemensMarkers) return;
const toggleLayer = (isVisible) => {
if (isVisible) {
siemensMarkers.forEach((marker) => marker.addTo(map)); // Ensure markers are added
} else {
siemensMarkers.forEach((marker) => map.removeLayer(marker)); // Remove markers individually
}
};
// Apply visibility
toggleLayer(mapLayersVisibility.Siemens);
}, [map, siemensMarkers, mapLayersVisibility.Siemens]);
//------------------------------------------ */
//------------------------------------------ */
// Funktion zum Ein- und Ausblenden der OTDR-Marker basierend auf dem Zustand von mapLayersVisibility.OTDR
useEffect(() => {
if (!map || !otdrMarkers) return;
const toggleLayer = (isVisible) => {
if (isVisible) {
otdrMarkers.forEach((marker) => marker.addTo(map)); // Ensure markers are added
} else {
otdrMarkers.forEach((marker) => map.removeLayer(marker)); // Remove markers individually
}
};
// Apply visibility
toggleLayer(mapLayersVisibility.OTDR);
}, [map, otdrMarkers, mapLayersVisibility.OTDR]);
//------------------------------------------ */
//------------------------------------------ */
// Funktion zum Ein- und Ausblenden der WDM-Marker basierend auf dem Zustand von mapLayersVisibility.WDM
useEffect(() => {
if (!map || !wdmMarkers) return;
const toggleLayer = (isVisible) => {
if (isVisible) {
wdmMarkers.forEach((marker) => marker.addTo(map)); // Ensure markers are added
} else {
wdmMarkers.forEach((marker) => map.removeLayer(marker)); // Remove markers individually
}
};
// Apply visibility
toggleLayer(mapLayersVisibility.WDM);
}, [map, wdmMarkers, mapLayersVisibility.WDM]);
//------------------------------------------ */
// Funktion zum Ein- und Ausblenden der GMA-Marker basierend auf dem Zustand von mapLayersVisibility.GMA
useEffect(() => {
if (!map || !gmaMarkers) return;
const toggleLayer = (isVisible) => {
if (isVisible) {
gmaMarkers.forEach((marker) => marker.addTo(map)); // Ensure markers are added
} else {
gmaMarkers.forEach((marker) => map.removeLayer(marker)); // Remove markers individually
}
};
// Apply visibility
toggleLayer(mapLayersVisibility.GMA);
}, [map, gmaMarkers, mapLayersVisibility.GMA]);
//------------------------------------------ */
//------------------------------------------ */
// Funktion zum Ein- und Ausblenden der Sonstige-Marker basierend auf dem Zustand von mapLayersVisibility.Sonstige
useEffect(() => {
if (!map || !sonstigeMarkers) return;
const toggleLayer = (isVisible) => {
if (isVisible) {
sonstigeMarkers.forEach((marker) => marker.addTo(map)); // Ensure markers are added
} else {
sonstigeMarkers.forEach((marker) => map.removeLayer(marker)); // Remove markers individually
}
};
// Apply visibility
toggleLayer(mapLayersVisibility.Sonstige);
}, [map, sonstigeMarkers, mapLayersVisibility.Sonstige]);
//------------------------------------------ */
//------------------------------------------ */
// Funktion zum Ein- und Ausblenden der TALASICL-Marker basierend auf dem Zustand von mapLayersVisibility.TALASICL
useEffect(() => {
if (!map || !talasiclMarkers) return;
const toggleLayer = (isVisible) => {
if (isVisible) {
talasiclMarkers.forEach((marker) => marker.addTo(map)); // Ensure markers are added
} else {
talasiclMarkers.forEach((marker) => map.removeLayer(marker)); // Remove markers individually
}
};
// Apply visibility
toggleLayer(mapLayersVisibility.TALASICL);
}, [map, talasiclMarkers, mapLayersVisibility.TALASICL]);
//------------------------------------------ */
//------------------------------------------ */
// Funktion zum Ein- und Ausblenden der DAUZ-Marker basierend auf dem Zustand von mapLayersVisibility.DAUZ
useEffect(() => {
if (!map || !dauzMarkers) return;
const toggleLayer = (isVisible) => {
if (isVisible) {
dauzMarkers.forEach((marker) => marker.addTo(map)); // Ensure markers are added
} else {
dauzMarkers.forEach((marker) => map.removeLayer(marker)); // Remove markers individually
}
};
// Apply visibility
toggleLayer(mapLayersVisibility.DAUZ);
}, [map, dauzMarkers, mapLayersVisibility.DAUZ]);
//------------------------------------------ */
//------------------------------------------ */
// Funktion zum Ein- und Ausblenden der SMSFunkmodem-Marker basierend auf dem Zustand von mapLayersVisibility.SMSFunkmodem
useEffect(() => {
if (!map || !smsfunkmodemMarkers) return;
const toggleLayer = (isVisible) => {
if (isVisible) {
smsfunkmodemMarkers.forEach((marker) => marker.addTo(map)); // Ensure markers are added
} else {
smsfunkmodemMarkers.forEach((marker) => map.removeLayer(marker)); // Remove markers individually
}
};
// Apply visibility
toggleLayer(mapLayersVisibility.SMSFunkmodem);
}, [map, smsfunkmodemMarkers, mapLayersVisibility.SMSFunkmodem]);
//------------------------------------------ */
//------------------------------------------ */
// Funktion zum Ein- und Ausblenden der Messstellen-Marker basierend auf dem Zustand von mapLayersVisibility.Messstellen
useEffect(() => {
if (!map || !messstellenMarkers) return;
const toggleLayer = (isVisible) => {
if (isVisible) {
messstellenMarkers.forEach((marker) => marker.addTo(map)); // Ensure markers are added
} else {
messstellenMarkers.forEach((marker) => map.removeLayer(marker)); // Remove markers individually
}
};
// Apply visibility
toggleLayer(mapLayersVisibility.Messstellen);
}, [map, messstellenMarkers, mapLayersVisibility.Messstellen]);
//------------------------------------------ */
return (

8
config/config.js
View File

@@ -31,17 +31,17 @@ if (typeof window !== "undefined") {
user = url.searchParams.get("u") || "485"; // Ein weiterer Parameter aus der URL, Standardwert ist '487 oder 484 oder 485'
// Konstruktion von URLs, die auf spezifische Ressourcen auf dem Server zeigen
mapGisStationsStaticDistrictUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisStationsStaticDistrict?idMap=${c}&idUser=${user}`;
/* mapGisStationsStaticDistrictUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisStationsStaticDistrict?idMap=${c}&idUser=${user}`;
mapGisStationsStatusDistrictUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisStationsStatusDistrict?idMap=${c}&idUser=${user}`;
mapGisStationsMeasurementsUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisStationsMeasurements?idMap=${c}`;
mapGisSystemStaticUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisSystemStatic?idMap=${c}&idUser=${user}`;
mapDataIconUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GetIconsStatic`;
mapDataIconUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GetIconsStatic`; */
/* mapGisStationsStaticDistrictUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisStationsStaticDistrict`;
mapGisStationsStaticDistrictUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisStationsStaticDistrict`;
mapGisStationsStatusDistrictUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisStationsStatusDistrict`;
mapGisStationsMeasurementsUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisStationsMeasurements`;
mapGisSystemStaticUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisSystemStatic`;
mapDataIconUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GetIconsStatic`; */
mapDataIconUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GetIconsStatic`;
// URLs zu Offline-Daten, falls benötigt
}

4
pages/api/[...path].js
View File

@@ -2,8 +2,8 @@
import { createProxyMiddleware } from "http-proxy-middleware";
export default createProxyMiddleware({
target: "http://10.10.0.13", // Ziel-URL des Proxys
//target: "http://192.168.10.187:3000", // Ziel-URL des Proxys
//target: "http://10.10.0.13", // Ziel-URL des Proxys
target: "http://192.168.10.187:3000", // Ziel-URL des Proxys
changeOrigin: true,
pathRewrite: {
"^/api": "/", // Optional: Entfernt /api aus dem Pfad, wenn das Backend dies nicht erfordert