In questa pagina viene descritta l'utilità delle mappe termiche disponibile nella libreria di utilità per Maps SDK for iOS. Le mappe termiche sono utili per rappresentare la distribuzione e la densità dei punti dati su una mappa.
Questo video illustra l'uso delle mappe termiche in alternativa agli indicatori, quando i tuoi dati richiedono un elevato numero di punti dati sulla mappa.
Le mappe termiche consentono ai visualizzatori di comprendere facilmente la distribuzione e l'intensità relativa dei punti dati su una mappa. Anziché posizionare un indicatore in ogni posizione, le mappe termiche utilizzano colori per rappresentare la distribuzione dei dati.
Nell'esempio seguente, il rosso rappresenta le aree con un'elevata concentrazione di stazioni di polizia nello stato di Victoria, in Australia.
Se non hai ancora configurato la libreria, segui la guida alla configurazione prima di leggere il resto di questa pagina.
Aggiungere una mappa termica semplice
Per aggiungere una mappa termica alla tua mappa, è necessario un set di dati costituito dalle coordinate di ciascun luogo di interesse. Innanzitutto, crea un'istanza GMUHeatmapTileLayer
, impostando la proprietà map
su GMSMapView
.
Esegui questa operazione nella funzione viewDidLoad()
dell'app per assicurarti che la mappa base venga
caricata prima di utilizzare la mappa termica. Quindi passa una raccolta di
oggetti GMUWeightedLatLng
all'istanza GMUHeatmapTileLayer
.
L'utilità fornisce la classe GMUHeatmapTileLayer
, che accetta una
raccolta di oggetti GMUWeightedLatLng
. Crea le immagini dei riquadri per vari livelli di zoom, in base alle opzioni di raggio, gradiente e opacità fornite.
Diamo un'occhiata ai passaggi in modo più dettagliato:
- Crea un'istanza
GMUHeatmapTileLayer
, impostando la proprietàmap
suGMSMapView
(esegui questa operazione nella funzioneviewDidLoad()
dell'app). - Passa una raccolta di oggetti
GMUWeightedLatLng
all'istanzaGMUHeatmapTileLayer
. - Chiama
GMUHeatmapTileLayer.map
, passando la visualizzazione mappa.Swift
class Heatmap: UIViewController { private var mapView: GMSMapView! private var heatmapLayer: GMUHeatmapTileLayer! override func viewDidLoad() { super.viewDidLoad() heatmapLayer = GMUHeatmapTileLayer() heatmapLayer.map = mapView } // ... func addHeatmap() { // Get the data: latitude/longitude positions of police stations. guard let path = Bundle.main.url(forResource: "police_stations", withExtension: "json") else { return } guard let data = try? Data(contentsOf: path) else { return } guard let json = try? JSONSerialization.jsonObject(with: data, options: []) else { return } guard let object = json as? [[String: Any]] else { print("Could not read the JSON.") return } var list = [GMUWeightedLatLng]() for item in object { let lat = item["lat"] as! CLLocationDegrees let lng = item["lng"] as! CLLocationDegrees let coords = GMUWeightedLatLng( coordinate: CLLocationCoordinate2DMake(lat, lng), intensity: 1.0 ) list.append(coords) } // Add the latlngs to the heatmap layer. heatmapLayer.weightedData = list } }
Objective-C
@implementation Heatmap { GMSMapView *_mapView; GMUHeatmapTileLayer *_heatmapLayer; } - (void)viewDidLoad { [super viewDidLoad]; _heatmapLayer = [[GMUHeatmapTileLayer alloc] init]; _heatmapLayer.map = _mapView; } // ... - (void) addHeatmap { // Get the data: latitude/longitude positions of police stations. NSURL *path = [NSBundle.mainBundle URLForResource:@"police_stations" withExtension:@"json"]; NSData *data = [NSData dataWithContentsOfURL:path]; NSArray *json = [NSJSONSerialization JSONObjectWithData:data options:0 error:nil]; NSMutableArray<GMUWeightedLatLng *> *list = [[NSMutableArray alloc] init]; [json enumerateObjectsUsingBlock:^(id _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) { NSDictionary *item = (NSDictionary *)obj; CLLocationDegrees lat = [(NSNumber *) [item valueForKey:@"lat"] doubleValue]; CLLocationDegrees lng = [(NSNumber *) [item valueForKey:@"lng"] doubleValue]; GMUWeightedLatLng *coords = [[GMUWeightedLatLng alloc] initWithCoordinate:CLLocationCoordinate2DMake(lat, lng) intensity:1.0]; [list addObject:coords]; }]; // Add the latlngs to the heatmap layer. _heatmapLayer.weightedData = list; } @end
Per questo esempio, i dati vengono archiviati in un file JSON, police_stations.json
.
Ecco un estratto del file:
[
{"lat" : -37.1886, "lng" : 145.708 } ,
{"lat" : -37.8361, "lng" : 144.845 } ,
{"lat" : -38.4034, "lng" : 144.192 } ,
{"lat" : -38.7597, "lng" : 143.67 } ,
{"lat" : -36.9672, "lng" : 141.083 }
]
Personalizzazione della mappa termica
La mappa termica ha diverse proprietà personalizzabili. Puoi impostare le opzioni durante la creazione iniziale dell'istanza GMUHeatmapTileLayer
oppure in qualsiasi momento impostando un nuovo valore per l'opzione.
Sono disponibili le seguenti opzioni:
Raggio: la dimensione della sfocatura gaussiana applicata alla mappa termica, espressa in pixel. Il valore predefinito è 20. Il valore deve essere compreso tra 10 e 50. Utilizza
GMUHeatmapTileLayer.radius
per impostare il raggio.Gradiente: una gamma di colori utilizzati dalla mappa termica per generare la propria mappa colori, che va dalla intensità più bassa a quella massima. Viene creato un elemento
GMUGradient
utilizzando un array di numeri interi contenente i colori e un array in virgola mobile che indica il punto di partenza di ogni colore, espresso come percentuale dell'intensità massima ed espresso come frazione da 0 a 1. Devi specificare un solo colore per un gradiente monocolore o almeno due colori per un gradiente multicolore. La mappa colori viene generata utilizzando l'interpolazione tra questi colori. Il gradiente predefinito ha due colori. Il parametrocolorMapSize
definisce il numero di passaggi nel gradiente. Numeri più grandi daranno un gradiente più fluido, mentre numeri più piccoli daranno transizioni più nitide, simili a un grafico di contorno. UsaGMUHeatmapTileLayer.gradient
per impostare la sfumatura.Opacità: è l'opacità dell'intero livello della mappa termica e va da 0 a 1. Il valore predefinito è 0,7. Usa
GMUHeatmapTileLayer.opacity
per impostare il valore di opacità.
Ad esempio, crea un Gradient
:
Swift
let gradientColors: [UIColor] = [.green, .red] let gradientStartPoints: [NSNumber] = [0.2, 1.0] heatmapLayer.gradient = GMUGradient( colors: gradientColors, startPoints: gradientStartPoints, colorMapSize: 256 )
Objective-C
NSArray<UIColor *> *gradientColors = @[UIColor.greenColor, UIColor.redColor]; NSArray<NSNumber *> *gradientStartPoints = @[@0.2, @1.0]; _heatmapLayer.gradient = [[GMUGradient alloc] initWithColors:gradientColors startPoints:gradientStartPoints colorMapSize:256];
Per modificare l'opacità di una mappa termica esistente:
Swift
heatmapLayer.opacity = 0.7
Objective-C
_heatmapLayer.opacity = 0.7;
Aggiorna un'opzione esistente
Per aggiornare un'opzione già impostata, procedi nel seguente modo:
- Aggiorna l'opzione con il valore desiderato.
- Chiama
GMUHeatmapTileLayer.clearTileCache()
.
Modifica del set di dati
Per modificare il set di dati su cui viene creata una mappa termica:
- Aggiorna la raccolta dei dati. Usa
GMUHeatmapTileLayer.weightedData
, passando un array diGMUWeightedLatLng
. - Chiama
GMUHeatmapTileLayer.clearTileCache()
.
Rimuovere una mappa termica
Per rimuovere una mappa termica, chiama GMUHeatmapTileLayer.map
, trasmettendo nil
.
Swift
heatmapLayer.map = nil
Objective-C
_heatmapLayer.map = nil;
Guarda l'app demo
Per un altro esempio di implementazione di una mappa termica, dai un'occhiata a
HeatmapViewController
nell'app demo fornita con la libreria di utilità.
La guida alla configurazione ti mostra come eseguire
l'app demo.