Geoviewer konfigurieren#
Hinweis
- Ziel der Übung
Die Codestruktur des Masterportals kennenlernen
Einen schlanken Geoviewer individuell zu konfigureren
Siehe auch
Masterportal konfigurieren#
Jetzt haben wir alle notwendigen Vorbereitungen getroffen und können mit der Entwicklung bzw. Konfiguration unseres Masterportal-Geoviewer starten. Ein zentrales Dokument, dass wir für die Konfiguration brauchen ist die offizielle Dokumentation (Masterportal Docs). Das Masterportal example befindet sich in Hamburg. Die dort eingesetzten Parameter ändern wir jetzt Schritt für Schritt, um aus dem Example unseren eigenen Geoviewer zu konfigurieren.
Titel & Logo ändern#
Hinweis
Die index.html betrifft ausschließlich den Browsertab. Der Masterportal code ist so aufgebaut, dass das meiste, was innerhalb des Browserfensters passiert, in den Global- und Portal-Settings definiert ist.
Da wir ohnehin die index.html Seite offen haben, können wir direkt den Titel und das Logo des Geoviewers im Browsertab ändern.
In der index.html kannst du den Titel der Seite ändern
Füge eine Logo (fiktiv oder dein Eigenes) in den Ordner resources/img/logo.svg (siehe Bild)
Füge die Zeile <link rel=“icon“ href=“./resources/img/logo.svg“> ein und speichere dein Projekt (Strg+S)
Das Logo der Universit Tübingen darf aussschließlich von Mitarbeitern verwendet werden. Nutzt einen Dummy: suche bei Pixabay oder Google Material Icon.
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<title>GDM-Portal</title> <!-- enter your own Portal Title for the website at this -->
<link rel="stylesheet" href="../mastercode/3_7_0/css/masterportal.css">
<link rel="stylesheet" href=""> <!-- Here you can configure your own fonts as url -->
<link rel="icon" href="./resources/img/UT-logo.svg"> <!-- Hier kannst du ein Logo im Browsertab einfügen -->
</head>
<body>
<div id="masterportal-root"></div>
<script type="text/javascript" src="../mastercode/3_7_0/js/masterportal.js"></script>
</body>
</html>
Angepasster Titel und Logo#
Öffne nun die Datei config.json (bspw. uni-tuebingen/config.json)
Navigiere zum Abschnitt „portalFooter“. Ändere den URL zu einer Website deiner Wahl. Passe den Alias & den mobilen Alias an. Das kann dann bspw. wie folgt aussehen.
{
"portalFooter": {
"urls": [
{
"bezeichnung": "common:modules.portalFooter.designation",
"url": "https://www.geodatenmanagerin-tuebingen.de/termine-anmeldung/", // Füge deine eigene URL ein
"alias": "Geodatenmanager/-in - Universität Tübingen", // Füge einen Text ein, der für die URL angezeigt werden soll
"alias_mobil": "GDM" // Füge einen Text ein, der in der mobilen Version angezeigt werden soll
}
]
},
Geoviewer anpassen#
Jetzt widmen wir uns dem Kern unseres Geoviewers - der Kartenansicht (engl. Map canvas). Dafür müssen wir die geographische Ausdehnung (Extent) & den zentralen Startpunkt definieren (Centroid oder bspw. das Geoinstitut). Dafür nutzen wir die Daten aus der Vorbereitung.
Öffne die Datei config.json (bspw. uni-tuebingen/config.json)
Navigiere zum unten aufgeführten Code Bereich portalConfig.
{
"portalConfig": {
"map": {
"controls": {
"zoom": true,
"orientation": {
"zoomMode": "once"
}
},
"mapView": {
"backgroundImage": "./resources/img/backgroundCanvas.jpeg",
"startCenter": [
561210,
5932600
],
"extent": [
510000.0,
5850000.0,
625000.4,
6000000.0
],
"startZoomLevel": 1
}
},
Jetzt passen wir in der config.json Datei die einzelnen Parameter auf unser Untersuchungsgebiet an.
Startpunkt - „startCenter“#
Wir starten mit dem zentralen Startpunkt. Dafür nutzen wir die Koordinaten, die wir in QGIS vorbereitet haben.
QGIS Layer Eigenschaften mit Extent & EPSG#
Füge die Koordinaten deines Centroids oder deines zentralen Interessenpunkts (bspw. Geoinstitut) in den Code ein.
Hinweis
Siehe „startCenter“. Die erste Koordinate repräsentiert den Rechtswert, die zweite den Hochwert.
{
"mapView": {
"backgroundImage": "./resources/img/backgroundCanvas.jpeg",
"startCenter": [
504116.11181222,
5374563.32233909
],
"extent": [
510000.0,
5850000.0,
625000.4,
6000000.0
],
"startZoomLevel": 1
}
},
Ausdehnung - „extent“#
Als nächstes definieren wir den geographischen Rahmen (Extent bzw. Bbox) unseres Geoviewers
Hinweis
Ein Extent besteht aus einem Array bestehend aus vier Zahlen. Ein Extent beschreibt einen rechteckigen Gültigkeitsbereich. Dabei wird ein Rechteck aufgespannt, das durch die „linke untere“ und die „rechte obere“ Ecke definiert wird. Das Schema lautet [Hochwert-Links-Unten, Rechtswert-Links-Unten, Hochwert-Rechts-Oben, Rechtswert-Rechts-Oben] oder [minx, miny, maxx, maxy]. Quelle: Masterportal Docs.
{
"mapView": {
"backgroundImage": "./resources/img/backgroundCanvas.jpeg",
"startCenter": [
504127.9130919434828684,
5374562.7627044897526503
],
"extent": [466282.1500000000232831, 5340065.0599999995902181, 546528.7500000000000000, 5400973.9000000003725290],
"StartZoomLevel": 1,
"epsg": "EPSG:25832"
}
},
Hinweis
Achte auf die Projektion (EPSG), die du benutzt. Welche Projektion ist für dich die Richtige?
Speichere dein Projekt und schaue dir die Änderungen in deinem Browserfenster an.
Hinweis
Aktiviere im Browser den Layer „TopPlusOpen“. Was siehst du?
Gratulation! Die Karte sollte jetzt angepasst sein
Überblick config.json#
In der folgenden Abbildung kannst du dir einen Überblick verschaffen, welche Code-Abschnitt der config.json für welche Bereiche des Geoviewers zuständig sind.
Geoviewer und Masterportal config.json kombiniert#
OGC-Dienste konfigurieren & implementieren#
Wir haben jetzt die Vorbereitungen und die individuelle Konfiguration unseres Geoviewers abgeschlossen. Jetzt fehlen noch die passenden Layer, die wir in unserem Geoviewer angezeigt haben möchten. Die Dienste und Layer können wir in der Datei services.json anpassen. Es wirkt auf den ersten Blick sehr verwirrend, aber wir werden uns Schritt für Schritt dem Aufbau nähern & konfigurieren. Wir können in services.json eine ganze Reihe von OGC-Diensten einbinden. Allerdings müssen wir dies im Anschluss wieder auf in der config.json verlinken, damit dieser Layer im Geoviewer angezeigt wird.
Achtung
In der service.json erstellen wir die Verbindungen zu den OGC-Diensten. Im config.json implementieren wir die Layer in den Geoviewer.
Hintergrundkarte#
Beginnen wir mit einer Hintergrundkarte, die wir als WMS-Layer einbinden.
Fügen Sie folgenden Code Abschnitt oben nach der [ ein
Hinweis
Es ist hilfreich den gewünschten WMS-Layer in QGIS zu testen und über die QGIS Layer Properties die URLs für die Masterportal WMS-Layer Vorlage (siehe unten) zu kopieren.
{
"id": "102",
"name": "Basemap (BKG) Germany",
"url": "https://sgx.geodatenzentrum.de/wms_basemapde",
"typ": "WMS",
"layers": "de_basemapde_web_raster_farbe",
"format": "image/png",
"version": "1.3.0",
"singleTile": false,
"transparent": true,
"transparency": 0,
"urlIsVisible": true,
"tilesize": 512,
"gutter": 0,
"minScale": "0",
"maxScale": "62304136",
"infoFormat": "text/xml",
"gfiAttributes": "showAll",
"gfiTheme": "default",
"layerAttribution": "nicht vorhanden",
"legendURL": "https://sgx.geodatenzentrum.de/wms_basemapde?format=image/png&layer=de_basemapde_web_raster_farbe&sld_version=1.1.0&request=GetLegendGraphic&service=WMS&version=1.1.1&styles=&",
"cache": false,
"featureCount": 1,
"datasets": [
{
"md_id": "69264016-D304-4DD6-BCEF-509C1ED19F14",
"csw_url": "https://mis.bkg.bund.de/csw?REQUEST=GetRecordById&SERVICE=CSW&VERSION=2.0.2&id=69264016-D304-4DD6-BCEF-509C1ED19F14",
"show_doc_url": "",
"rs_id": "",
"md_name": "Basemap (BKG) Germany",
"bbox": "-180.0000000000000000,-85.0511287798066036, 180.0000000000000000,85.0511287798066036",
"kategorie_opendata" : [
"Map"
],
"kategorie_inspire" : [
"INSPIRE-identifiziert"
],
"kategorie_organisation" : "BKG"
}
],
"notSupportedIn3D": false
},
Vorlagen zur Einbindung von WMS- & WMTS-Layern finden sich auch in der offizielle Dokumentation (Masterportal Docs).
Layer im Geoviewer aktivieren#
Hinweis
Um die zwei eingebundenen Hintergrundkarten jetzt sichbar machen zu können, müssen wir in der config.json unter „layerConfig“ > „baseLayer“ darauf verweisen. Der Code Abschnitt kann folgendermaßen aussehen.
"layerConfig": {
"baselayer": {
"elements": [
{
"id": "101",
"visibility": true,
"name": "Basemap (BKG)"
},
{
"id": "topplus_wmts",
"visibility": false,
"name": "TopPlusOpen Hintergrundkarte"
}
]
Hinweis
Achte auf die Projektion (EPSG), die du benutzt. Welche Projektion ist für dich die Richtige?
Hinweis
Für Deutschland ist das ETRS89 / UTM 32N bzw. 33N Standard.
Speichere dein Projekt und schaue dir die Änderungen in deinem Browserfenster an.
Gratulation! Die Karte sollte jetzt angepasst sein
Beispiel#
So oder do ähnlich kann ein einfacher Geoviewer ausseheb
Geoviewer Schemmerhofen als Beispiel#
Geoportal Hamburg#
Hinweis
Die Stadt Hamburg zeigt in ihrem Geoportal eine breite Palette an Werkzeugen und Möglichkeiten, die das Masterportal bietet. -> Geoportal Hamburg
Weitere nützliche Werkzeuge (Tools) config.json#
Vorsicht
Einige Werkzeuge funktionieren nur, wenn die Anwendung Online ist.
Geoobjekte auswählen & anzoomen#
Als erstes Werkzeug wollen wir eine Auswahlfunktion für Geoobjekte in unseren Geoviewer einbinden. Nutze folgenden Code-Schnipsel und teste das Auswahltool am Beispiel der Straßen („secondaryMenu“ > „section“). Wähle die Straßensegmente der Tübinger Neckarbrücke aus! Teste den Button Auf dieses Feature zoomen. Was passiert in der Layer-Übersicht?
{
"type": "selectFeatures",
"highlightVectorRulesPolygon": {
"fill": {
"color": [255, 0, 255, 0.9]
},
"stroke": {
"width": 4,
"color": [0, 0, 204, 0.9]
},
"zoomLevel": 5
},
"highlightVectorRulesPointLine": {
"fill": {
"color": [255, 0, 255, 0.9]
},
"stroke": {
"width": 8,
"color": [255, 0, 255, 0.9]
},
"image": {
"scale": 2
},
"zoomLevel": 5
}
}
Externe WFS-Dienste einbinden#
Jetzt haben wir unseren Straßenlayer eingebunden. Für unseren Auftrag ist es ebenfalls relevant die Gebäude mit zu berücksichtigen. Dafür binden wir in unserem Tübinger Beispiel den Gebäudelayer des WFS-Dienstes (LGL BW Open Data) ALKIS mit ein. Verwende für ein anderes Untersuchungsgebiet einen passenden WFS-Dienst. Bei der Suche kann das QGIS-Plugin GeoBasis_Loader helfen. Binde folgenden Code ein, verknüpfe diesen in der config.json & teste ob er im Geoviewer erscheint.
{
"id": "lgvpolygon",
"name": "gebaeude_test",
"url": "https://owsproxy.lgl-bw.de/owsproxy/wfs/WFS_LGL-BW_ALKIS",
"typ": "WFS",
"featureType": "nora:v_al_gebaeude",
"featurePrefix": "",
"outputFormat" : "image/png",
"version": "1.1.0",
"featureNS": "",
"gfiAttributes": "showAll",
"gfiTheme": "default",
"layerAttribution":"nicht vorhanden",
"legendURL":"",
"hitTolerance":"",
"datasets":[],
"urlIsVisible":true
}
Geoobjekte (Features) erstellen, bearbeiten und/oder löschen#
{
"type": "wfst",
"name": "WFS-T Tool",
"layerIds": [
"lgvline",
"lgvpoint",
"lgvpolygon"
],
"toggleLayer": false,
"lineButton": [
{
"layerId": "lgvline",
"available": true
}
],
"pointButton": [
{
"layerId": "lgvpoint",
"available": true
}
],
"polygonButton": [
{
"layerId": "lgvpolygon",
"available": true
}
],
"update": "Bearbeiten!",
"delete": true
}
WFS-Dienst filtern#
{ "type": "WFSSuche",
"instances": [
{
"requestConfig": {
"layerId": "lgvline"
},
"selectSource": "https://geoportal-hamburg.de/lgv-config/gemarkungen_hh.json",
"literals": [
{
"clause": {
"type": "and",
"literals": [
{
"field": {
"queryType": "equal",
"fieldName": "gemarkung",
"inputLabel": "Gemarkung",
"options": ""
}
},
{
"field": {
"queryType": "equal",
"fieldName": "flur",
"inputLabel": "Flur",
"options": "flur"
}
}
]
}
}
]
}
]
},