Rahmen vorbereiten

Rahmen vorbereiten#

Hinweis

Ziel der Übung

  • Erste Einblicke in Visual Studio Code

  • Die Extension Live Server kennenlernen

Siehe auch

Masterportal#

Quelle: Masterportal

Schritt für Schritt Richtung eigenes WebGIS#

Um ein eigenes WebGIS mit Masterportal zu erstellen, gehen wir in drei Schritten vor. Zuerst bereiten wir alle Informationen vor, die wir für unser Untersuchungsgebiet benötigen. Im Anschluss bereiten wir unsere Entwicklungsumgebung vor. Dann werden wir die Karte, die Werkzeuge, den Footer und das Logo anpassen.

Vorbereitung#

Installiere dier die Extension Live Server (falls noch nicht geschehen)

Visual Studio Code

Visual Studio Extension Live Server#

  1. Nutze die Geodaten bzw. das QGIS-Projekt von Aufgabe 2 und speichere es erneut ab.

  2. Extrahiere aus der Gemarkung Tübingens die Layerausdehnung deiner Region

  3. Lass dir den Zentroid der Gemarkung Tübingen ausgeben.

  4. Notiere dir die Koordinaten der Layerausdehnung & des Zentroids

  5. Reprojiziere die Koordinaten der Layerausdehnung in WGS 84 - WGC. Notiere dir die Koordinaten ebenfalls

  6. Lade dir drei WMS-Layer für deine Region (bspw.: 1x Schummerung, 1x Orthophoto, 1x basemap.de)

  7. Speichere dein Projekt & lasse dein QGIS-Projekt geöffnet

QGIS-Projekt mit *Layerausdehnung* oder & *Zentroid*

QGIS-Projekt mit Layerausdehnung oder Zentroid#

Masterportal herunterladen & einbinden#

  1. Lade dir das neuste Masterportal example (examples-xxx-lts.zip) herunter & enzippe den Ordner an einer für dich geeigneten Stelle.

  2. Innerhalb des Masterportal_example Ordners findest du einen Ordner Basic. Kopiere diesen und bennene ihn passend zu deinem Untersuchungsgebiet um (bspw. uni-tuebingen).

  3. Öffne dein Masterportal example (bspw. uni-tuebingen) Ordner in Visual Studio Code

    Hinweis

    • Der Ordner Basic dient als Backup

Masterportal in Visual Studio Code

Masterportal Ordnerstruktur in Visual Studio#

  1. Öffne die index.html Datei

    Hinweis

    • Durch einfaches anklicken der index.html

    • So (oder so ähnlich) sollte dein Visual Studio Code jetzt aussehen

Masterportal in Visual Studio Code

Masterportal index.html in Visual Studio#

  1. Starte mit dem Live Server die index.html Datei

    Hinweis

    • Rechtsklick in die index.html und dann Open with Live Server wählen

Masterportal in Visual Studio Code

Masterportal index.html in Visual Studio#

Gratulation! Du hast das Masterportal erfolgreich heruntergeladen, in Visual Studio Code geöffnet & die notwendigen Parameter in QGIS berechnet. Jetzt kannst du mit der Entwicklung deines eigenen Masterportals beginnen (siehe Geoviewer konfigurieren)!