Mappe termiche

Seleziona la piattaforma: Android iOS

Questa pagina descrive l'utilità della mappa termica 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 termiche come alternativa ai marcatori 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 riportato di seguito, il rosso rappresenta le aree di alta concentrazione di stazioni di polizia a Victoria, in Australia.

Una mappa con una mappa termica che mostra la posizione delle stazioni di polizia
Una mappa termica su una mappa

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 mappa, devi disporre di un set di dati composto dalle coordinate di ogni località di interesse. Innanzitutto, crea un'istanza GMUHeatmapTileLayer, impostando la proprietà map su un GMSMapView. Esegui questa operazione nella funzione viewDidLoad() dell'app per assicurarti che la mappa base venga caricata prima di utilizzare la mappa termica. Poi 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.

Esaminiamo i passaggi in modo più dettagliato:

  1. Crea un'istanza GMUHeatmapTileLayer, impostando la proprietà map su un GMSMapView (esegui questa operazione nella funzione viewDidLoad() dell'app).
  2. Passa una raccolta di oggetti GMUWeightedLatLng all'istanza GMUHeatmapTileLayer.
  3. Chiama GMUHeatmapTileLayer.map, passando la visualizzazione della 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 dal 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 termica ha diverse proprietà personalizzabili. Puoi impostare le opzioni quando crei inizialmente l'istanza GMUHeatmapTileLayer o in qualsiasi momento impostando un nuovo valore per l'opzione.

Sono disponibili le seguenti opzioni:

  1. Raggio: la dimensione della sfocatura gaussiana applicata alla mappa termica, espressa in pixel. Il valore predefinito è 20. Deve essere compreso tra 10 e 50. Utilizza GMUHeatmapTileLayer.radius per impostare il raggio.

  2. Gradiente: un intervallo di colori che la mappa termica utilizza per generare la mappa dei colori, che va dall'intensità più bassa a quella più alta. Un GMUGradient viene creato utilizzando un array di numeri interi contenente i colori e un array di numeri in virgola mobile che indica il punto di partenza di ogni colore, espresso come percentuale dell'intensità massima e come frazione da 0 a 1. Devi specificare un solo colore per un gradiente a un solo colore o un minimo di due colori per un gradiente multicolore. La mappa 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. I numeri più grandi generano un gradiente più uniforme, mentre i numeri più piccoli generano transizioni più nitide simili a un grafico di contorno. Utilizza GMUHeatmapTileLayer.gradient per impostare il gradiente.

  3. Opacità: l'opacità dell'intero livello della mappa termica, compresa tra 0 e 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 termica 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 al valore desiderato.
  2. Chiama GMUHeatmapTileLayer.clearTileCache().

Modificare il set di dati

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

  1. Aggiorna la raccolta di dati. Utilizza GMUHeatmapTileLayer.weightedData, passando un array di GMUWeightedLatLng.
  2. Chiama GMUHeatmapTileLayer.clearTileCache().

Rimuovere una mappa termica

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

Swift

heatmapLayer.map = nil

Objective-C

_heatmapLayer.map = nil;

Visualizzare l'app demo

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