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

GisStationsStaticDistrict API Datenaufruf in der Console

Browse Source
This commit is contained in:
ISA
2024-04-16 07:28:12 +02:00
parent 7738e53e03
commit 26095171fb
9 changed files with 128 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
.next/cache/webpack/client-development/index.pack.gz.old vendored
View File

Binary file not shown.

BIN
.next/cache/webpack/server-development/index.pack.gz.old vendored
View File

Binary file not shown.

4
.next/server/components_MapComponent_js.js
View File

File diff suppressed because one or more lines are too long

4
.next/server/pages-manifest.json
View File

@@ -3,6 +3,6 @@
"/_error": "pages/_error.js", "/_error": "pages/_error.js",
"/_document": "pages/_document.js", "/_document": "pages/_document.js",
"/": "pages/index.js", "/": "pages/index.js",
"/api/locations": "pages/api/locations.js", "/api/[...path]": "pages/api/[...path].js",
"/api/[...path]": "pages/api/[...path].js" "/api/locations": "pages/api/locations.js"
} }

4
.next/static/chunks/components_MapComponent_js.js
View File

File diff suppressed because one or more lines are too long

2
.next/static/chunks/webpack.js
View File

@@ -153,7 +153,7 @@
/******/ /******/
/******/ /* webpack/runtime/getFullHash */ /******/ /* webpack/runtime/getFullHash */
/******/ !function() { /******/ !function() {
/******/ __webpack_require__.h = function() { return "0f945be9853e1317"; } /******/ __webpack_require__.h = function() { return "60f0eb37bd675352"; }
/******/ }(); /******/ }();
/******/ /******/
/******/ /* webpack/runtime/global */ /******/ /* webpack/runtime/global */

10
.next/trace
View File

File diff suppressed because one or more lines are too long

206
components/MapComponent.js
View File

