Calques de tuile

Vous pouvez ajouter des images au-dessus de votre carte sous la forme d'un calque de tuiles. Les calques de tuiles sont placés au-dessus d'une tuile de carte à un niveau de zoom donné. Si vous avez suffisamment de tuiles, vous pouvez compléter les données de carte de Google pour l'ensemble de la carte, à différents niveaux de zoom.

Introduction

Les calques de tuiles (parfois appelés superpositions de tuiles) vous permettent de superposer des images sur les tuiles de la carte de base de Google. C'est un excellent moyen d'ajouter des données (comme des points d'intérêt ou des informations sur le trafic) et des images locales à votre application. Combiné au type de carte kGMSTypeNone, les calques de tuiles vous permettent de remplacer les données de la carte de base de Google par les vôtres.

Les calques de tuiles sont utiles si vous souhaitez ajouter un grand nombre d'images à la carte, en général pour couvrir de vastes zones géographiques. Inversement, les superpositions au sol sont utiles lorsque vous souhaitez corriger une seule image sur un point de la carte.

Coordonnées de tuile

L'API Maps divise les images à chaque niveau de zoom en un jeu de tuiles de carte carrées, qui sont organisées dans une grille ordonnée. Lorsque l'utilisateur fait défiler la carte vers un nouveau point géographique ou modifie le niveau de zoom, l'API Google Maps détermine quelles tuiles sont nécessaires, puis traduit ces informations en un jeu de tuiles à récupérer.

Quand Google implémente la projection de Mercator, la tuile avec les coordonnées (0,0) est toujours à l'angle nord-ouest de la carte, avec les valeurs x augmentant d'ouest en est et les valeurs y augmentant du nord au sud. Les tuiles sont indexées à l'aide des coordonnées x,y à partir de cette origine. Par exemple, au niveau de zoom 2, lorsque la Terre est divisée en 16 tuiles, chaque tuile peut être désignée par une paire x,y unique:

Chaque tuile de carte est un carré de 256x256 points. À un niveau de zoom 0, le monde entier est rendu sous la forme d'une seule tuile. Chaque niveau de zoom augmente le grossissement avec un facteur de deux. Ainsi, au niveau de zoom 1, le rendu de la carte est effectué sous forme de grille de tuiles de 2x2, ou de grille de 4x4 au niveau de zoom 2, de grille de 8x8 au niveau de zoom 3, et ainsi de suite. Si vous créez des images pour un calque de tuiles, vous devez créer une nouvelle image de 256 x 256 points pour chaque tuile à chaque niveau de zoom que vous souhaitez prendre en charge.

Ajouter un calque de tuiles

1. Instanciez un objet GMSURLTileLayer ou une sous-classe personnalisée de GMSTileLayer ou GMSSyncTileLayer.
2. Vous pouvez modifier la propriété zIndex pour ajuster sa position par rapport aux autres calques de tuiles.
3. Attribuez l'objet GMSTileLayer à la carte en définissant sa propriété map.

Le SDK Maps pour iOS fournit trois classes pouvant être utilisées pour implémenter un calque de tuiles. Pour chaque classe, vous devrez définir comment récupérer la carte de tuile appropriée pour un ensemble donné de coordonnées {x,y,zoom}. Les options disponibles sont les suivantes :

• Sous-classe GMSSyncTileLayer, fournissant l'implémentation de tileForX:y:zoom qui renvoie des instances UIImage.
• Sous-classe GMSTileLayer, fournissant l'implémentation de la méthode asynchrone requestTileForX:y:zoom qui appelle ultérieurement avec une image de carte.
• Utilisez la classe existante, GMSURLTileLayer, pour extraire automatiquement des cartes à partir d'URL, en fournissant le bloc GMSTileURLConstructor. GMSURLTileLayer est une classe concrète qui ne peut pas être sous-classée.

En cas de sous-classe GMSSyncTileLayer ou GMSTileLayer, fournir un résultat de carte nil indique au SDK Maps pour iOS que les données ne sont pas disponibles pour le moment, mais qu'elles pourraient l'être à l'avenir. Vous pouvez également renvoyer kGMSTileLayerNoTile pour indiquer qu'il n'y a pas de carte à cet emplacement.

Pour GMSURLTileLayer, renvoyer nil à partir de GMSTileURLConstructor indique qu'il n'y a pas de carte à cet emplacement.

Utiliser GMSURLTileLayer pour extraire des tuiles à partir d'URL

Le GMSURLTileLayer ne nécessite pas de sous-classement, mais vous devrez implémenter le bloc GMSTileURLConstructor. Le code ci-dessous montre comment utiliser GMSURLTileLayer pour afficher le plan d'un bâtiment à plusieurs étages.

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
      

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;
      

Sous-classe GMSSyncTileLayer pour diffuser des tuiles en tant que UIImage

GMSSyncTileLayer et GMSTileLayer sont des classes abstraites conçues pour être sous-classées. Vous pouvez utiliser ces classes pour diffuser des cartes en tant que UIImage. L'exemple ci-dessous montre comment afficher une image personnalisée sur certaines des tuiles de la carte en sous-classant GMSSyncTileLayer.

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
    }
  }
}

      

@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
      

Pour ajouter le calque à votre carte, instanciez l'objet et définissez ses propriétés de carte.

let layer = TestTileLayer()
layer.map = mapView
      

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

Tuiles haute résolution pour les appareils Retina

Vous pouvez utiliser des images haute résolution avec GMSSyncTileLayer ou GMSURLTileLayer en définissant tileSize sur 512. La propriété tileSize indique le nombre de pixels que les images de tuiles renvoyées préfèrent afficher. Par défaut, cette valeur est de 256, soit la dimension d'une tuile Google Maps sur un appareil non Retina.

Si vous affichez des tuiles dpi normales sur un appareil à dpi élevé, vous pouvez mettre à l'échelle les images en définissant tileSize sur 512. Notez que l'upscaling des images peut réduire la qualité de l'image, en particulier pour les lignes fines ou le texte. Pour de meilleurs résultats, faites correspondre les dpi tileSize et d'image à l'écran. Les cartes affichées sur un appareil Retina sont optimales lorsqu'elles affichent des images haute résolution avec une valeur tileSize de 512. En revanche, les cartes affichées sur un appareil non Retina sont optimales avec des images normales et une valeur tileSize par défaut de 256.

Effacer des tuiles obsolètes

Si les tuiles fournies par le calque deviennent "obsolètes", la méthode clearTileCache doit être appelée sur le calque pour forcer l'actualisation. Cela permettra de recharger toutes les tuiles de cette couche.

layer.clearTileCache()
      

[layer clearTileCache];