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

Fügen Sie eine Schicht mit Kacheln – einen Tile-Layer – zum Kartenobjekt hinzu

Der letzte Schritt beim Erstellen der Karte ist das Hinzufügen der Kachelschicht. Diese Schicht – oder dieser Layer – kann als eine Art Basiskarte angesehen werden. Es handelt sich um die Grafiken, auf der die Geoobjekte, dargestellt werden, die wir hier im Buch erarbeiten. Also die Imagedateien.

Kacheln zum Anzeigen in einem digitalen Kartenobjekt werden als Service von unterschiedlichen Providern angeboten. Im nächsten Kapitel werde ich Ihnen genauer erläutert, dass diese Kacheln normalerweise als 256 Pixel x 256 Pixel Images angeboten werden und warum die URL zum Aufruf der Kacheln die etwas kryptisch wirkenden Zeichen /{z}/{x}/{y}.png enthält.

Ich verwende hier das Angebot von http://www.openstreetmap.org zur Darstellung der Karte. Den Programmcode zum Einbinden der Imagedateien vom OpenStreetMap Tile-Server habe ich für Sie im nachfolgenden Programmcodebeispiel mit einem Stern markiert. Die rechtlichen Voraussetzungen zur Verwendung der Kacheln des OpenStreetMap-Servers finden Sie unter der Adresse https://operations.osmfoundation.org/policies/tiles.

<!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: 180px;" id="mapid"></div> <script> var mymap = L.map('mapid').setView([50.27264, 7.26469], 13); *L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(mymap); </script> </body> </html>

Was haben wir genau gemacht? Wir haben ein TileLayer-Objekt erstellt und diesem die URL des OpenStreetMap-Servers übergeben. Außerdem haben wir die Methode addTo() aufgerufen und dieser Methode unser Kartenobjekt mymap als Parameter übergeben. So weiß Leaflet nun genau, welche Bilder es wo abrufen soll und kann die Kartenschicht zeichnen.

Ich hatte es eben schon erwähnt: Leaflet ist so programmiert, dass Sie die verschiedenen Methoden verketten können. Dies ist möglich, weil die unterschiedlichen Methoden Objekte zurückgeben, die wieder Funktionen enthalten. Leaflet setzt das Entwurfsmuster Fabrikmethode¹⁰ ein. So konnten wir .addTo(mymap) einfach an L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png') anhängen. Alternativ hätten wir zuerst ein TileLayer-Objekt erstellen müssen und hätten erst im nächsten Schritt die Methode addTo() aufrufen können.

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

Fertig! Sie haben nun eine vollständige Karte erstellt. Zählen Sie nach: In diesen vier Schritten haben Sie gerade einmal fünf Zeilen Programmcode eingegeben.

Standardmäßig sind alle Maus- und Touch-Interaktionen auf der Karte aktiviert. Probieren Sie es aus – wir haben ja bisher noch keine Optionen übergeben – alles ist Standard. Sie können die Karte vergrößern und verkleinern und in der rechten unteren Ecke befindet sich ein Hinweis darauf, dass die Karte mit Leaflet erstellt wurde. Sie können nun die ganze Welt auf dieser Karte erkunden. In der nachfolgenden Abbildung sehen Sie diese Karte – so sollte diese bei Ihnen aussehen, wenn Sie meinem Beispiel gefolgt sind.

Abbildung: Ein Screenshot der eine Landkarte mit Leaflet anzeigt.

Bevor wir die Karte nun weiterbearbeiten, sehen wir uns ein bisschen Theorie an. Falls Sie keine Theorie mögen, können sie sofort praktisch im Kapitel Die Karte mit Daten bestücken weitermachen.

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