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. Mit genügend Kacheln können Sie die Kartendaten von Google für die gesamte Karte in verschiedenen Zoomstufen ergänzen.

Einführung

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

Mit Kachelebenen können Sie der Karte umfassendes Bildmaterial hinzufügen, das normalerweise große geografische Bereiche abdeckt. Mit Boden-Overlays kann dagegen ein einzelnes Bild an einem Punkt der Karte fixiert werden.

Kachelkoordinaten

Die Google Maps API unterteilt die Bilder in jeder Zoomstufe in einen Satz quadratischer Kartenkacheln, die in einem geordneten Raster angeordnet sind. Wenn eine Karte zu einem neuen Standort bewegt oder ein neuer Zoomfaktor für sie eingestellt wird, ermittelt die Maps API die benötigten Kacheln und wandelt diese in einen abzurufenden Kachelsatz um.

Bei der Implementierung der Mercator-Projektion in Google befindet sich die Kachel mit der Koordinate (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. Kacheln werden mithilfe von x,y-Koordinaten aus diesem Ursprung indexiert. Zum Beispiel kann bei Zoomfaktor 2, wenn die Erde in 16 Kacheln aufgeteilt ist, jede einzelne Kachel durch ein eindeutiges x,y-Paar bezeichnet 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 vergrößert um den Faktor zwei. Bei Zoomstufe 1 wird die Karte also als 2 x 2-Kacheln oder 4 x 4 bei Zoomstufe 2, als 8 x 8-Raster bei Zoomstufe 3 gerendert. Wenn Sie Bilder für eine Kachelebene erstellen, müssen Sie für jede Kachel, 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 Unterklasse von GMSTileLayer/GMSSyncTileLayer.
  2. Ändern Sie optional das Attribut zIndex, um seine Position in Bezug auf andere Kachelebenen anzupassen.
  3. Weisen Sie der Karte das Objekt GMSTileLayer zu, indem Sie die Eigenschaft map festlegen.

Das Maps SDK for iOS bietet drei Klassen, mit denen eine Kachelebene implementiert werden kann. Für jede 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:

  • Abgeleitete Klasse GMSSyncTileLayer mit der Implementierung von tileForX:y:zoom, die UIImage-Instanzen zurückgibt.
  • Unterklasse GMSTileLayer, mit der die Implementierung der asynchronen Methode requestTileForX:y:zoom ermöglicht wird, die später mit einem Kachelbild zurückruft.
  • Sie können die vorhandene Klasse GMSURLTileLayer verwenden, um Kacheln automatisch aus URLs abzurufen. Dabei wird der Block GMSTileURLConstructor angegeben. GMSURLTileLayer ist eine konkrete Klasse, die nicht abgeleitet werden kann.

Im Falle einer Unterklasse von GMSSyncTileLayer oder GMSTileLayer wird durch das Bereitstellen eines nil-Kachelergebnisses das Maps SDK for iOS darüber informiert, dass Daten derzeit nicht verfügbar, aber möglicherweise in Zukunft verfügbar sind. Geben Sie alternativ kGMSTileLayerNoTile zurück, um anzugeben, dass an diesem Ort keine Kachel vorhanden ist.

Wenn Sie für GMSURLTileLayer nil zurückgeben, wird bei GMSTileURLConstructor angegeben, dass an diesem Ort keine Kachel vorhanden ist.

„GMSURLTileLayer“ zum Abrufen von Kacheln aus URLs verwenden

Für GMSURLTileLayer ist keine Unterklasse erforderlich. Sie müssen jedoch den GMSTileURLConstructor-Block implementieren. Der folgende Code zeigt, wie GMSURLTileLayer verwendet wird, um den Gebäudeplan eines mehrstöckigen Gebäudes anzuzeigen.

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;
      

Abgeleitete GMSSyncTileLayer, um Kacheln als UIImage bereitzustellen

GMSSyncTileLayer und GMSTileLayer sind abstrakte Klassen, die für den Einsatz von Unterklassen konzipiert sind. Sie können diese Klassen verwenden, um Kacheln als UIImage bereitzustellen. Im folgenden Beispiel wird gezeigt, wie Sie ein benutzerdefiniertes Bild über einige Kacheln auf der Karte rendern, indem Sie 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 mit GMSSyncTileLayer oder GMSURLTileLayer verwenden, indem Sie tileSize auf 512 festlegen. Das Attribut tileSize gibt die Anzahl der Pixel an, die für 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 auf einem Gerät mit hoher DPI normale DPI-Kacheln anzeigen, können Sie die Bilder vertikal skalieren, indem Sie tileSize auf 512 festlegen. Beachten Sie, dass das Hochskalieren von Bildern die Bildqualität beeinträchtigen kann, insbesondere bei feinen Linien oder Text. Die besten Ergebnisse erzielen Sie, wenn Sie tileSize und die Bild-DPI an das Display anpassen. Karten, die auf einem Retina-Gerät angezeigt werden, sehen in tileSize mit 512 am besten aus. Karten, die auf einem Nicht-Retina-Gerät erscheinen, sehen in diesem Fall mit normalen Bildern und dem Standard-tileSize-Wert von 256 toll aus.

Veraltete Kacheln werden gelöscht

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 auf dieser Ebene neu geladen.

Swift

layer.clearTileCache()
      

Objective-C

[layer clearTileCache];