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

Nun haben wir jede Menge Kacheln und möchten mit diesen eine digitale Karte auf unserer Website anzeigen. Woher weiß Leaflet, welche Kacheln, also welche Bilddatei, es vom verlinkten Server laden und an welcher Stelle es diese anzeigen soll? Dazu sehen wir uns zunächst einmal an, wie die Kacheln genau erstellt werden.

Um ein Bild von einer Karte in kleine überschaubare Abschnitte zu teilen, unterscheidet der Server, der die Kacheln erzeugt, zwischen verschiedenen Zoomstufen und für jede Zoomstufe erstellt er ein eigenes Set von Kacheln – praktisch eine eigene Ebene.

Da der Standard für die Größe der Kacheln 256 Pixel x 256 Pixel beträgt, ist bei der Zoomstufe 0 die gesamte Welt in einer einzigen 256 Pixel x 256 Pixel großen Kachel enthalten. In der Tabelle im vorherigen Kapitel konnten Sie ja schon erkennen, dass jede Erhöhung der Zoomstufe auch die Anzahl der anzuzeigenden Kacheln erhöht.

Um die Kacheln in der richtigen Weise zu benutzen, muss es ein Muster geben, das befolgt werden kann, um sicherzustellen, dass die richtigen Kacheln vom Server geladen werden und vom Browser des Clients an der richtigen Stelle angezeigt werden.

Im Kapitel Fügen Sie eine Schicht mit Kacheln – einen Tile-Layer – zum Kartenobjekt hinzu hatten wir die URL für den Tile Server mit http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png angegeben.

Der Teil {z}/{x}/{y} des Pfades zur PNG-Datei enthält Variablen aus denen der Name der Bilddatei berechnet werden kann.

 {z} bezeichnet die zu ladende Zoomstufe.

 {x} bezeichnet die Position auf der x-Achse der Kachel.

 {y} bezeichnet die Position auf der y-Achse.

 {s} steht für eine optionale Subdomain.

Zum Beispiel wird das Bild für die niedrigste Zoomstufe – also das Bild, welches den größten Bereich pro Pixel anzeigt – unter dem Dateinamen 0/0/0.png abgespeichert.

Abbildung: Das Bild für die niedrigste Zoomstufe 0/0/0.png.

Die vollständige URL dieses Kachelbildes auf dem OpenStreetMap Server ist http://a.tile.openstreetmap.org/0/0/0.png. Probieren Sie es aus, klicken Sie den Link an oder öffnen Sie selbst die Adresse http://a.tile.openstreetmap.org/0/0/0.png in Ihrem Internetbrowser.

Tiefergehend können Sie das Thema auf der Website von OpenStreetMap nachlesen, genau unter der Adresse http://wiki.openstreetmap.org/wiki/Slippy_map_tilenames²⁷.

Bei der Zoomstufe 1 sind die Kacheln angeordnet, wie in der nachfolgenden Grafik dargestellt.

Abbildung: Ein Bild mit allen Kacheln für die zweitniedrigste Zoomstufe.

Unter der Adresse http://a.tile.openstreetmap.org/1/0/0.png finden sie die Grafik, die sich in der Abbildung links oben befindet.