Map Tiles im CRS.Simple (Leaflet)

TileLayer

Ein TileLayer für Leaflet muss in einem bestimmten Orderschema angegeben werden, damit Leaflet die Tiles an die Richtigen Stellen plazieren kann.

"<Pfad zum Überordner>/{z}/{x}/{y}.png"

Wobei der hintere Teil zur Einbindung mit z, x, y in der Pfadangabe stehen bleibt. Im Verzeichnis selbst werden die Ordner und Dateien durchnummeriert.

• Überordner
  • 0
    • 0
      • 0.png
  • 1
    • 0
      • 0.png
      • 1.png
    • 1
      • 0.png
      • 1.png ...

Die Ordnerstruktur ergibt also ein Kooridnatensystem für die jeweilige Zoomstufe über die Bennenung der Ordner und Dateien.

Wenn ein sich wiederholendes Pattern grundlage für den Map Layer werden soll, so kann diese Pfadangabe auch durch eine einzige Datei ersetzt werden, oder z.B ein Bild pro Zoomstufe verwendet werden.

Diese Struktur erhält man automatisch bei der Verwendung von Map Tools. kann aber auch wie z.B für Bilder per Hand oder einem Skript erzeugt werden indem man ein groß genuges Bild immer und immer wieder in gleiche Teile teilt und in die Struktur einfügt.

Einbindung in Map

Bei der Nutzung eines Bildes anstatt eines Karte mit Geokoordinaten kann Leaflet allerdings nicht ohne weiteres mit den Daten umgehen und man muss deshalb neue Transformation- sowie eine Zoom- und eine Scalefunktion schreiben.

var crs = L.CRS.Simple

crs.transformation = new L.Transformation(1, {tileextent0}, -1, {tileextent1});  

crs.scale = function(zoom) {
    return Math.pow(2, zoom) / mapMinResolution;
  };  

crs.zoom = function(scale) {
	return Math.log(scale * mapMinResolution) / Math.LN2;
  };

Mit der unproject-Funtktion von Leaflet werden GeoKoordinaten in 2D Punkte umgewandlet. Diese Funktion benötigen wir zum setzen der Grenzen

p1 = crs.unproject(L.point(x1, y1)
p2 = crs.unproject(L.point(x2, y2)
map.fitBounds([p1, p2]);