Livelli di piastrelle

Seleziona la piattaforma: Android iOS JavaScript

Puoi aggiungere immagini sulla mappa come livello di riquadri. I livelli riquadro vengono collocati sopra un riquadro della 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 delle schede (a volte chiamati overlay delle schede) ti consentono di sovrapporre le immagini alle schede della mappa di base di Google. Si tratta di un ottimo modo per aggiungere dati, come punti d'interesse o informazioni sul traffico, e immagini locali alla tua app. Se combinati con il tipo di mappa kGMSTypeNone, i livelli delle tessere ti consentono di sostituire efficacemente i dati della mappa di base di Google con i tuoi.

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

Coordinate dei riquadri

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

Per l'implementazione della proiezione di Mercatore di Google, il riquadro con la coordinata (0,0) si trova sempre nell'angolo nord-ovest della mappa, con valori x in aumento da ovest a est e valori y in aumento da nord a sud. I riquadri vengono indicizzati utilizzando le coordinate x,y di questa origine. Ad esempio, al livello di zoom 2, quando la Terra è suddivisa in 16 riquadri, a ogni riquadro può essere associato un riferimento costituito 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 unico riquadro. Ogni livello di zoom aumenta l'ingrandimento di un fattore 2. Pertanto, a livello di zoom 1 la mappa verrà visualizzata come una griglia 2x2 di riquadri, una griglia 4x4 a livello di zoom 2, una griglia 8x8 a livello di zoom 3 e così via. Se stai creando immagini per un livello di riquadri, dovrai creare una nuova immagine di punti 256 x 256 per ogni riquadro a ogni livello di zoom che vuoi supportare.

Aggiungere un livello di riquadri

  1. Crea un oggetto GMSURLTileLayer o una sottoclasse personalizzata di GMSTileLayer o GMSSyncTileLayer.
  2. Se vuoi, modifica la proprietà zIndex per regolare la sua posizione rispetto agli 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 scheda 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.
  • Sottoclasse GMSTileLayer, che fornisce l'implementazione del metodo asincrono requestTileForX:y:zoom che in seguito richiama con un'immagine a riquadri.
  • Utilizza la classe esistente GMSURLTileLayer per recuperare automaticamente i riquadri dagli URL, fornendo il blocco GMSTileURLConstructor. GMSURLTileLayer è una classe concreta che non può essere sottoclassificata.

Nel caso di sottoclassificazione di GMSSyncTileLayer o GMSTileLayer, fornire un risultato della scheda nil comunicherà a Maps SDK for iOS che i dati non sono attualmente disponibili, ma potrebbero esserlo in futuro. In alternativa, resta kGMSTileLayerNoTile per indicare che non è presente alcuna scheda in questa posizione.

Per GMSURLTileLayer, il ritorno di nil da GMSTileURLConstructor indicarà che non è presente alcuna scheda in questa posizione.

Utilizzare 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 pianta 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 sottoclassificate. Puoi utilizzare queste classi per pubblicare riquadri come UIImage. L'esempio riportato di seguito mostra come eseguire il rendering di un'immagine personalizzata su alcuni riquadri della mappa tramite la sottoclasse 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, esegui l'inizializzazione 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 alta risoluzione per i dispositivi Retina

Puoi utilizzare immagini con un alto DPI con GMSSyncTileLayer o GMSURLTileLayer impostando tileSize su 512. La proprietà tileSize indica il numero di pixel in cui le immagini dei riquadri restituite verranno preferite per la visualizzazione. 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'aumento della risoluzione delle immagini potrebbe ridurre la loro qualità, in particolare per linee sottili o testo. Per risultati ottimali, abbina il valore tileSize e i dpi delle immagini al display. Le mappe mostrate su un dispositivo Retina hanno un aspetto ottimale quando vengono visualizzate immagini ad alta risoluzione con un tileSize di 512, mentre le mappe mostrate su un dispositivo non Retina hanno un aspetto eccezionale con immagini normali e un tileSize predefinito di 256.

Eliminare i riquadri inutilizzati

Se le riquadri forniti dal livello diventano "non aggiornati", è necessario chiamare il metodo clearTileCache sul livello per forzare un aggiornamento. Verranno quindi ricaricati tutti i riquadri di questo livello.

Swift

layer.clearTileCache()

Objective-C

[layer clearTileCache];