Geodaten implementieren

Geodaten implementieren#

Hinweis

Ziel der Übung

  • Erste Einblicke in Visual Studio Code

  • Die Extension Live Server kennenlernen

Siehe auch

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.

  1. 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
 },

Jetzt wollen wir noch eine weitere Hintergrundkarte als WMTS-Layer einbinden.

{
  "id": "topplus_wmts",
  "name": "TopPlusOpen",
  "capabilitiesUrl": "https://sgx.geodatenzentrum.de/wmts_topplus_open/1.0.0/WMTSCapabilities.xml",
  "optionsFromCapabilities": true,
  "urls": [
    "https://sgx.geodatenzentrum.de/wmts_topplus_open/tile/1.0.0/web/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.png"
  ],
  "typ": "WMTS",
  "layers": "web",
  "format": "image/png",
  "version": "1.0.0",
  "origin": [
    -3803165.98427,
    8805908.08285
  ],
  "isBaseLayer": true,
  "style": "default",
  "transparent": false,
  "tileSize": "256",
  "minScale": "0",
  "maxScale": "9999999999",
  "tileMatrixSet": "EU_EPSG_25832_TOPPLUS",
  "coordinateSystem": "EPSG:25832",
  "legend": [
    "https://sg.geodatenzentrum.de/wms_topplus_open?styles=&layer=web&service=WMS&format=image/png&sld_version=1.1.0&request=GetLegendGraphic&version=1.1.1"
  ],
  "requestEncoding": "REST",
  "resLength": "13",
  "layerAttribution": "Quellenvermerk: © Bundesamt für Kartographie und Geodäsie",
  "datasets": [
    {
      "md_id": "A1C4E929-3EC9-4758-9677-DB4970D226AB",
      "csw_url": " https://gdk.gdi-de.org/gdi-de/srv/ger/csw?",
      "show_doc_url": "https://gdk.gdi-de.org/gdi-de/srv/ger/catalog.search#/metadata/"
    }
  ]
},

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

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

http://134.2.21x.x//cgi-bin/qgis_mapserv.fcgi?MAP=/projects/data/ag/qgis-server_Lichtmasten-Projekt_v2/Lichtmastenmonitoring_in_Tuebingen.qgs

Die Kommune und deine Firma tauschen sich über ein Bauprojekt aus. Um eine schnelle, digitale und direkte Übersicht einer Straße & eines Gebäudes zu erhalten wurdest du beauftragt, den Geoviewer zu erweitern, um einen solchen Austausch zu erleichtern.

Wir haben im ersten Webinar den Straßenlayer (WFS-Dienst) aus unserem Geonode eingebunden & gestylt. Falls du diesen Straßenlayer noch nicht implementiert hast, dann füge folgenden Code in deine services.json Datei.

{
  "id": "lgvline",
  "name": "strassen_test",
  "url": "https://prxmx-gdmtesting.rue23.uni-tuebingen.de/geoserver/geonode/strassen_tuebingen/ows",
  "typ": "WFS",
  "featureType": "geonode:strassen_tuebingen",
  "featurePrefix": "",
  "outputFormat" : "image/png",
  "version": "1.1.0",
  "featureNS": "",
  "gfiAttributes": {
    "name": "Name"
  },
  "gfiTheme": "default",
  "layerAttribution":"nicht vorhanden",
      "legendURL":"",
      "hitTolerance":"",
      "datasets":[],
      "urlIsVisible":true
}

Im Anschluss an das einbinden unseres Straßen-Layers (WFS-Dienstes) haben wir diesen in style_v3.json individualisiert.

{
  "styleId": "1",
  "rules": [
    {
      "style": {
        "lineStrokeColor": [
          255, 0, 0, 0.5
        ],
        "lineStrokeWidth": 10
            }
    }
  ]
}

Um unseren eingebunden & gestylten Layer im Geoviewer sichtbar zu machen, müssen wir diesen in die config.json unter „subjectLayer“ > „elements:“ einen Verweis einfügen. Dafür können wir folgenden Code-Snippet nutzen.

{
  "id": "lgvline",
  "name": "Straßen",
  "styleId": "1",
  "visibility": true,
  "typ": "WFS"
},