Calques de tuile

Restez organisé à l'aide des collections Enregistrez et classez les contenus selon vos préférences.
Sélectionnez une plate-forme : Android iOS JavaScript

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 par-dessus une tuile de carte à un niveau de zoom spécifique. Avec suffisamment de tuiles, vous pouvez compléter les données Google pour l'ensemble de la carte, à plusieurs niveaux de zoom.

Introduction

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

Les calques de tuiles sont utiles lorsque vous souhaitez ajouter à la carte de nombreuses images couvrant généralement de grandes zones géographiques. En revanche, 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 Google Maps divise les images à chaque niveau de zoom en un jeu de tuiles de carte carrées, organisées dans une grille ordonnée. Lorsque l'utilisateur fait défiler la carte vers un nouvel emplacement ou vers un nouveau niveau de zoom, l'API Google Maps détermine quelles tuiles sont nécessaires et les convertit en un ensemble de tuiles à récupérer.

Pour la mise en œuvre de la projection de Mercator par Google, la tuile avec les coordonnées (0,0) est toujours située à l'angle nord-ouest de la carte, les valeurs x augmentant d'ouest en est et les valeurs y augmentant du nord au sud. Les tuiles sont indexées au moyen 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 référencée par une paire x,y unique:

Chaque tuile de carte est un carré de 256x256 points. Au niveau de zoom 0, le monde entier est rendu dans une seule tuile. Chaque niveau de zoom augmente le grossissement avec un facteur de deux. Ainsi, à un niveau de zoom 1, la carte sera affichée sous forme de grille de tuiles de 2x2, de grille de 4x4 au niveau de zoom 2, de grille de 8x8 au niveau de zoom 3, etc. Si vous créez des images pour un calque de tuiles, vous devez créer une image de point de 256 x 256 pixels 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/GMSSyncTileLayer.
  2. Vous pouvez également 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 propose trois classes qui peuvent être utilisées pour implémenter un calque de tuiles. Pour chaque classe, vous devez définir comment extraire la tuile de carte appropriée pour un ensemble donné de coordonnées {x,y,zoom}. Les options disponibles sont les suivantes :

  • Sous-classe GMSSyncTileLayer, qui fournit la mise en œuvre de tileForX:y:zoom qui renvoie des instances UIImage.
  • Sous-classe GMSTileLayer, qui fournit la mise en œuvre de la méthode asynchrone requestTileForX:y:zoom qui rappelle ultérieurement avec une image de tuile.
  • Utilisez la classe existante, GMSURLTileLayer, pour récupérer automatiquement les tuiles à partir des URL, en fournissant le bloc GMSTileURLConstructor. GMSURLTileLayer est une classe concrète qui ne peut pas être sous-classée.

Dans le cas d'un sous-classement de GMSSyncTileLayer ou de GMSTileLayer, l'envoi d'un résultat de tuile nil indique au SDK Maps pour iOS que les données sont actuellement indisponibles, mais qu'elles le seront peut-être plus tard. Vous pouvez également renvoyer kGMSTileLayerNoTile pour indiquer qu'il n'y a aucune tuile à cet emplacement.

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

Utiliser "GMSURLTileLayer" pour récupérer des tuiles à partir d'URL

La méthode GMSURLTileLayer ne nécessite pas de sous-classement, mais vous devez mettre en œuvre le bloc GMSTileURLConstructor. Le code ci-dessous montre comment utiliser GMSURLTileLayer pour afficher le plan d'étage d'un bâtiment à plusieurs étages.

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;
      

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 tuiles en tant que UIImage. L'exemple ci-dessous montre comment effectuer le rendu d'une image personnalisée sur certaines tuiles de la carte en sous-classant 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
      

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

Swift

let layer = TestTileLayer()
layer.map = mapView
      

Objective-C

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

Tuiles haute résolution pour 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 avec lequel les images de tuiles renvoyées préfèrent s'afficher. La valeur par défaut est 256, soit la dimension d'une tuile Google Maps sur un appareil autre que Retina.

Si vous affichez des tuiles PPP normales sur un appareil à PPP élevé, vous pouvez augmenter la taille des images en définissant tileSize sur 512. Notez que la mise à l'échelle des images peut réduire la qualité de l'image, en particulier pour les lignes ou le texte fins. Pour de meilleurs résultats, faites correspondre la tileSize et la PPP d'image à l'écran. Les cartes affichées sur un appareil Retina offrent un meilleur rendu lorsqu'elles affichent des images avec un PPP élevé, avec un tileSize de 512. Les cartes affichées sur un appareil non Retina seront quant à elles très soignées avec les images normales et le tileSize par défaut de 256.

Effacer les tuiles obsolètes

Si les tuiles fournies par la couche deviennent "obsolètes", la méthode clearTileCache doit être appelée sur la couche pour forcer l'actualisation. Toutes les tuiles de ce calque seront alors actualisées.

Swift

layer.clearTileCache()
      

Objective-C

[layer clearTileCache];