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
:
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
- Crea un'istanza per un oggetto
GMSURLTileLayer
o una sottoclasse personalizzata diGMSTileLayer
/GMSSyncTileLayer
. - Se vuoi, puoi modificare la proprietà
zIndex
per adattarne la posizione rispetto ad altri livelli del riquadro. - 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 ditileForX:y:zoom
che restituisceUIImage
istanze. - Sottoclasse
GMSTileLayer
, che fornisce l'implementazione del metodo asincronorequestTileForX:y:zoom
che in seguito richiama con un'immagine riquadro. - Usa la classe esistente,
GMSURLTileLayer
, per recuperare automaticamente i riquadri dagli URL, fornendo il bloccoGMSTileURLConstructor
.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];