Читать книгу Leaflet - Astrid Günther - Страница 32

Eine einfache Leaflet-Karte mithilfe des Web-Map-Services erstellen

Eine Alternative zur schon beschriebenen Kacheltechnik ist der Web-Map-Service (WMS)³⁴. Der WMS ist ein Spezialfall eines Web Services³⁵. Dieser Service bietet Ihnen eine Schnittstelle zum Abrufen von Landkartenausschnitten über das Internet.

Ein WMS bietet drei Funktionen, die von einem Benutzer angefragt werden können. Die Funktionen

GetCapabilities und GetFeatureInfo können wir hier vernachlässigen. Diese sind für die Anzeige der Karte nicht relevant.

Die Funktion GetMap ist die, die wir uns genauer ansehen und die von Leaflet angewendet wird.

Bei einem Aufruf von GetMap liefert der WMS ein georeferenziertes36 Rasterbild.

Bei einem georeferenzierten Rasterbild handelt es sich um eine Bilddatei, der raumbezogene Informationen hinzugefügt wurden. Das hört sich zunächst einmal sehr theoretisch an. Praktisch können Sie sich den Vorgang der Georeferenzierung so veranschaulichen: Stellen Sie sich vor, dass das Bild auf einen Bereich auf der Erde gelegt wird. Gleichzeitig wird das Gradnetz der Erde dieses Bereichs mit dem Bild verbunden. Im Ergebnis wird also jedem Pixel des Bildes eine Koordinate zugewiesen – in Relation zum Gradnetz der Erde. Georeferenzierung kennen Sie vielleicht auch unter dem Begriff Geokodierung, Geotagging oder Verortung.

Innerhalb des GetMap Aufrufs können Sie Optionen auswählen. Zum Beispiel können Sie angeben,

welches Koordinatensystem zugrunde gelegt werden soll,

welchen Kartenausschnitt Sie sehen möchten,

wie groß der Kartenausschnitt sein soll oder

welches Ausgabeformat Sie gerne hätten.

Mit folgendem URL-Abruf erhalten Sie beispielsweise ein speziell zusammengestelltes Bild vom GeoWebservice des Deutschen Wetterdienstes³⁷ ³⁸.

https://maps.dwd.de/geoserver/dwd/ows?service=WMS&version=1.3 &request=GetMap &layers=dwd:Warnungen_Landkreise &bbox=6.15,51.76,14.90,55.01 &width=512 &height=418 &srs=EPSG:4326 &format=image%2Fjpeg &CQL_FILTER=EC_II%20IN%20('51','52')

Probieren Sie es aus: Der Aufruf der URL im Browser produziert eine Karte mit allen momentan ausgegebenen gültigen Windwarnungen der Kategorie 51 (Windböen) und 52 (Sturmböen) für Norddeutschland. Ausgegeben im JPG-Format. Sie sehen allerdings nur dann ein Bild, wenn tatsächlich Wetterwarnungen vorhanden sind.

Eine Anleitung zur Nutzung des Geo-Webservices des Deutschen Wetterdienstes finden Sie unter der Adresse. https://www.dwd.de/DE/wetter/warnungen_aktuell/objekt_einbindung/einbindung_karten_geowebservice.pdf?__blob=publicationFile&v=11

Detaillierte technische Informationen zum Web Mapping Service (WMS) allgemein finden Sie unter der Adresse http://www.opengeospatial.org/standards/wms im Internet. Ausführliche Informationen zu den möglichen Funktionen eines Geoservers finden Sie unter http://docs.geoserver.org.

Ich möchte Sie hier an dieser Stelle nicht mit trockenen Dokumentationen von Web Services langweilen. Viel lieber zeige ich Ihnen ein praktisches Beispiel. Im nachfolgenden Programmcodeausschnitt sehen Sie die wesentlichen Zeilen mit einem Stern markiert.

<!DOCTYPE HTML> <html> <head> <title>Eine OSM-Karte mit Leaflet</title> <link rel="stylesheet" href="../leaflet/leaflet.css" /> <script src="../leaflet/leaflet.js"></script> </head> <body> <div style="height: 700px;" id="mapid"></div> <script> var mymap = L.map('mapid').setView([50.27264, 7.26469], 7); *var dwd = L.tileLayer.wms("https://maps.dwd.de/geoserver/dwd/wms", { *layers:'dwd:bluemarble', *}).addTo(mymap); </script> </body> </html>

Wenn Sie dieses Beispiel mit dem Laden eines L.tileLayer ohne WMS vergleichen, ist eigentlich nur eine Zeile anders.

Anstelle der Zeile

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(mymap);

haben wir

L.tileLayer.wms("https://maps.dwd.de/geoserver/dwd/wms", { layers:'dwd:bluemarble', }).addTo(mymap);

eingefügt.

Wichtig ist, dass Sie dem Aufruf L.tileLayer.wms

die richtige Adresse zum WMS Service mitgeben und

die Option layers

passend setzen.

Für alle anderen Parameter setzt Leaflet oder der Service selbst Standardwerte ein – falls Sie nichts Spezielles angeben.

Möchten Sie wissen, was vom WMS-Service geliefert wird? Dann öffnen Sie doch die HTML-Datei des vorherigen Beispiels in Ihrem Browser. Mit dem Layer dwd:bluemarble können Sie ein Satellitenbild zu Ihrer Karte hinzufügen. Wie das genau aussieht, sehen Sie im nachfolgenden Bild.

Abbildung: Ein Satellitenbild, das über einen WMS-Service geladen wurde.

Подняться наверх