Heatmaps

Seleziona la piattaforma: Android iOS JavaScript

Questa pagina descrive l'utilità della mappa di calore 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'utilizzo delle mappe di calore come alternativa agli indicatori quando i dati richiedono un numero elevato di punti dati sulla mappa.

Le mappe termiche consentono agli spettatori di comprendere facilmente la distribuzione e l'intensità relativa dei punti dati su una mappa. Anziché posizionare un indicatore in ogni località, le mappe termiche utilizzano il colore per rappresentare la distribuzione dei dati.

Nell'esempio seguente, il rosso rappresenta le aree con un'alta concentrazione di stazioni di polizia in Victoria, in Australia.

Una mappa termica su una mappa

Nota: puoi impostare i tuoi colori per la mappa termica utilizzando la proprietà gradient. Scopri come personalizzare i colori e altre proprietà della mappa di calore.

Se non hai ancora configurato la raccolta, segui la guida alla configurazione prima di leggere il resto di questa pagina.

Aggiunta di una mappa termica semplice

Per aggiungere una mappa di calore alla mappa, devi disporre di un set di dati costituito dalle coordinate di ogni località 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 di base sia caricata prima di utilizzare la mappa di calore. 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.

Ecco i passaggi più nel dettaglio:

1. Crea un'istanza GMUHeatmapTileLayer impostando la proprietà map su un valore GMSMapView (nella funzione viewDidLoad() dell'app).
2. Passa una raccolta di oggetti GMUWeightedLatLng all'istanza GMUHeatmapTileLayer.
3. 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 sono 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 }
]

Personalizzare la mappa termica

La mappa di calore ha diverse proprietà personalizzabili. Puoi impostare le opzioni al momento della creazione iniziale dell'istanza GMUHeatmapTileLayer o in qualsiasi momento impostando un nuovo valore per l'opzione.

Sono disponibili le seguenti opzioni:

1. Raggio:le dimensioni della sfocatura gaussiana applicata alla mappa di calore, espresse in pixel. Il valore predefinito è 20. Il numero deve essere compreso tra 10 e 50. Utilizza GMUHeatmapTileLayer.radius per impostare il raggio.

2. Gradiente:una gamma di colori utilizzata dalla mappa termica per generare la sua mappa di colori, che va dall'intensità più bassa a quella più alta. Un GMUGradient viene creato utilizzando un array di interi contenente i colori e un array di valori float che indica il punto di partenza per ciascun colore, espresso in 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 di colori viene generata utilizzando l'interpolazione tra questi colori. Il gradiente predefinito ha due colori. Il parametro colorMapSize definisce il numero di passaggi nel gradiente. Numeri più grandi produrranno un gradiente più uniforme, mentre numeri più piccoli daranno transizioni più nette, simili a un grafico con isolinee. Utilizza GMUHeatmapTileLayer.gradient per impostare il gradiente.

3. Opacità:l'opacità dell'intero livello della mappa termica e va da 0 a 1. Il valore predefinito è 0,7. Utilizza 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 di calore esistente:

Swift

heatmapLayer.opacity = 0.7
      

Objective-C

_heatmapLayer.opacity = 0.7;
      

Aggiornare un'opzione esistente

Per aggiornare un'opzione già impostata:

1. Aggiorna l'opzione con il valore desiderato.
2. Chiama il numero GMUHeatmapTileLayer.clearTileCache().

Modifica del set di dati

Per modificare il set di dati su cui è basata una mappa di calore:

1. Aggiorna la raccolta dei dati. Utilizza GMUHeatmapTileLayer.weightedData, passando una matrice di GMUWeightedLatLng.
2. Chiama il numero GMUHeatmapTileLayer.clearTileCache().

Nota: se vuoi aggiungere punti alla mappa di calore o rimuoverli, aggiorna prima la raccolta dei dati e poi utilizza GMUHeatmapTileLayer.weightedData.

Rimuovere una mappa termica

Per rimuovere una mappa di calore, chiama GMUHeatmapTileLayer.map passando nil.

Swift

heatmapLayer.map = nil
      

Objective-C

_heatmapLayer.map = nil;
      

Visualizza l'app di demo

Per un altro esempio di implementazione di una mappa di calore, dai un'occhiata a HeatmapViewController nell'app di demo fornita con la libreria di utilità. La guida alla configurazione mostra come eseguire l'app di demo.