Livelli di piastrelle

Seleziona la piattaforma: Android iOS JavaScript

Puoi aggiungere immagini nella parte superiore della mappa come livello riquadro. I livelli dei riquadri sono posizionati sopra il riquadro di una mappa a un livello di zoom specifico. Con un numero sufficiente di riquadri, puoi integrare i dati delle mappe di Google per l'intera mappa, a più livelli di zoom.

Introduzione

I livelli dei riquadri (a volte indicati come overlay riquadro) consentono di sovrapporre immagini ai riquadri della mappa base di Google. Questo è un modo eccellente 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 consentono di sostituire in modo efficace i dati della mappa base di Google con i tuoi.

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

Coordinate dei riquadri

L'API di Google Maps suddivide le immagini a ogni livello di zoom in una serie di riquadri di mappe quadrati, disposti in una griglia ordinata. Quando una mappa scorre fino a una nuova posizione o a 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.

Per l'implementazione della proiezione di Mercatore da parte di Google, il riquadro con la coordinata (0,0) è sempre nell'angolo nord-ovest della mappa, con i valori x che aumentano da ovest a est e i valori di y aumentano da nord a sud. I riquadri vengono indicizzati utilizzando le coordinate di 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 univoca di x,y:

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

Ogni riquadro della mappa è un quadrato di 256 x 256 punti. A livello di zoom 0, il mondo intero viene visualizzato in un unico riquadro. Ogni livello di zoom aumenta l'ingrandimento di un fattore di due. Pertanto, al livello di zoom 1, la mappa verrà visualizzata come una griglia 2x2 di riquadri o una griglia 4x4 al livello di zoom 2, come una griglia 8x8 al livello di zoom 3 e così via. Se stai creando immagini per un livello di riquadro, dovrai creare una nuova immagine di 256 x 256 punti per ogni riquadro a ogni livello di zoom che desideri supportare.

Aggiunta di un livello riquadro

  1. Crea un'istanza per un oggetto GMSURLTileLayer o una sottoclasse personalizzata di GMSTileLayer/GMSSyncTileLayer.
  2. Se vuoi, puoi modificare la proprietà zIndex per adattarne la posizione rispetto ad altri livelli del riquadro.
  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 corso, devi definire come recuperare il riquadro della mappa corretto 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 UIImage istanze.
  • Sottoclasse GMSTileLayer, che fornisce l'implementazione del metodo asincrono requestTileForX:y:zoom che in seguito richiama con un'immagine riquadro.
  • Usa la classe esistente, GMSURLTileLayer, per recuperare automaticamente i riquadri dagli URL, fornendo il blocco GMSTileURLConstructor. GMSURLTileLayer è una classe concreta che non può essere classificata come sottoclasse.

Nel caso della sottoclasse GMSSyncTileLayer o GMSTileLayer, se fornisci un risultato di riquadro nil, comunicherà a Maps SDK per iOS che i dati non sono al momento disponibili, ma che potrebbero essere disponibili in futuro. In alternativa, restituisci kGMSTileLayerNoTile per indicare che non è presente alcun riquadro in questa posizione.

Per GMSURLTileLayer, se torni nil da GMSTileURLConstructor indicherai che non è presente alcun riquadro in questa posizione.

Utilizzo di "GMSURLTilelayer" per recuperare i riquadri dagli URL

L'elemento GMSURLTileLayer non richiede la creazione di sottoclassi, ma dovrai implementare il blocco GMSTileURLConstructor. Il codice seguente mostra come utilizzare GMSURLTileLayer per mostrare la pianta dei piani 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 riquadri come UIImage

GMSSyncTileLayer e GMSTileLayer sono classi astratte progettate per essere sottoclassi. Puoi usare questi corsi per pubblicare riquadri come quelli di UIImage. L'esempio di seguito mostra come eseguire il rendering di un'immagine personalizzata su alcuni dei riquadri della mappa mediante la creazione di sottoclassi 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 le relative proprietà di mappa.

Swift

let layer = TestTileLayer()
layer.map = mapView

Objective-C

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

Riquadri con DPI elevato per dispositivi Retina

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

Se visualizzi riquadri DPI normali su un dispositivo con un valore DPI elevato, puoi ridimensionare le immagini impostando tileSize su 512. Tieni presente che il miglioramento delle dimensioni può ridurre la qualità delle immagini, in particolare per linee sottili o testo. Per risultati ottimali, associa tileSize e DPI dell'immagine al display. Le mappe mostrate su un dispositivo Retina avranno un aspetto migliore quando vengono visualizzate immagini ad alta DPI con un valore tileSize di 512, mentre le mappe mostrate su un dispositivo non Retina avranno un aspetto migliore con immagini normali e il valore predefinito di tileSize è 256.

Rimozione riquadri inattivi

Se i riquadri forniti dal livello diventano "inattivi", deve essere chiamato il metodo clearTileCache sul livello per forzare l'aggiornamento. Tutti i riquadri di questo livello verranno ricaricati.

Swift

layer.clearTileCache()

Objective-C

[layer clearTileCache];