Livelli di piastrelle

Seleziona la piattaforma: Android iOS JavaScript

Puoi aggiungere immagini sopra la mappa come livello di riquadro. I livelli riquadro vengono posizionati sopra un riquadro della mappa a un livello di zoom specifico. Con un numero sufficiente di riquadri, puoi integrare i dati della mappa di Google per l'intera mappa, a più livelli di zoom.

Introduzione

I livelli riquadro, a volte chiamati overlay riquadro, ti consentono di sovrapporre immagini ai riquadri della mappa base di Google. Utilizza questa funzionalità per aggiungere alla tua app dati, come punti d'interesse o informazioni sul traffico, e immagini locali. Se combinati con il tipo di mappa kGMSTypeNone, i livelli di riquadri ti consentono di sostituire i dati della mappa base di Google con i tuoi.

I livelli di riquadri sono utili quando vuoi aggiungere alla mappa immagini estese, che in genere coprono aree geografiche di grandi dimensioni. Al contrario, gli overlay del terreno sono utili quando vuoi fissare una singola immagine in un punto della mappa.

Coordinate dei riquadri

L'API di Google Maps suddivide le immagini di ogni livello di zoom in un insieme di riquadri di mappa quadrati, disposti in una griglia ordinata. Quando una mappa scorre verso una nuova posizione o un nuovo livello di zoom, l'API di Google Maps determina quali riquadri sono necessari e li converte in un insieme di riquadri da recuperare.

Nell'implementazione di Google della proiezione di Mercatore, la sezione con coordinate (0,0) si trova sempre nell'angolo nord-ovest della mappa, con i valori x che aumentano da ovest a est e i valori y che aumentano da nord a sud. I riquadri vengono indicizzati utilizzando le coordinate x,y da quell'origine. Ad esempio, al livello di zoom 2, quando la Terra è divisa in 16 riquadri, ogni riquadro può essere identificato da una coppia x,y univoca:

Mappa del mondo divisa in quattro righe e quattro colonne di riquadri.

Ogni riquadro della mappa è un quadrato di 256 x 256 punti. Al livello di zoom 0, l'intero mondo viene visualizzato in un'unica sezione. Ogni livello di zoom aumenta l'ingrandimento di un fattore di due. Ad esempio, al livello di zoom 1 la mappa viene visualizzata come una griglia di riquadri 2x2, al livello di zoom 2 come una griglia 4x4 e al livello di zoom 3 come una griglia 8x8. Per creare immagini per un livello di riquadri, crea un'immagine di 256 x 256 punti per ogni riquadro a ogni livello di zoom che vuoi supportare.

Aggiungi un livello di riquadri

  1. Crea un'istanza di un oggetto GMSURLTileLayer o di una sottoclasse personalizzata di GMSTileLayer o GMSSyncTileLayer.
  2. Facoltativamente, modifica la proprietà zIndex per regolare la sua posizione rispetto ad altri livelli di riquadri.
  3. Assegna l'oggetto GMSTileLayer alla mappa impostando la relativa proprietà map.

Maps SDK for iOS fornisce tre classi che possono essere utilizzate per implementare un livello di riquadri. Per ogni classe, dovrai definire come recuperare la sezione della mappa corretta per un determinato insieme di coordinate {x,y,zoom}. Le opzioni disponibili sono:

  • Sottoclasse GMSSyncTileLayer, che fornisce l'implementazione di tileForX:y:zoom che restituisce istanze UIImage.
  • Crea una sottoclasse di GMSTileLayer, fornendo l'implementazione del metodo asincrono requestTileForX:y:zoom che in seguito richiama un'immagine del riquadro.
  • Utilizza la classe esistente, GMSURLTileLayer, per recuperare automaticamente i riquadri dagli URL, fornendo il blocco GMSTileURLConstructor. GMSURLTileLayer è una classe concreta che non può essere sottoclassata.

In caso di sottoclassificazione di GMSSyncTileLayer o GMSTileLayer, la restituzione di un risultato tile nil indicherà a Maps SDK for iOS che i dati non sono disponibili, ma che potrebbero esserlo in futuro. In alternativa, restituisci kGMSTileLayerNoTile per indicare che non esiste un riquadro in questa posizione.

Per GMSURLTileLayer, la restituzione di nil da GMSTileURLConstructor indicherà che non esiste un riquadro in questa posizione.

Utilizza GMSURLTileLayer per recuperare i riquadri dagli URL

GMSURLTileLayer non richiede la definizione di sottoclassi, ma dovrai implementare il blocco GMSTileURLConstructor. Il codice seguente mostra come utilizzare GMSURLTileLayer per visualizzare la planimetria di un edificio a più piani.

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;

Sottoclasse GMSSyncTileLayer per pubblicare i riquadri come UIImage

GMSSyncTileLayer e GMSTileLayer sono classi astratte progettate per essere sottoclassate. Puoi utilizzare queste classi per pubblicare i riquadri come UIImage. L'esempio seguente mostra come eseguire il rendering di un'immagine personalizzata su alcune delle sezioni della mappa creando una sottoclasse di 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

Per aggiungere il livello alla mappa, crea un'istanza dell'oggetto e imposta la relativa proprietà map.

Swift

let layer = TestTileLayer()
layer.map = mapView

Objective-C

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

Riquadri ad alto DPI per dispositivi Retina

Puoi utilizzare immagini ad alta risoluzione con GMSSyncTileLayer o GMSURLTileLayer impostando tileSize su 512. La proprietà tileSize indica il numero di pixel che le immagini dei riquadri restituite preferiranno visualizzare. Il valore predefinito è 256, ovvero la dimensione di un riquadro di Google Maps su un dispositivo non Retina.

Se mostri riquadri con DPI normali su un dispositivo con DPI elevati, puoi aumentare le dimensioni delle immagini impostando tileSize su 512. Tieni presente che l'upscaling delle immagini potrebbe ridurre la qualità dell'immagine, in particolare per le linee sottili o il testo. Per ottenere risultati ottimali, abbina i DPI di tileSize e dell'immagine al display. Le mappe mostrate su un dispositivo Retina avranno un aspetto migliore se mostrano immagini con un valore DPI elevato e un tileSize di 512, mentre le mappe mostrate su un dispositivo non Retina avranno un aspetto ottimale con immagini normali e il valore tileSize predefinito di 256.

Cancella i riquadri obsoleti

Se i riquadri forniti dal livello diventano "obsoleti", è necessario chiamare il metodo clearTileCache sul livello per forzare un aggiornamento. In questo modo, tutti i riquadri di questo livello verranno ricaricati.

Swift

layer.clearTileCache()

Objective-C

[layer clearTileCache];