Mappa termica

In questa pagina viene descritta l'utilità della mappa termica disponibile nella libreria dei servizi per Maps SDK per iOS. Le mappe termiche sono utili per rappresentare la distribuzione e la densità di punti dati su una mappa.

Questo video illustra l'utilizzo delle mappe termiche in alternativa agli indicatori, quando i dati richiedono un grande numero di punti dati sulla mappa.

Le mappe termiche consentono agli utenti 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 i colori per rappresentare la distribuzione dei dati.

Nell'esempio in basso, il rosso rappresenta le aree ad alta concentrazione di stazioni di polizia nello stato di Victoria, Australia.

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

Aggiungere una semplice mappa termica

Per aggiungere una mappa termica alla mappa, è necessario 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 base venga caricata prima di lavorare con la mappa termica. Quindi passa una raccolta di GMUWeightedLatLng oggetti all'istanza GMUHeatmapTileLayer.

L'utilità fornisce la classe GMUHeatmapTileLayer, che accetta una raccolta di oggetti GMUWeightedLatLng. Crea le immagini riquadri per vari livelli di zoom, in base alle opzioni di raggio, sfumatura e opacità fornite.

Vediamo i passaggi in modo più dettagliato:

1. Crea un'istanza GMUHeatmapTileLayer, impostando la proprietà map su GMSMapView (esegui questa operazione nella funzione viewDidLoad() dell'app).
2. Passa una raccolta di GMUWeightedLatLng oggetti 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 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 offre 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:

1. Raggio: le dimensioni 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.

2. Gradiente: una gamma di colori utilizzati dalla mappa termica per generare la mappa, che va dal più basso al più alto. Un GMUGradient viene creato utilizzando un array di numeri interi contenente i colori e un array di valori mobili che indica il punto iniziale di ogni colore, espresso in percentuale dell'intensità massima ed espresso in frazione da 0 a 1. Devi specificare un solo colore per una sfumatura monocolore o almeno due colori per una sfumatura multicolore. La mappa dei colori viene generata mediante l'interpolazione tra questi colori. Il gradiente predefinito ha due colori. Il parametro colorMapSize definisce il numero di passaggi nel gradiente. I numeri più alti generano un gradiente più fluido, mentre i numeri più piccoli generano transizioni più nitide come un grafico di contorno. 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. Usa GMUHeatmapTileLayer.opacity per impostare il valore di opacità.

Ad esempio, crea un Gradient:

let gradientColors: [UIColor] = [.green, .red]
let gradientStartPoints: [NSNumber] = [0.2, 1.0]
heatmapLayer.gradient = GMUGradient(
  colors: gradientColors,
  startPoints: gradientStartPoints,
  colorMapSize: 256
)
      

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:

heatmapLayer.opacity = 0.7
      

_heatmapLayer.opacity = 0.7;
      

Aggiornare un'opzione esistente

Per aggiornare un'opzione che è già stata impostata, svolgi i seguenti passaggi:

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

Modifica del set di dati

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

1. Aggiorna la raccolta dei dati. Usa GMUHeatmapTileLayer.weightedData, trasmettendo un array di GMUWeightedLatLng.
2. Chiama GMUHeatmapTileLayer.clearTileCache().

Rimuovere una mappa termica

Per rimuovere una mappa termica, chiama GMUHeatmapTileLayer.map, superando nil.

heatmapLayer.map = nil
      

_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.