@@ -4,124 +4,117 @@ import L from "leaflet";
import "leaflet/dist/leaflet.css"; import "leaflet/dist/leaflet.css";
import "leaflet-contextmenu/dist/leaflet.contextmenu.css"; import "leaflet-contextmenu/dist/leaflet.contextmenu.css";
import "leaflet-contextmenu"; import "leaflet-contextmenu";
import * as config from '../config/config.js'; import * as config from "../config/config.js";
const MapComponent = ({ locations, onLocationUpdate }) => { const MapComponent = ({ locations, onLocationUpdate }) => {
const mapRef = useRef(null); // Referenz auf das DIV-Element der Karte const mapRef = useRef(null); // Referenz auf das DIV-Element der Karte
const [map, setMap] = useState(null); // Zustand der Karteninstanz const [map, setMap] = useState(null); // Zustand der Karteninstanz
const [online, setOnline] = useState(navigator.onLine); // Zustand der Internetverbindung const [online, setOnline] = useState(navigator.onLine); // Zustand der Internetverbindung
const [dataStatic, setDataStatic] = useState([]); // Zustand für statische Daten const [GisStationsStaticDistrict, setGisStationsStaticDistrict] = useState(
[]
); // Zustand für statische Daten
const [dataStatus, setDataStatus] = useState([]); // Zustand für Statusdaten const [dataStatus, setDataStatus] = useState([]); // Zustand für Statusdaten
const [dataIcons, setDataIcons] = useState([]); // Zustand für Icons const [dataIcons, setDataIcons] = useState([]); // Zustand für Icons
const [dataSystem, setDataSystem] = useState([]); // Zustand für Systemdaten const [dataSystem, setDataSystem] = useState([]); // Zustand für Systemdaten
// Konstanten für die URLs // Konstanten für die URLs
const mapDataStaticUrl = config.mapDataStaticUrl; const mapGisStationsStaticDistrictUrl =
const mapDataStatusUrl = config.mapDataStatusUrl; config.mapGisStationsStaticDistrictUrl;
const mapDataIconUrl = config.mapDataIconUrl; const mapDataStatusUrl = config.mapDataStatusUrl;
const mapDataSystemUrl = config.mapDataSystemUrl; const mapDataIconUrl = config.mapDataIconUrl;
const mapDataSystemUrl = config.mapDataSystemUrl;
console.log('dataStatic hier :', dataStatic); console.log("GisStationsStaticDistrict 1 :", GisStationsStaticDistrict);
console.log('map:', map); console.log("map:", map);
//------------------------------------------ //------------------------------------------
useEffect(() => { // API-Daten laden für GisStationsStaticDistrict
const fetchData = async () => { //http://10.10.0.13/talas5/ClientData/WebServiceMap.asmx/GisStationsStaticDistrict?idMap=10&idUser=485
try { useEffect(() => {
console.log("Datenabruf gestartet..."); const fetchData = async () => {
const response = await fetch(config.mapDataStaticUrl); try {
const jsonResponse = await response.json(); console.log("Datenabruf gestartet...");
const response = await fetch(config.mapGisStationsStaticDistrictUrl);
// Prüfen, ob die Antwort das erwartete Format hat und Daten enthält const jsonResponse = await response.json();
if (jsonResponse && jsonResponse.length > 0 && jsonResponse[0].points) {
console.log('dataStatic hier :', dataStatic);
console.log('map:', map);
setDataStatic(jsonResponse[0].points); // Zugriff auf das erste Objekt und dessen points-Array
} else {
console.error('Erwartete Daten im "points"-Array nicht gefunden', jsonResponse);
setDataStatic([]);
}
} catch (error) {
console.error("Fehler beim Laden der Daten: ", error);
setDataStatic([]);
}
};
fetchData();
}, []); // Dependency-Array ist leer, um den Effekt nur beim Mount auszuführen
//------------------------------------------
useEffect(() => {
// Prüfen der Internetverbindung beim Start
console.log("Prüfen der Internetverbindung...");
checkInternet();
// Asynchrones Laden der Kartendaten beim Initialisieren der Komponente
const fetchData = async () => {
try {
console.log("Datenabruf gestartet...");
const responses = await Promise.all([
fetch(config.mapDataStaticUrl).then(res => res.json()),
fetch(config.mapDataStatusUrl).then(res => res.json()),
fetch(config.mapDataIconUrl).then(res => res.json()),
fetch(config.mapDataSystemUrl).then(res => res.json())
]);
console.log("Daten erfolgreich geladen.");
setDataStatic(responses[0].Points);
setDataStatus(responses[1].Statis);
setDataIcons(responses[2].List);
setDataSystem(responses[3].Systems.filter(system => system.Allow === 1));
} catch (error) {
console.error("Fehler beim Laden der Daten: ", error);
}
};
fetchData();
}, []);// Leeres Abhängigkeitsarray, um nur beim ersten Mount zu laden
useEffect(() => { // Prüfen, ob die Antwort das erwartete Format hat und Daten enthält
if (map && Array.isArray(dataStatic)) { if (jsonResponse && jsonResponse.Points) {
dataStatic.forEach(item => { console.log(
const marker = L.marker([item.y, item.x], { // Verwendung von item.y und item.x statt item.latitude und item.longitude "GisStationsStaticDistrict geladen:",
icon: L.icon({ jsonResponse.Points
iconUrl: '/path/to/icon.png', // Pfad zum Icon );
iconSize: [25, 41], // Größe des Icons setGisStationsStaticDistrict(jsonResponse.Points); // Direkter Zugriff auf 'Points'
iconAnchor: [12, 41], // Ankerpunkt des Icons } else {
popupAnchor: [1, -34], // Position des Popups relativ zum Icon console.error(
shadowSize: [41, 41] // Größe des Schattens 'Erwartete Daten im "Points"-Array nicht gefunden',
}) jsonResponse
}).addTo(map); );
setGisStationsStaticDistrict([]);
// Anpassen des Popups um relevante Daten anzuzeigen }
marker.bindPopup(`<b>${item.lD_Name}</b><br>${item.device}`).openPopup(); } catch (error) {
}); console.error("Fehler beim Laden der Daten: ", error);
setGisStationsStaticDistrict([]);
} }
}, [map, dataStatic]); // Abhängigkeiten des Effekts };
fetchData();
}, []); // Dependency-Array ist leer, um den Effekt nur beim Mount auszuführen
//------------------------------------------
useEffect(() => {
// Prüfen der Internetverbindung beim Start
console.log("Prüfen der Internetverbindung...");
checkInternet();
// Asynchrones Laden der Kartendaten beim Initialisieren der Komponente
const fetchData = async () => {
try {
console.log("Datenabruf gestartet...");
const responses = await Promise.all([
fetch(config.mapGisStationsStaticDistrictUrl).then((res) =>
res.json()
),
fetch(config.mapDataStatusUrl).then((res) => res.json()),
fetch(config.mapDataIconUrl).then((res) => res.json()),
fetch(config.mapDataSystemUrl).then((res) => res.json()),
]);
console.log("Daten erfolgreich geladen.");
setGisStationsStaticDistrict(responses[0].Points);
setDataStatus(responses[1].Statis);
setDataIcons(responses[2].List);
setDataSystem(
responses[3].Systems.filter((system) => system.Allow === 1)
);
} catch (error) {
console.error("Fehler beim Laden der Daten: ", error);
}
};
fetchData();
}, []); // Leeres Abhängigkeitsarray, um nur beim ersten Mount zu laden
const offlineTileLayer = "../TileMap/mapTiles/{z}/{x}/{y}.png"; const offlineTileLayer = "../TileMap/mapTiles/{z}/{x}/{y}.png";
const onlineTileLayer = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"; const onlineTileLayer = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
// Create map layers // Create map layers
const TALAS = new L.layerGroup(); const TALAS = new L.layerGroup();
const ECI = new L.layerGroup(); const ECI = new L.layerGroup();
const ULAF = new L.layerGroup(); const ULAF = new L.layerGroup();
const GSMModem = new L.layerGroup(); const GSMModem = new L.layerGroup();
const CiscoRouter = new L.layerGroup(); const CiscoRouter = new L.layerGroup();
const WAGO = new L.layerGroup(); const WAGO = new L.layerGroup();
const Siemens = new L.layerGroup(); const Siemens = new L.layerGroup();
const OTDR = new L.layerGroup(); const OTDR = new L.layerGroup();
const WDM = new L.layerGroup(); const WDM = new L.layerGroup();
const GMA = new L.layerGroup(); const GMA = new L.layerGroup();
const Sonstige = new L.layerGroup(); const Sonstige = new L.layerGroup();
const TALASICL = new L.layerGroup(); const TALASICL = new L.layerGroup();
let initialMap = []; let initialMap = [];
useEffect(() => { useEffect(() => {
console.log("Server URL from config:", config.serverURL); console.log("Server URL from config:", config.serverURL);
if (typeof window !== "undefined") { if (typeof window !== "undefined") {
console.log("Window height from config:", config.windowHeight); console.log("Window height from config:", config.windowHeight);
} }
}, []); }, []);
// Funktionen zur Überwachung der Internetverbindung // Funktionen zur Überwachung der Internetverbindung
const checkInternet = () => { const checkInternet = () => {
@@ -136,7 +129,20 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
initialMap = L.map(mapRef.current, { initialMap = L.map(mapRef.current, {
center: [53.111111, 8.4625], center: [53.111111, 8.4625],
zoom: 10, zoom: 10,
layers: [TALAS, ECI, ULAF, GSMModem, CiscoRouter, WAGO, Siemens, OTDR, WDM, GMA, Sonstige, TALASICL], layers: [
TALAS,
ECI,
ULAF,
GSMModem,
CiscoRouter,
WAGO,
Siemens,
OTDR,
WDM,
GMA,
Sonstige,
TALASICL,
],
zoomControl: false, // Deaktiviere die Standard-Zoomsteuerung zoomControl: false, // Deaktiviere die Standard-Zoomsteuerung
contextmenu: true, contextmenu: true,
contextmenuItems: [ contextmenuItems: [
@@ -453,8 +459,8 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
var y = 7.739617925303934; var y = 7.739617925303934;
var zoom = 7; var zoom = 7;
/* for (var i = 0; i < dataStaticlength; i++) { /* for (var i = 0; i < GisStationsStaticDistrictlength; i++) {
var gisStatics = dataStatic[i]; var gisStatics = GisStationsStaticDistrict[i];
if (stationValue === gisStatics.Area_Name) { if (stationValue === gisStatics.Area_Name) {
//console.log(gisStatics.X+","+gisStatics.Y); //console.log(gisStatics.X+","+gisStatics.Y);
x = gisStatics.X; x = gisStatics.X;

10
config/config.js
View File

@@ -7,7 +7,7 @@ const serverURL = "/api"; // Die Basis-URL des Servers, von dem Daten bezogen we
// Initialisieren von Variablen, die später im Browserkontext gesetzt werden // Initialisieren von Variablen, die später im Browserkontext gesetzt werden
let windowHeight, url_string, url, c, user; let windowHeight, url_string, url, c, user;
let mapDataStaticUrl, let mapGisStationsStaticDistrictUrl,
mapDataStatusUrl, mapDataStatusUrl,
mapDataMeasures, mapDataMeasures,
mapDataIconUrl, mapDataIconUrl,
@@ -25,16 +25,16 @@ if (typeof window !== "undefined") {
url_string = window.location.href; // Die vollständige URL als String url_string = window.location.href; // Die vollständige URL als String
url = new URL(url_string); // Die URL als URL-Objekt, um Teile der URL einfacher zu handhaben url = new URL(url_string); // Die URL als URL-Objekt, um Teile der URL einfacher zu handhaben
c = url.searchParams.get("m") || "10"; // Ein Parameter aus der URL, Standardwert ist '10' c = url.searchParams.get("m") || "10"; // Ein Parameter aus der URL, Standardwert ist '10'
user = url.searchParams.get("u") || "484"; // Ein weiterer Parameter aus der URL, Standardwert ist '487 oder 484' 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 // Konstruktion von URLs, die auf spezifische Ressourcen auf dem Server zeigen
mapDataStaticUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisStationsStaticDistrict?idMap=${c}&idUser=${user}`; mapGisStationsStaticDistrictUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisStationsStaticDistrict?idMap=${c}&idUser=${user}`;
mapDataStatusUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisStationsStatusDistrict?idMap=${c}&idUser=${user}`; mapDataStatusUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisStationsStatusDistrict?idMap=${c}&idUser=${user}`;
mapDataMeasures = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisStationsMeasurements?idMap=${c}`; mapDataMeasures = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisStationsMeasurements?idMap=${c}`;
mapDataIconUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GetIconsStatic`; mapDataIconUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GetIconsStatic`;
mapDataSystemUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisSystemStatic?idMap=${c}&idUser=${user}`; mapDataSystemUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisSystemStatic?idMap=${c}&idUser=${user}`;
/* mapDataStaticUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisStationsStaticDistrict`; /* mapGisStationsStaticDistrictUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisStationsStaticDistrict`;
mapDataStatusUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisStationsStatusDistrict`; mapDataStatusUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisStationsStatusDistrict`;
mapDataMeasures = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisStationsMeasurements`; mapDataMeasures = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisStationsMeasurements`;
mapDataIconUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GetIconsStatic`; mapDataIconUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GetIconsStatic`;
@@ -59,7 +59,7 @@ export {
url, url,
c, c,
user, user,
mapDataStaticUrl, mapGisStationsStaticDistrictUrl,
mapDataStatusUrl, mapDataStatusUrl,
mapDataMeasures, mapDataMeasures,
mapDataIconUrl, mapDataIconUrl,