Kachelebenen

Plattform auswählen: Android iOS JavaScript

Sie können Bilder als Kachelebenen auf Ihre Karte legen. Kachelebenen werden bei einer bestimmten Zoomstufe über einer Kartenkachel platziert. Wenn genügend Kacheln vorhanden sind, können Sie die Kartendaten von Google für die gesamte Karte bei mehreren Zoomstufen ergänzen.

Einleitung

Mit Kachelebenen (auch Kachel-Overlays genannt) können Sie die Kacheln der Basiskarte von Google mit Bildern überlagern. Dies ist eine hervorragende Möglichkeit, Ihrer App Daten wie POIs oder Verkehrsinformationen sowie lokale Bilder hinzuzufügen. In Kombination mit dem Kartentyp kGMSTypeNone können Sie mithilfe von Kachelebenen die Basiskartendaten von Google effektiv durch Ihre eigenen Daten ersetzen.

Kachelebenen sind nützlich, wenn Sie der Karte umfangreiches Bildmaterial hinzufügen möchten, das in der Regel große geografische Bereiche abdeckt. Boden-Overlays sind dagegen nützlich, wenn Sie ein einzelnes Bild an einem bestimmten Punkt auf der Karte fixieren möchten.

Kachelkoordinaten

Die Google Maps API unterteilt die Bilder bei jeder Zoomstufe in einen Satz quadratischer Kartenkacheln, die in einem geordneten Raster angeordnet sind. Wenn eine Karte zu einem neuen Standort bewegt oder eine neue Zoomstufe für sie eingestellt wird, ermittelt die Google Maps API, welche Kacheln erforderlich sind, und übersetzt dies in einen abzurufenden Kachelsatz.

Bei der Implementierung der Mercator-Projektion in Google befindet sich die Kachel mit den Koordinaten (0,0) immer in der nordwestlichen Ecke der Karte. Die x-Werte nehmen von Westen nach Osten und die y-Werte von Norden nach Süden zu. Die Kacheln werden mithilfe von x,y-Koordinaten aus diesem Ursprung indexiert. Beispielsweise kann bei Zoomstufe 2, wenn die Erde in 16 Kacheln unterteilt ist, jede einzelne Kachel durch ein eindeutiges x,y-Paar referenziert werden:

Weltkarte, unterteilt in Kacheln mit 4 Zeilen und 4 Spalten

Jede Kachel ist ein Quadrat mit 256x256 Punkten. Bei Zoomstufe 0 wird die ganze Welt in einer einzigen Kachel gerendert. Jede Zoomstufe erhöht die Vergrößerung um den Faktor zwei. Bei Zoomstufe 1 wird die Karte also als Raster von 2 x 2 Kacheln, bei Zoomstufe 2 als 4 x 4-Raster, bei Zoomstufe 3 als 8 x 8-Raster usw. gerendert. Wenn Sie Bilder für eine Kachelebene erstellen, müssen Sie für jede Kachel bei jeder Zoomstufe, die unterstützt werden soll, ein neues Bild mit 256 × 256 Punkten erstellen.

Kachelebene hinzufügen

  1. Instanziieren Sie ein GMSURLTileLayer-Objekt oder eine benutzerdefinierte abgeleitete Klasse von GMSTileLayer/GMSSyncTileLayer.
  2. Sie können die Eigenschaft zIndex ändern, um ihre Position in Bezug auf andere Kachelebenen anzupassen.
  3. Weisen Sie das GMSTileLayer-Objekt der Karte zu, indem Sie seine map-Eigenschaft festlegen.

Im Maps SDK for iOS gibt es drei Klassen, mit denen eine Kachelebene implementiert werden kann. Bei jeder Klasse müssen Sie festlegen, wie die richtige Kartenkachel für einen bestimmten Satz von {x,y,zoom}-Koordinaten abgerufen wird. Folgende Optionen sind verfügbar:

  • Erstellen Sie eine abgeleitete Klasse von GMSSyncTileLayer zur Implementierung von tileForX:y:zoom, die UIImage-Instanzen zurückgibt.
  • Erstellen Sie eine abgeleitete Klasse von GMSTileLayer. Sie stellt die Implementierung der asynchronen Methode requestTileForX:y:zoom bereit, die später einen Callback mit einem Kachelbild durchführt.
  • Verwenden Sie die vorhandene Klasse GMSURLTileLayer, um Kacheln automatisch aus URLs abzurufen, und geben Sie den GMSTileURLConstructor-Block an. GMSURLTileLayer ist eine konkrete Klasse, für die keine abgeleiteten Klassen erstellt werden können.

Beim Erstellen von abgeleiteten Klassen von GMSSyncTileLayer oder GMSTileLayer wird durch die Angabe eines nil-Kachelergebnisses dem Maps SDK for iOS mitgeteilt, dass derzeit keine Daten verfügbar sind, aber möglicherweise in Zukunft. Alternativ können Sie kGMSTileLayerNoTile zurückgeben, um anzugeben, dass an dieser Stelle keine Kachel vorhanden ist.

