178 lines
8.1 KiB
Plaintext
178 lines
8.1 KiB
Plaintext
TALAS V5 nodeMap
|
|
-------------------
|
|
-------------------
|
|
|
|
|
|
Einführung
|
|
-----------
|
|
Dieses Dokument bietet einen umfassenden Überblick über die TALAS V5-GIS-Webanwendung nodeMap. Diese Anwendung ermöglicht es,
|
|
verschiedene Daten und Informationen visuell und interaktiv zu speichern, zu verwalten und anzuzeigen. Sie basiert auf Geographic Information Systems (GIS) und verwendet MySQL als Datenbank.
|
|
|
|
|
|
|
|
|
|
Installation
|
|
------------
|
|
-Voraussetzungen
|
|
Node.js und npm: Stellen Sie sicher, dass Node.js und npm auf Ihrem System installiert sind. Besuchen Sie Node.js für Installationsanleitungen.
|
|
-Projekt herunterladen und vorbereiten
|
|
Laden Sie nodeMap.zip aus dem Team-URL herunter und entpacken Sie die Datei mit Werkzeugen wie 7-Zip. Kopieren Sie den entpackten Ordner nodeMap in das Verzeichnis C:\inetpub\wwwroot\talas5.
|
|
|
|
|
|
mapTiles einfügen
|
|
----------------
|
|
Fügen Sie das mapTiles-Verzeichnis in C:\inetpub\wwwroot\talas5\nodeMap\public ein. Die mapTiles sollten lokal sein.
|
|
|
|
|
|
Serverkonfiguration
|
|
---------------------
|
|
1-Projekt Kopieren : Projekt kopieren und nicht von Gitea clonen wegen 'npm install' und Abhängigkeiten
|
|
|
|
2-Port Freigabe: Der Port 3000 muss auf dem Server freigegeben werden damit dass auch außerhalb der Server erreichbar ist.
|
|
|
|
3-API IP: Konfigurieren Sie die Server-IP und den Port in den entsprechenden Dateien, um den Zugriff auf die Anwendung zu ermöglichen,
|
|
z.B. in C:\inetpub\wwwroot\talas5\MessagesMap\MapTypC.aspx und /pages/api/[...path].js.
|
|
|
|
Beispielkonfigurationen
|
|
In C:\inetpub\wwwroot\talas5\MessagesMap\MapTypC.aspx
|
|
"http://10.10.0.30:3000?m=" + encodeURIComponent(mValue) + "&u=" + encodeURIComponent(uValue); oder
|
|
"http://localhost:3000?m=" + encodeURIComponent(mValue) + "&u=" + encodeURIComponent(uValue);
|
|
|
|
4-[...path].js :
|
|
|
|
In /pages/api/[...path].js muss die IP des Servers eingetragen werden.
|
|
target: "10.10.0.30",
|
|
|
|
In /config/config.js API-Endpoint prüfen.
|
|
|
|
5-Datenbank-Host-IP: In .env.local .
|
|
DB_HOST=10.10.0.30, oder DB_HOST=localhost,
|
|
|
|
6-Map URL: In /components/MapComponent.js .
|
|
const onlineTileLayer = "http://10.10.0.30:3000/mapTiles/{z}/{x}/{y}.png";,
|
|
|
|
7-ServerURL in MapComponent: In /components/MapComponent.js .
|
|
Stellen Sie sicher, dass serverURL die richtige IP-Adresse und API-Endpoint hat und für Benutzer-Berechtigung.
|
|
|
|
8-baseURL in MapComponent: In /components/MapComponent.js .
|
|
Stellen Sie sicher, dass baseURL die richtige IP-Adresse oder localhost und API-Endpoint hat und für Benutzer-Berechtigung und Stationen öffnen.
|
|
|
|
9-App als Service starten: damit die App mit dem Server-System startet. nssm.exe install ->Batch-Datei ->Projekt-Ordner -> 3. kann leer sein
|
|
|
|
10-Chrome Version: Web-Browser Chrome muss ab Version '125.0.6422.142' sein.
|
|
|
|
|
|
|
|
|
|
Benutzeranleitung
|
|
------------------
|
|
|
|
Karte ansehen
|
|
------------
|
|
Die Hauptseite zeigt eine interaktive Karte, auf der verschiedene geografische Punkte dargestellt werden.
|
|
|
|
Beim Überfahren eines Elements (Station oder Poi) mit der Maus erscheint ein Popup mit Informationen über dieses Element.
|
|
|
|
Überlappende Stationen werden durch ein Plus-Icon angezeigt. Bei einem Linksklick auf das Icon werden die Stationen visuell auseinandergezogen, und Informationen zu einer Station werden bei Mausüberfahrt angezeigt.
|
|
|
|
Verschieben: Halten Sie die linke Maustaste gedrückt und bewegen Sie die Maus, um die Karte zu verschieben um verschiedene Bereiche zu erkunden.
|
|
|
|
Station wählen
|
|
--------------
|
|
Oben rechts auf der Karte befindet sich ein Dropdown-Menü, mit dem Sie direkt zu einer ausgewählten Station zoomen können.
|
|
|
|
Layer auswählen
|
|
---------------
|
|
In derselben Oberfläche können Sie über Checkboxen verschiedene System-Layer ein- oder ausblenden, um spezifische Informationen auf der Karte anzuzeigen oder zu verbergen.
|
|
|
|
Rauszoomen-Icon
|
|
----------------
|
|
Ein Icon zum Rauszoomen ermöglicht es Ihnen, schnell zu einem definierten Bereich zurückzukehren.
|
|
|
|
|
|
Kontextmenü
|
|
------------
|
|
Station öffnen
|
|
--------------
|
|
Stationen können im selben Browser-Fenster oder in einem neuen Tab geöffnet werden.
|
|
|
|
Maus über eine Station -> Rechte Maustaste -> Kontextmenü öffnen und "Station öffnen (Tab)" wählen, um die Station in einem neuen Browser-Tab zu öffnen,
|
|
oder "Station öffnen", um sie im selben Fenster zu öffnen.
|
|
Hinzufügen neuer Poi
|
|
---------------------
|
|
Nutzer können über ein Formular neue Marker (Poi) zur Datenbank hinzufügen.
|
|
|
|
Rechte Maustaste -> Poi hinzufügen -> Formular ausfüllen -> "Poi hinzufügen" Button klicken. Der Poi erscheint dann auf der Karte.
|
|
|
|
Koordinaten anzeigen
|
|
-------------------
|
|
Im Kontextmenü können Sie die aktuellen Koordinaten der Mausposition in einem Alert-Fenster anzeigen lassen.
|
|
|
|
Zoom
|
|
-----
|
|
Sie können mit dem Mausrad ein- und auszoomen, um näher an Bereiche heranzukommen oder sich für eine Übersicht zu entfernen. Sie haben auch die Möglichkeit im Kontextmenü ein- und auszoomen.
|
|
|
|
Hier zentrieren
|
|
---------------
|
|
Die aktuellen Mauskoordinaten werden im Browser-Fenster zentriert.
|
|
|
|
|
|
Pois hinzufügen und bearbeiten
|
|
------------------------------
|
|
1-Poi hinzufügen:
|
|
Rechtsklicken Sie auf den gewünschten Ort auf der Karte, um das Kontextmenü zu öffnen.
|
|
Wählen Sie die Option "Poi hinzufügen".
|
|
Füllen Sie das Formular mit den notwendigen Informationen über den Poi aus und klicken Sie auf "POI hinzufügen", um den PoI zur Karte und zur Datenbank hinzuzufügen.
|
|
|
|
2-Poi verschieben:
|
|
Um einen bestehenden Poi zu verschieben, klicken und halten Sie den Marker des POI und ziehen Sie ihn an die neue Position.
|
|
Lassen Sie den Marker los, um die neue Position zu bestätigen. Die Position wird automatisch in der MySQL-Datenbank aktualisiert.
|
|
|
|
3-Poi bearbeiten:
|
|
Im Kontextmenü "Poi bearbeiten klicken, dann öffnet Formular-Fenster, drin können die Werte geändert dann auf "POI aktualisieren" klicken.
|
|
|
|
4-Poi löschen
|
|
In das vorherige Fenster "Poi löschen" klicken um von der Karte und von der Datenbank entfernen.
|
|
|
|
|
|
|
|
Fehlerbehebung
|
|
---------------
|
|
Problembehandlung bei der Installation
|
|
-------------------------------------
|
|
Stellen Sie sicher, dass alle Umgebungsvariablen korrekt gesetzt sind.
|
|
|
|
Lösungen bei häufigen Fehlern
|
|
-----------------------------
|
|
Bei Problemen während der Weiterentwicklung könnte es hilfreich sein, die Seite neu zu laden (aktualisieren).
|
|
|
|
|
|
|
|
|
|
Verzeichnisstruktur
|
|
-----------------------
|
|
/pages
|
|
_app.js: Grundlegende Konfiguration und Layout für die gesamte Anwendung. Importiert globale Styles und Recoil-Root für das State Management.
|
|
index.js: Startseite der Anwendung, lädt die Hauptkomponenten und initiiert die Karte.
|
|
[...path].js: Dynamische Route, die verwendet wird, um verschiedene URLs zu verarbeiten, die spezifische Ansichten oder Funktionen in der Anwendung darstellen.
|
|
/components
|
|
DataSheet.js: Verantwortlich für die Anzeige und Interaktion mit den Layer- und Stationsauswahlen. Ermöglicht das Aktivieren/Deaktivieren von Layern und zeigt Informationen zu geografischen Punkten.
|
|
MapComponent.js: Kernkomponente für die Darstellung der Karte. Beinhaltet Logik für das Hinzufügen von Layern, Zoom-Funktionen und andere interaktive Elemente.
|
|
PoiUpdateModal.js:Komponente zum Aktualisieren(update) und löschen von Pois.
|
|
ShowAddStationPopup.js:Komponente zum hinzufügen von Pois.
|
|
/public
|
|
Speicherort für statische Dateien wie MapTiles (falls Internet nicht vorhanden), Bilder, Icons und andere Medien, die in der Benutzeroberfläche verwendet werden.
|
|
/styles
|
|
Enthält CSS-Dateien und andere Styling-Ressourcen für das Tailwind CSS-Framework.
|
|
/store
|
|
Zustandsmanagement-Dateien, die mit Recoil erstellt wurden. Diese Dateien definieren Atome und Selektoren für den globalen Zustand der Anwendung.
|
|
/api
|
|
addLocation.js: API-Route zur Handhabung des Hinzufügens neuer Standortdaten zur Datenbank.
|
|
updateLocation.js: API-Route zur Aktualisierung bestehender Standortdaten.
|
|
locations.js: API-Route, die für das Abrufen von Standortdaten zuständig ist.
|
|
/config
|
|
config.js: Konfigurationsdatei, die wichtige Konstanten und Einstellungen für die Anwendung enthält, wie z.B. API-Endpoints.
|
|
|
|
|
|
|
|
Diese Dokumentation und Benutzeranleitung kann weiter angepasst und erweitert werden. |