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

206
components/MapComponent.js
View File

@@ -4,124 +4,117 @@ import L from "leaflet";
import "leaflet/dist/leaflet.css";
import "leaflet-contextmenu/dist/leaflet.contextmenu.css";
import "leaflet-contextmenu";
import * as config from '../config/config.js';
import * as config from "../config/config.js";
const MapComponent = ({ locations, onLocationUpdate }) => {
const mapRef = useRef(null); // Referenz auf das DIV-Element der Karte
const [map, setMap] = useState(null); // Zustand der Karteninstanz
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 [dataIcons, setDataIcons] = useState([]); // Zustand für Icons
const [dataSystem, setDataSystem] = useState([]); // Zustand für Systemdaten
// Konstanten für die URLs
const mapDataStaticUrl = config.mapDataStaticUrl;
const mapDataStatusUrl = config.mapDataStatusUrl;
const mapDataIconUrl = config.mapDataIconUrl;
const mapDataSystemUrl = config.mapDataSystemUrl;
// Konstanten für die URLs
const mapGisStationsStaticDistrictUrl =
config.mapGisStationsStaticDistrictUrl;
const mapDataStatusUrl = config.mapDataStatusUrl;
const mapDataIconUrl = config.mapDataIconUrl;
const mapDataSystemUrl = config.mapDataSystemUrl;
console.log('dataStatic hier :', dataStatic);
console.log('map:', map);
//------------------------------------------
useEffect(() => {
const fetchData = async () => {
try {
console.log("Datenabruf gestartet...");
const response = await fetch(config.mapDataStaticUrl);
const jsonResponse = await response.json();
// Prüfen, ob die Antwort das erwartete Format hat und Daten enthält
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
console.log("GisStationsStaticDistrict 1 :", GisStationsStaticDistrict);
console.log("map:", map);
//------------------------------------------
// API-Daten laden für GisStationsStaticDistrict
//http://10.10.0.13/talas5/ClientData/WebServiceMap.asmx/GisStationsStaticDistrict?idMap=10&idUser=485
useEffect(() => {
const fetchData = async () => {
try {
console.log("Datenabruf gestartet...");
const response = await fetch(config.mapGisStationsStaticDistrictUrl);
const jsonResponse = await response.json();
useEffect(() => {
if (map && Array.isArray(dataStatic)) {
dataStatic.forEach(item => {
const marker = L.marker([item.y, item.x], { // Verwendung von item.y und item.x statt item.latitude und item.longitude
icon: L.icon({
iconUrl: '/path/to/icon.png', // Pfad zum Icon
iconSize: [25, 41], // Größe des Icons
iconAnchor: [12, 41], // Ankerpunkt des Icons
popupAnchor: [1, -34], // Position des Popups relativ zum Icon
shadowSize: [41, 41] // Größe des Schattens
})
}).addTo(map);
// Anpassen des Popups um relevante Daten anzuzeigen
marker.bindPopup(`<b>${item.lD_Name}</b><br>${item.device}`).openPopup();
});
// Prüfen, ob die Antwort das erwartete Format hat und Daten enthält
if (jsonResponse && jsonResponse.Points) {
console.log(
"GisStationsStaticDistrict geladen:",
jsonResponse.Points
);
setGisStationsStaticDistrict(jsonResponse.Points); // Direkter Zugriff auf 'Points'
} else {
console.error(
'Erwartete Daten im "Points"-Array nicht gefunden',
jsonResponse
);
setGisStationsStaticDistrict([]);
}
} 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 onlineTileLayer = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
// Create map layers
const TALAS = new L.layerGroup();
const ECI = new L.layerGroup();
const ULAF = new L.layerGroup();
const GSMModem = new L.layerGroup();
const CiscoRouter = new L.layerGroup();
const WAGO = new L.layerGroup();
const Siemens = new L.layerGroup();
const OTDR = new L.layerGroup();
const WDM = new L.layerGroup();
const GMA = new L.layerGroup();
const Sonstige = new L.layerGroup();
const TALASICL = new L.layerGroup();
// Create map layers
const TALAS = new L.layerGroup();
const ECI = new L.layerGroup();
const ULAF = new L.layerGroup();
const GSMModem = new L.layerGroup();
const CiscoRouter = new L.layerGroup();
const WAGO = new L.layerGroup();
const Siemens = new L.layerGroup();
const OTDR = new L.layerGroup();
const WDM = new L.layerGroup();
const GMA = new L.layerGroup();
const Sonstige = new L.layerGroup();
const TALASICL = new L.layerGroup();
let initialMap = [];
useEffect(() => {
console.log("Server URL from config:", config.serverURL);
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
const checkInternet = () => {
@@ -136,7 +129,20 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
initialMap = L.map(mapRef.current, {
center: [53.111111, 8.4625],
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
contextmenu: true,
contextmenuItems: [
@@ -453,8 +459,8 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
var y = 7.739617925303934;
var zoom = 7;
/* for (var i = 0; i < dataStaticlength; i++) {
var gisStatics = dataStatic[i];
/* for (var i = 0; i < GisStationsStaticDistrictlength; i++) {
var gisStatics = GisStationsStaticDistrict[i];
if (stationValue === gisStatics.Area_Name) {
//console.log(gisStatics.X+","+gisStatics.Y);
x = gisStatics.X;