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 in mehreren Zoomstufen ergänzen.

Einführung

Mit Kachelebenen (manchmal auch als Kachel-Overlays bezeichnet) können Sie Bilder der Basiskartenkacheln von Google ü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 effektiv die Basiskartendaten von Google durch Ihre eigenen Daten ersetzen.

Kachelebenen sind nützlich, wenn Sie der Karte umfassendes Bildmaterial hinzufügen möchten, in der Regel große geografische Bereiche. Boden-Overlays sind dagegen hilfreich, wenn du ein einzelnes Bild an einem Punkt der Karte fixieren möchtest.

Kachelkoordinaten

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

Bei der Implementierung der Mercator-Projektion durch 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 von diesem Ursprung aus indexiert. Beispielsweise kann bei Zoomstufe 2, wenn die Erde in 16 Kacheln aufgeteilt ist, jede 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 gesamte 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 2 × 2-Raster mit Kacheln, als 4 × 4-Raster bei Zoomstufe 2, als Raster von 8 × 8 bei Zoomstufe 3 und so weiter 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 im Verhältnis zu anderen Kachelebenen anzupassen.
  3. Weisen Sie der Karte das Objekt GMSTileLayer zu, indem Sie die zugehörige map-Eigenschaft festlegen.

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

  • Abgeleitete Klasse GMSSyncTileLayer zur Bereitstellung der Implementierung von tileForX:y:zoom, die UIImage-Instanzen zurückgibt.
  • Erstellen Sie eine Unterklasse von GMSTileLayer, die die Implementierung der asynchronen Methode requestTileForX:y:zoom bereitstellt, die später einen Callback mit einem Kachelbild durchführt.
  • Verwenden Sie die vorhandene Klasse GMSURLTileLayer, um Kacheln automatisch von URLs abzurufen. Geben Sie dabei den Block GMSTileURLConstructor an. GMSURLTileLayer ist eine konkrete Klasse, für die keine Unterklassen erstellt werden können.

Wenn Sie für GMSSyncTileLayer oder GMSTileLayer abgeleitete Klassen erstellen und ein Kachelergebnis für nil angeben, wird dem Maps SDK for iOS mitgeteilt, dass derzeit keine Daten verfügbar sind. Alternativ können Sie mit kGMSTileLayerNoTile angeben, dass an diesem Standort keine Kachel vorhanden ist.

Wenn für GMSURLTileLayer nil von GMSTileURLConstructor zurückgegeben wird, bedeutet dies, dass sich an dieser Position keine Kachel befindet.

„GMSURLTileLayer“ zum Abrufen von Kacheln von URLs verwenden

Für GMSURLTileLayer sind keine abgeleiteten Klassen erforderlich, aber Sie müssen den GMSTileURLConstructor-Block implementieren. Der folgende Code zeigt, wie Sie mit GMSURLTileLayer den Gebäudeplan eines mehrstöckigen Gebäudes anzeigen lassen können.

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;

Unterklassen von GMSSyncTileLayer erstellen, um Kacheln als UIImage bereitzustellen

GMSSyncTileLayer und GMSTileLayer sind abstrakte Klassen, die für abgeleitete Klassen entwickelt wurden. Mit diesen Klassen können Sie Kacheln als UIImage bereitstellen. Im folgenden Beispiel wird gezeigt, wie ein benutzerdefiniertes Bild über einigen Kacheln auf der Karte gerendert wird. Dazu erstellen Sie abgeleitete Klassen von GMSSyncTileLayer.

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. Dazu setzen Sie tileSize auf 512. Die tileSize-Eigenschaft gibt die Anzahl der Pixel an, mit der die zurückgegebenen Kachelbilder bevorzugt angezeigt werden. Der Standardwert ist 256 – die Abmessung einer Google Maps-Kachel auf einem Nicht-Retina-Gerät.

Wenn Sie Kacheln mit normaler DPI auf einem Gerät mit hoher DPI-Werten darstellen, können Sie die Bilder hochskalieren, indem Sie tileSize auf 512 setzen. Beachten Sie, dass das Skalieren von Bildern die Bildqualität beeinträchtigen kann, insbesondere bei dünnen Linien oder Text. Die besten Ergebnisse erzielen Sie, wenn tileSize und Bild-DPI mit der Anzeige übereinstimmen. Karten auf einem Retina-Gerät sehen am besten aus, wenn Bilder mit hohem DPI-Wert mit einem tileSize von 512 angezeigt werden. Karten auf einem Nicht-Retina-Gerät sehen hingegen mit normalen Bildern und dem standardmäßigen tileSize von 256 hervorragend aus.

Veraltete Kacheln löschen

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

Swift

layer.clearTileCache()

Objective-C

[layer clearTileCache];