Heatmaps

Plattform auswählen: Android iOS JavaScript

Auf dieser Seite wird das Heatmap-Dienstprogramm beschrieben, das in der Dienstprogrammbibliothek für das Maps SDK for iOS verfügbar ist. Heatmaps sind hilfreich, um die Verteilung und Dichte von Datenpunkten auf einer Karte darzustellen.

In diesem Video wird die Verwendung von Heatmaps anstelle von Markierungen erörtert, wenn für deine Daten eine große Anzahl Datenpunkte auf der Karte erforderlich ist.

Mit Heatmaps können Nutzer die Verteilung und relative Intensität von Datenpunkten auf einer Karte besser nachvollziehen. Statt eine Markierung an jedem Standort zu platzieren, verwenden Heatmaps Farben, um die Verteilung von Daten darzustellen.

Im Beispiel unten steht Rot für Bereiche mit einer hohen Konzentration von Polizeidienststellen in Victoria, Australien.

Heatmap auf einer Karte

Hinweis :Mit der Eigenschaft gradient können Sie eigene Farben für die Heatmap festlegen. Hier erfahren Sie, wie Sie Farben und andere Eigenschaften Ihrer Heatmap anpassen.

Wenn Sie die Bibliothek noch nicht eingerichtet haben, folgen Sie der Anleitung im Einrichtungsleitfaden, bevor Sie den Rest dieser Seite lesen.

Einfache Heatmap hinzufügen

Wenn Sie Ihrer Karte eine Heatmap hinzufügen möchten, benötigen Sie einen Datensatz mit den Koordinaten der jeweiligen Standorte. Erstellen Sie zuerst eine GMUHeatmapTileLayer-Instanz und legen Sie dabei das Attribut map auf GMSMapView fest. Das können Sie in der Funktion viewDidLoad() Ihrer App tun, damit die Basiskarte geladen wird, bevor Sie mit der Heatmap arbeiten. Übergeben Sie dann eine Sammlung von GMUWeightedLatLng-Objekten an die Instanz GMUHeatmapTileLayer.

Das Dienstprogramm stellt die Klasse GMUHeatmapTileLayer bereit, die eine Sammlung von GMUWeightedLatLng-Objekten akzeptiert. Es erstellt die Kachelbilder für verschiedene Zoomstufen, je nach den Optionen für Radius, Farbverlauf und Deckkraft.

Hier sind die einzelnen Schritte im Detail beschrieben:

1. Erstellen Sie eine GMUHeatmapTileLayer-Instanz und legen Sie für die Property map den Wert GMSMapView fest. Führen Sie dazu in der viewDidLoad()-Funktion Ihrer Anwendung eine Aktion aus.
2. Übergeben Sie eine Sammlung von GMUWeightedLatLng-Objekten an die Instanz GMUHeatmapTileLayer.
3. Rufen Sie GMUHeatmapTileLayer.map auf und übergeben Sie die Kartenansicht.

   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
         

In diesem Beispiel werden die Daten in der JSON-Datei police_stations.json gespeichert. Hier sehen Sie einen Auszug aus der Datei:

[
{"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 }
]

Heatmap anpassen

Die Heatmap hat mehrere anpassbare Eigenschaften. Sie können die Optionen beim Erstellen der Instanz GMUHeatmapTileLayer oder jederzeit durch Festlegen eines neuen Werts für die Option festlegen.

Folgende Optionen sind verfügbar:

1. Radius:Die Größe des auf die Heatmap angewendeten Gaußschen Weichzeichners, ausgedrückt in Pixeln. Der Standardwert ist 20. Der Wert muss zwischen 10 und 50 liegen. Verwenden Sie GMUHeatmapTileLayer.radius, um den Radius festzulegen.

2. Farbverlauf:Der Farbverlauf von der niedrigsten zur höchsten Intensität, der in der Heatmap zum Erstellen der Farbkarte verwendet wird. Ein GMUGradient wird aus einem Ganzzahlarray mit den Farben und einem Gleitkommazahl-Array erstellt, das den Anfangspunkt für jede Farbe als Prozentsatz der maximalen Intensität angibt und als Bruchteil von 0 bis 1 ausgedrückt wird. Sie müssen nur eine Farbe für einen einfarbigen Farbverlauf oder mindestens zwei Farben für einen mehrfarbigen Farbverlauf angeben. Die Farbkarte wird durch Interpolieren dieser Farben generiert. Der Standardfarbverlauf verfügt über zwei Farben. Der Parameter colorMapSize definiert die Anzahl der Schritte im Farbverlauf. Größere Zahlen führen zu einem gleichmäßigeren Farbverlauf, während kleinere Zahlen schärfere Übergänge liefern, ähnlich wie bei einem Konturdiagramm. Mit GMUHeatmapTileLayer.gradient können Sie den Farbverlauf festlegen.

3. Deckkraft:Das ist die Deckkraft der gesamten Heatmap-Ebene. Sie liegt zwischen 0 und 1. Der Standardwert ist „0,7“. Verwenden Sie GMUHeatmapTileLayer.opacity, um den Deckkraftwert festzulegen.

Erstellen Sie beispielsweise eine 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];
      

So ändern Sie die Deckkraft einer vorhandenen Heatmap:

Swift

heatmapLayer.opacity = 0.7
      

Objective-C

_heatmapLayer.opacity = 0.7;
      

Vorhandene Option aktualisieren

So aktualisieren Sie eine bereits festgelegte Option:

1. Aktualisieren Sie die Option auf den gewünschten Wert.
2. Rufen Sie einfach GMUHeatmapTileLayer.clearTileCache() an.

Dataset ändern

So ändern Sie das Dataset, auf dem eine Heatmap basiert:

1. Aktualisieren Sie Ihre Datenerhebung. Verwenden Sie GMUHeatmapTileLayer.weightedData und übergeben Sie ein Array von GMUWeightedLatLng.
2. Rufen Sie einfach GMUHeatmapTileLayer.clearTileCache() an.

Hinweis :Wenn Sie der Heatmap Punkte hinzufügen oder Punkte daraus entfernen möchten, aktualisieren Sie zuerst die Datenerhebung und verwenden Sie dann GMUHeatmapTileLayer.weightedData.

Heatmap entfernen

Um eine Heatmap zu entfernen, rufen Sie GMUHeatmapTileLayer.map auf und übergeben Sie nil.

Swift

heatmapLayer.map = nil
      

Objective-C

_heatmapLayer.map = nil;
      

Demo-App anzeigen

Ein weiteres Beispiel für eine Heatmap-Implementierung finden Sie in der HeatmapViewController in der Demo-App, die mit der Dienstprogrammbibliothek ausgeliefert wird. Im Einrichtungsleitfaden erfahren Sie, wie Sie die Demo-App ausführen.