sprachkonstrukt.de

Große Bilder mit Tiles darstellen

Nichts angezeigt, obwohl JavaScript aktiviert ist? => Neuladen. Der Orionnebel, ein 18000×18000 Pixel großes Bild vom Hubble-Teleskop Für ein aktuelles […]

Nichts angezeigt, obwohl JavaScript aktiviert ist? => Neuladen.

Der Orionnebel, ein 18000×18000 Pixel großes Bild vom Hubble-Teleskop

Für ein aktuelles Uni-Projekt stellte sich meinem Team die Aufgabe, eine Karte á la Google Maps darzustellen. Vor allem bei Karten ist es problematisch, einen hohen Detailgrad zu erreichen, ohne zu große Datenmengen handlen zu müssen: ein, sagen wir, 12000×12000 Pixel großes Bild mal eben durch einen Browser zu jagen, funktioniert einfach nicht.
Die Lösung für dieses Problem kennen wir auch von Google Maps: das Bild (die Karte) wird in einzelne Quadrate für unterschiedliche Zoomstufen geteilt, und nur der tatsächlich angezeigte Ausschnitt wird vom Server geladen.

Soweit, so gut, aber wie macht man das nun mit eigenen Inhalten? Wenn man ein großes Bild (z.B. ein Gigapixel-Panorama) oder einfach eine eigene Karte so anzeigen möchte, wie Google Maps das möchte? Erstaunlicherweise findet man zum Thema „Google Maps mit eigener Karte“ erstaunlich wenig im Internet.

Zoomify ist ein kommerzielles Projekt, das eigentlich genau das macht, was wir wollen. Es ist vor allem als Anzeigemöglichkeit von sehr großen Bildern gedacht – allerdings wird das Ergebnis per Flash angezeigt; nicht das, was man 2011 haben will.

Schauen wir uns die Google Maps API an, oder die Alternative aus der OpenStreetMap-Ecke, OpenLayers. Beides ist recht ähnlich und macht das gleiche, nämlich Karten (oder Bilder) zoom- und verschiebbar anzeigen. Bei Google Maps kann man eigene Kartentypen als zusätzliche Layer zu den bekannten Google-Layern (Karte, Satellitenbild, Hybridansicht) hinzufügen, bei OpenLayers kann man komplett eigene Layer anlegen.
Dabei wird auf die Kartendaten stets nach dem selben Schema zugegriffen: ein Webserver, der je nach Anfrage die gewünschten Bilddaten zurückliefert. Dabei besteht jede Kachel („Tile“) aus einem Bild, das typischerweise 256×256 Pixel groß ist; der Dateinamen besteht aus drei Zahlen X, Y und Z (also z.B. http://source.mymap.com/3-5-7.jpg).
Die erste Zahl (Z) entspricht der Zoomstufe oder Z-Achse, 0 wäre also die kleinste Zoomstufe, wo man praktisch das ganze Bild sieht, 16 wäre dann die 17. Zoomstufe, also ziemlich „hineingezoomt“. X und Y, die anderen beiden Zahlen, entsprechen der Koordinate in der Ebene, 0-0 wäre also die Kachel oben links, 0-1 die rechts daneben usw.

Zurück zu Zoomify. Es gibt mittlerweile mehrere Programme, die ein Bild für Zoomify exportieren können – unter anderem der Titan unter den Bildbearbeitungsprogrammen, Photoshop. Heraus kommt dabei ein Ordner, der neben der Flash-Datei zur Anzeige jede Menge Unterordner enthält, welche wiederum Bilddateien enthalten. Und, Überraschung: diese Tiles sind nach eben jenem X-Y-Z (bzw. eigentlich Z-X-Y)-Schema benannt.
Man kann also die Tiles alle in einen Ordner schieben, die Flash-Datei wegwerfen und den Ordner mit der Google Maps API oder OpenLayers als Quelle referenzieren. Tada, schon haben wir aus einem Bild aus Photoshop einen Google-Maps-Kartentyp bzw. einen OpenLayers-Layer gemacht.

Das Beispiel oben besteht aus folgendem quick-and-dirty-Code:

function mapsapi() {
  var map = new GMap2(document.getElementById("gmapcanvas"));
  var tileLayer = new GTileLayer(null, 2, 7, {
       tileUrlTemplate: 'https://sprachkonstrukt.de/wp-content/uploads/nebel/{Z}-{X}-{Y}.jpg', 
       isPng:true,
       opacity:1.0
      });
  var mapType = new GMapType([tileLayer], new GMercatorProjection(20), "Nebel");
  map.addMapType(mapType);
  map.removeMapType(G_NORMAL_MAP);
  map.removeMapType(G_SATELLITE_MAP);
  map.removeMapType(G_HYBRID_MAP);
  map.addControl(new GSmallMapControl());
  map.setCenter(new GLatLng(71.300793,-86.835937), 3);
}