Calques de tuile

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 tuile sont placé au-dessus d'une tuile de carte à un niveau de zoom spécifique. Avec suffisamment de vignettes, vous peut compléter les données cartographiques 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 au-dessus des tuiles de la carte de base de Google. C'est un excellent moyen d'ajouter des données (points d'intérêt ou informations sur la circulation, par exemple) et des images locales votre application. Lorsqu'elle est combinée 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 pour ajouter un grand nombre d'images, généralement couvrant de vastes zones géographiques. En revanche, les valeurs Les superpositions sont utiles lorsque vous souhaitez corriger une seule image point sur la carte.

Coordonnées de tuile

L'API Google Maps divise les images à chaque niveau de zoom en un ensemble de cartes carrées. des tuiles, qui sont organisées dans une grille ordonnée. Lorsqu'une carte défile jusqu'à un nouveau lieu ou à un nouveau niveau de zoom, l'API Google Maps détermine quelles tuiles sont nécessaires, et le traduit en un jeu de tuiles à récupérer.

Pour l'implémentation par Google de la projection de Mercator, la carte avec la coordonnée (0,0) se trouve toujours à l'angle nord-ouest de la carte, avec des 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, à l'adresse niveau de zoom 2, lorsque la Terre est divisée en 16 tuiles, chaque tuile peut être référencées par une paire x,y unique:

Carte du monde divisée en quatre lignes et quatre colonnes de tuiles.

Chaque tuile de carte est un carré de 256x256 points. À un niveau de zoom 0, le monde entier est affichées dans une seule carte. Chaque niveau de zoom augmente le grossissement facteur de 2. Ainsi, à un niveau de zoom 1, le rendu de la carte est effectué sous la forme d'une grille 2x2 une grille de 4 x 4 au niveau de zoom 2, une grille de 8 x 8 au niveau de zoom 3, etc. Si vous créez des images pour un calque de tuiles, vous devez créer un nouveau Image de 256 x 256 points pour chaque tuile à chaque niveau de zoom que vous souhaitez prendre en charge.

Ajout d'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 dans par rapport aux autres calques de tuiles.
  3. Attribuez l'objet GMSTileLayer à la carte en définissant son map .

Le SDK Maps pour iOS fournit trois classes qui peuvent être utilisées pour implémenter une couche de tuiles. Pour chaque classe, vous devez définir le mode d'extraction la bonne tuile de carte 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 UIImage instances.
  • Sous-classe GMSTileLayer, fournissant l'implémentation de l'authentification asynchrone requestTileForX:y:zoom qui rappelle plus tard avec une image de tuile.
  • Utiliser la classe existante, GMSURLTileLayer, pour récupérer automatiquement des cartes des URL, ce qui fournit le bloc GMSTileURLConstructor. GMSURLTileLayer est une classe concrète qui ne peut pas être sous-classée.

Dans le cas du sous-classement de GMSSyncTileLayer ou GMSTileLayer, fournir une Le résultat de la tuile nil indiquera au SDK Maps pour iOS que les données sont actuellement mais qu'elle le sera peut-être à l'avenir. Par ailleurs, renvoyez kGMSTileLayerNoTile pour indiquer qu'il n'y a pas de carte à ce niveau l'emplacement.

Pour GMSURLTileLayer, le fait de renvoyer nil à partir de GMSTileURLConstructor aura pour effet indique qu'il n'y a pas de vignette à cet emplacement.

Utilisation de "GMSURLTileLayer" pour extraire des tuiles à partir des URL

GMSURLTileLayer ne nécessite pas de sous-classement, mais vous devez implémenter le bloc GMSTileURLConstructor. Le code ci-dessous montre comment Utilisez 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 cartes en tant que UIImage

GMSSyncTileLayer et GMSTileLayer sont des classes abstraites conçues pour être sous-classés. Vous pouvez utiliser ces classes pour diffuser des cartes en tant que UIImage. Ci-dessous L'exemple montre comment afficher 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 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 la tuile renvoyée. les images s'afficheront sous la forme suivante : la valeur par défaut est 256, la dimension d'une tuile Google Maps sur un appareil autre que Retina.

Si vous affichez des tuiles PPP normales sur un appareil haute résolution, vous pouvez mettre à l'échelle les images en définissant tileSize sur 512. Notez que l'augmentation de la taille des images de l'image, en particulier pour les lignes fines ou le texte. Pour obtenir de meilleurs résultats, faites correspondre les tileSize et la valeur PPP de l'image à l'écran. Les cartes affichées sur un appareil Retina Elles apparaissent sous leur meilleur jour lors de l'affichage d'images haute résolution avec un tileSize de 512. tandis que les cartes affichées sur un appareil autre que Retina offrent un meilleur rendu avec des images normales et le tileSize par défaut de 256.

Effacement des vignettes obsolètes

Si les tuiles fournies par le calque deviennent « obsolètes », alors la méthode clearTileCache doit être appelé sur le calque pour forcer l'actualisation. Cela permettra entraîner le rechargement de toutes les tuiles de cette couche.

Swift

layer.clearTileCache()

Objective-C

[layer clearTileCache];