Heatmaps

Plattform auswählen: Android iOS JavaScript

Auf dieser Seite wird das Heatmap-Dienstprogramm beschrieben, das im Dienstprogramm verfügbar ist. Bibliothek für die Maps SDK for iOS Mit Heatmaps lassen sich Verteilung und Dichte der Datenpunkte auf einer Karte

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

Mit Heatmaps ist es für Betrachter leicht, die Verteilung und relativen Werte Intensität von Datenpunkten auf einer Karte. Anstatt an jedem Punkt eine Markierung zu platzieren, Standort verwenden, verwenden Heatmaps Farben, um die Verteilung von Daten darzustellen.

Im folgenden Beispiel sind Bereiche mit einer hohen Konzentration von Polizeibehörden rot dargestellt. Sender in Victoria, Australien.

<ph type="x-smartling-placeholder">

</ph>

Heatmap auf einer Karte

Hinweis :Mit der Funktion gradient können Sie eigene Farben für die Heatmap festlegen. Property. Erfahren Sie, wie Sie Farben und andere Eigenschaften individuell anpassen Ihrer Heatmap.

Wenn Sie die Bibliothek noch nicht eingerichtet haben, folgen Sie der Einrichtung , bevor Sie die restlichen auf dieser Seite.

Einfache Heatmap hinzufügen

Um eine Heatmap zu Ihrer Karte hinzuzufügen, benötigen Sie ein Dataset, das aus den Koordinaten für jeden Ort von Interesse. Erstellen Sie zunächst einen GMUHeatmapTileLayer-Instanz, wobei das Attribut map auf GMSMapView gesetzt wird. Führen Sie diesen Schritt über die Funktion viewDidLoad() Ihrer App aus, damit die Basiskarte geladen werden, bevor Sie mit der Heatmap arbeiten. Übergeben Sie dann eine Sammlung von GMUWeightedLatLng-Objekte für die GMUHeatmapTileLayer-Instanz.

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

Hier sind die einzelnen Schritte im Detail beschrieben:

1. Erstellen Sie eine GMUHeatmapTileLayer-Instanz und setzen Sie das Attribut map auf einen GMSMapView. Dies kannst du in der viewDidLoad()-Funktion deiner App tun.
2. Übergeben Sie eine Sammlung von GMUWeightedLatLng-Objekten an die GMUHeatmapTileLayer-Instanz.
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 festlegen, beim anfänglichen Erstellen der GMUHeatmapTileLayer-Instanz oder zu einem beliebigen Zeitpunkt durch und legen einen neuen Wert für die Option fest.

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 Umkreis festzulegen.

2. Farbverlauf:Ein Farbbereich, anhand dessen die Heatmap ihre Farbe generiert. mit der niedrigsten zur höchsten Intensität. Ein GMUGradient wird erstellt mithilfe von ein Ganzzahl-Array, das die Farben enthält, und ein Gleitkommazahl-Array, das die Startpunkt für jede Farbe, angegeben als Prozentsatz der maximalen Intensität, und als Bruchzahl 0 bis 1 ausgedrückt. Sie müssen nur eine Farbe für einen einfarbigen Farbverlauf oder mindestens zwei Farben für ein mehrfarbiges Farbverlauf. 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 einer gleichmäßigeren Farbverlauf, während kleinere Zahlen schärfere Übergänge ähnlich Contour-Diagramm. Verwenden Sie GMUHeatmapTileLayer.gradient, um den Farbverlauf festzulegen.

3. Deckkraft:Dies ist die Deckkraft der gesamten Heatmap-Ebene und der Bereiche zwischen 0 und 1 liegen. Der Standardwert ist „0,7“. Mit GMUHeatmapTileLayer.opacity legen Sie Folgendes fest: Deckkraftwert.

Erstellen Sie beispielsweise einen 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 erstellt wird:

1. Aktualisieren Sie die Datenerhebung. GMUHeatmapTileLayer.weightedData verwenden, übergeben Ein Array von GMUWeightedLatLng.
2. Rufen Sie einfach GMUHeatmapTileLayer.clearTileCache() an.

Hinweis: Wenn Sie der Heatmap Punkte hinzufügen oder Punkte aus der Heatmap erstellen, aktualisieren Sie zuerst Ihre Datenerhebung und verwenden Sie dann GMUHeatmapTileLayer.weightedData.

Heatmap entfernen

Wenn Sie eine Heatmap entfernen möchten, rufen Sie GMUHeatmapTileLayer.map auf und übergeben Sie nil.

Swift

heatmapLayer.map = nil
      

Objective-C

_heatmapLayer.map = nil;
      

Demo-App ansehen

Ein weiteres Beispiel für eine Heatmap-Implementierung finden Sie HeatmapViewController in der Demo-App, die mit der Dienstprogrammbibliothek ausgeliefert wird. Im Einrichtungsleitfaden erhalten Sie Informationen zur führen Sie die Demo-App aus.