Mappe termiche

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

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

Le mappe termiche aiutano gli spettatori a comprendere la distribuzione e i relativi dati, l'intensità 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 seguente, il rosso rappresenta le aree ad alta concentrazione di forze dell'ordine. stazione a Victoria, Australia.

Se non hai ancora configurato la raccolta, segui le istruzioni prima di leggere il resto della su questa pagina.

Aggiungere una mappa termica semplice

Per aggiungere una mappa termica alla tua mappa, è necessario un set di dati costituito da le coordinate di ogni luogo di interesse. Per prima cosa, crea un GMUHeatmapTileLayer, impostando la proprietà map su GMSMapView. Esegui questa operazione nella funzione viewDidLoad() dell'app per assicurarti che la mappa base sia vengono caricati prima di utilizzare la mappa termica. Quindi passa una raccolta GMUWeightedLatLng oggetti all'istanza GMUHeatmapTileLayer.

L'utilità fornisce la classe GMUHeatmapTileLayer, che accetta un raccolta di GMUWeightedLatLng oggetti. 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:

1. Crea un'istanza GMUHeatmapTileLayer, impostando la proprietà map su un GMSMapView (esegui questa operazione nella funzione viewDidLoad() dell'app).
2. Trasmetti una raccolta di GMUWeightedLatLng oggetti al GMUHeatmapTileLayer istanza.
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 ha diverse proprietà personalizzabili. Puoi impostare le opzioni quando inizialmente creando l'istanza GMUHeatmapTileLayer oppure 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. Il valore deve essere compreso tra 10 e 50. Utilizza le funzionalità di GMUHeatmapTileLayer.radius per impostare il raggio.

2. Gradiente: una gamma di colori utilizzati dalla mappa termica per generarne il colore. la mappa a intensità più bassa. Un GMUGradient viene creato utilizzando un array intero contenente i colori e un array in virgola mobile che indica punto iniziale di ogni colore, espresso come percentuale dell'intensità massima, ed è espressa sotto forma di frazione compresa tra 0 e 1. Devi specificare un solo colore per un gradiente monocolore o un minimo di due colori per un gradiente. La mappa colori viene generata utilizzando l'interpolazione tra questi colori. Il gradiente predefinito ha due colori. Il parametro colorMapSize definisce di passi nel gradiente. I numeri più grandi avranno una maggiore fluidità gradiente, mentre numeri più piccoli daranno transizioni più nitide, simili a grafico di contorno. Usa GMUHeatmapTileLayer.gradient per impostare la sfumatura.

3. Opacità: l'opacità dell'intero livello della mappa termica e gli intervalli. da 0 a 1. Il valore predefinito è 0,7. Usa GMUHeatmapTileLayer.opacity per impostare 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;
      

Aggiorna un'opzione esistente

Per aggiornare un'opzione già impostata, procedi nel seguente modo:

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 viene creata una mappa termica:

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

Rimuovere una mappa termica

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

heatmapLayer.map = nil
      

_heatmapLayer.map = nil;
      

Guarda l'app demo

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