Durch die Rückgabe von nil von GMSTileURLConstructor für GMSURLTileLayer wird angegeben, dass an dieser Position keine Kachel vorhanden ist.

Kacheln mithilfe von „GMSURLTileLayer“ von URLs abrufen

Für GMSURLTileLayer ist keine abgeleitete Klasse erforderlich, Sie müssen jedoch den GMSTileURLConstructor-Block implementieren. Der folgende Code zeigt, wie Sie mit GMSURLTileLayer den Gebäudeplan eines mehrstöckigen Gebäudes anzeigen.

Swift

let floor = 1

// Implement GMSTileURLConstructor
// Returns a Tile based on the x,y,zoom coordinates, and the requested floor
let urls: GMSTileURLConstructor = { (x, y, zoom) in
  let url = "https://www.example.com/floorplans/L\(floor)_\(zoom)_\(x)_\(y).png"
  return URL(string: url)
}

// Create the GMSTileLayer
let layer = GMSURLTileLayer(urlConstructor: urls)

// Display on the map at a specific zIndex
layer.zIndex = 100
layer.map = mapView

Objective-C

NSInteger floor = 1;

// Create the GMSTileLayer
GMSURLTileLayer *layer = [GMSURLTileLayer tileLayerWithURLConstructor:^NSURL * _Nullable(NSUInteger x, NSUInteger y, NSUInteger zoom) {
  NSString *url = [NSString stringWithFormat:@"https://www.example.com/floorplans/L%ld_%lu_%lu_%lu.png",
                   (long)floor, (unsigned long)zoom, (unsigned long)x, (unsigned long)y];
  return [NSURL URLWithString:url];
}];

// Display on the map at a specific zIndex
layer.zIndex = 100;
layer.map = mapView;

Erstellen Sie abgeleitete Klassen von GMSSyncTileLayer, um Kacheln als UIImage bereitzustellen.

GMSSyncTileLayer und GMSTileLayer sind abstrakte Klassen, die zum Erstellen von abgeleiteten Klassen vorgesehen sind. Mithilfe dieser Klassen können Sie Kacheln als UIImage-Elemente bereitstellen. Im folgenden Beispiel sehen Sie, wie Sie ein benutzerdefiniertes Bild über einigen Kacheln auf der Karte rendern, indem Sie abgeleitete Klassen von GMSSyncTileLayer erstellen.

Swift

class TestTileLayer: GMSSyncTileLayer {
  override func tileFor(x: UInt, y: UInt, zoom: UInt) -> UIImage? {
    // On every odd tile, render an image.
    if (x % 2 == 1) {
      return UIImage(named: "australia")
    } else {
      return kGMSTileLayerNoTile
    }
  }
}

Objective-C

@interface TestTileLayer : GMSSyncTileLayer
@end

@implementation TestTileLayer

- (UIImage *)tileForX:(NSUInteger)x y:(NSUInteger)y zoom:(NSUInteger)zoom {
  // On every odd tile, render an image.
  if (x % 2 == 1) {
    return [UIImage imageNamed:@"australia"];
  } else {
    return kGMSTileLayerNoTile;
  }
}

@end

Um die Kachelebene zur Karte hinzuzufügen, instanziieren Sie das Objekt und legen Sie seine Karteneigenschaft fest.

Swift

let layer = TestTileLayer()
layer.map = mapView

Objective-C

GMSTileLayer *layer = [[TestTileLayer alloc] init];
layer.map = mapView;

Kacheln mit hohem DPI-Wert für Retina-Geräte

Sie können Bilder mit hohem DPI-Wert entweder mit GMSSyncTileLayer oder GMSURLTileLayer verwenden. Setzen Sie dazu tileSize auf 512. Die Eigenschaft tileSize gibt die Anzahl der Pixel an, mit denen die zurückgegebenen Kachelbilder bevorzugt angezeigt werden. Der Standardwert ist 256 – die Dimension einer Google Maps-Kachel auf einem Nicht-Retina-Gerät.

Wenn Sie Kacheln mit normalem DPI-Wert auf einem Gerät mit hohem DPI-Wert anzeigen, können Sie die Bilder vertikal skalieren, indem Sie tileSize auf 512 setzen. Beachten Sie, dass das Skalieren von Bildern die Bildqualität beeinträchtigen kann, insbesondere bei feinen Linien oder Text. Die besten Ergebnisse erzielst du, wenn tileSize und der DPI-Wert des Bildes der Anzeige entsprechen. Karten, die auf einem Retina-Gerät dargestellt werden, sehen am besten aus, wenn Bilder mit hohem DPI-Wert mit einem tileSize von 512 dargestellt werden. Karten, die auf einem Nicht-Retina-Gerät angezeigt werden, sehen hingegen auch bei normalen Bildern mit dem Standardwert tileSize von 256 gut aus.

Veraltete Kacheln löschen

Wenn die von der Ebene bereitgestellten Kacheln veraltet sind, sollte die Methode clearTileCache für die Ebene aufgerufen werden, um eine Aktualisierung zu erzwingen. Dadurch werden alle Kacheln dieser Ebene neu geladen.

Swift

layer.clearTileCache()

Objective-C

[layer clearTileCache];