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 und für mehrere Zoomstufen ergänzen.

Einführung

Mit Kachelebenen, die manchmal auch als Kachel-Overlays bezeichnet werden, können Sie Bilder über die Kacheln der Basiskarte von Google legen. Mit dieser Funktion können Sie Ihrer App Daten wie Points of Interest oder Verkehrsinformationen sowie lokale Bilder hinzufügen. In Kombination mit dem Kartentyp kGMSTypeNone können Sie mit Kachelebenen die Daten der Basiskarte von Google effektiv durch Ihre eigenen Daten ersetzen.

Kachelebenen sind hilfreich, um der Karte umfassendes Bildmaterial hinzuzufügen, zumeist um große geografische Bereiche abzudecken. Mit Boden-Overlays kann dagegen ein einzelnes Bild an einem Punkt der Karte fixiert werden.

Kachelkoordinaten

Die 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 Werte in einen abzurufenden Kachelsatz um.

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 der Koordinaten x,y dieses Ursprungs indexiert. Zum Beispiel kann bei Zoomstufe 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 die Darstellung um den Faktor zwei. Bei Zoomstufe 1 wird die Karte beispielsweise mit einem Raster von 2 × 2 Kacheln gerendert, bei Zoomstufe 2 mit einem Raster von 4 × 4 Kacheln und bei Zoomstufe 3 mit einem Raster von 8 × 8 Kacheln. Wenn Sie Bilder für eine Kachelebene erstellen möchten, erstellen Sie für jede Kachel bei jeder Zoomstufe, die unterstützt werden soll, ein Bild mit 256 × 256 Punkten.

Kachelebene hinzufügen

  1. Instanziieren Sie ein GMSURLTileLayer Objekt oder eine benutzerdefinierte Unterklasse von GMSTileLayer oder GMSSyncTileLayer.
  2. Optional können Sie die zIndex-Eigenschaft ändern, um die Position der Ebene im Verhältnis zu anderen Kachelebenen anzupassen.
  3. Weisen Sie der Karte das GMSTileLayer-Objekt zu, indem Sie die zugehörige map -Eigenschaft festlegen.

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

  • Unterklasse von GMSSyncTileLayer erstellen und die Implementierung von tileForX:y:zoom bereitstellen, die UIImage-Instanzen zurückgibt.
  • Unterklasse von GMSTileLayer erstellen und die Implementierung der asynchronen Methode requestTileForX:y:zoom bereitstellen, die später mit einem Kachelbild zurückgerufen wird.
  • Die vorhandene Klasse GMSURLTileLayer verwenden, um Kacheln automatisch von URLs abzurufen, und den GMSTileURLConstructor-Block bereitstellen. GMSURLTileLayer ist eine konkrete Klasse, die nicht als abgeleitete Klasse verwendet werden kann.

Wenn Sie eine Unterklasse von GMSSyncTileLayer oder GMSTileLayer erstellen und ein nil-Kachelergebnis bereitstellen, wird dem Maps SDK for iOS mitgeteilt, dass keine Daten verfügbar sind, aber möglicherweise in Zukunft verfügbar sein werden. Alternativ können Sie kGMSTileLayerNoTile zurückgeben, um anzugeben, dass an dieser Position keine Kachel vorhanden ist.

Wenn Sie für GMSURLTileLayer nil von GMSTileURLConstructor zurückgeben, wird angegeben, dass an dieser Position keine Kachel vorhanden ist.

Kacheln mittels "GMSURLTileLayer" von URLs abrufen

Für GMSURLTileLayer ist keine Unterklasse erforderlich, aber Sie müssen den GMSTileURLConstructor-Block implementieren. Im folgenden Code wird gezeigt, wie Sie mit GMSURLTileLayer den Grundriss 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;
      

Kacheln mittels Unterklassen von "GMSSyncTileLayer" als UIImage-Element bereitstellen

GMSSyncTileLayer und GMSTileLayer sind abstrakte Klassen, die als abgeleitete Klassen konzipiert sind. Mit diesen Klassen können Sie Kacheln als UIImage-Elemente bereitstellen. Im folgenden Beispiel wird gezeigt, wie Sie ein benutzerdefiniertes Bild über einigen Kacheln auf der Karte rendern, indem Sie eine Unterklasse 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 mit GMSSyncTileLayer oder GMSURLTileLayer verwenden, indem Sie tileSize auf 512 festlegen. Die tileSize-Eigenschaft gibt die Anzahl der Pixel an, die für die zurückgegebenen Kachelbilder bevorzugt angezeigt werden sollen. Der Standardwert ist 256, die Dimension einer Google Maps-Kachel auf einem Gerät ohne Retina-Display.

Wenn Sie Kacheln mit normalem DPI-Wert auf einem Gerät mit hohem DPI-Wert anzeigen, können Sie die Bilder vergrößern, indem Sie tileSize auf 512 festlegen. Beachten Sie, dass die Bildqualität durch das Vergrößern von Bildern beeinträchtigt werden kann, insbesondere bei feinen Linien oder Text. Die besten Ergebnisse erzielen Sie, wenn Sie tileSize und Bild-DPI an das Display anpassen. Karten, die auf einem Retina-Gerät angezeigt werden, sehen am besten aus, wenn Bilder mit hohem DPI-Wert und einem tileSize-Wert von 512 verwendet werden. Karten, die auf einem Gerät ohne Retina-Display angezeigt werden, sehen mit normalen Bildern und 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. Das führt dazu, dass alle Kacheln dieser Ebene neu geladen werden.

Swift

layer.clearTileCache()
      

Objective-C

[layer clearTileCache];