Mapy termiczne

Wybierz platformę: Android iOS JavaScript

Na tej stronie opisano narzędzie do generowania map ciepła dostępne w bibliotece narzędzi pakietu SDK Maps na iOS. Mapy termiczne przydają się do przedstawiania na mapie rozkładu i gęstości punktów danych.

Ten film przedstawia używanie map ciepła jako alternatywy dla znaczników, gdy Twoje dane wymagają dużej liczby punktów danych na mapie.

Mapy termiczne ułatwiają widzom zrozumienie rozkładu i względnej intensywności punktów danych na mapie. Zamiast umieszczać znacznik w każdej lokalizacji, mapy ciepła wykorzystują kolory do przedstawienia rozkładu danych.

W przykładzie poniżej kolor czerwony oznacza obszary o wysokiej koncentracji posterunków policji w stanie Wiktoria w Australii.

Mapa z mapą ciepła pokazująca lokalizację posterunków policji
Mapa termiczna na mapie

Jeśli nie masz jeszcze skonfigurowanej biblioteki, przed przeczytaniem dalszej części tej strony postępuj zgodnie z instrukcjami konfiguracji.

Dodawanie prostej mapy termicznej

Aby dodać mapę ciepła do swojej mapy, potrzebujesz zbioru danych zawierającego współrzędne każdej interesującej Cię lokalizacji. Najpierw utwórz instancję GMUHeatmapTileLayer, ustawiając właściwość map na GMSMapView. Zrób to za pomocą funkcji viewDidLoad() w aplikacji, aby mieć pewność, że mapa podstawowa zostanie załadowana przed rozpoczęciem pracy z mapą ciepła. Następnie prześlij kolekcję obiektów GMUWeightedLatLng do instancji GMUHeatmapTileLayer.

Narzędzie dostarcza klasę GMUHeatmapTileLayer, która akceptuje zbiór obiektów GMUWeightedLatLng. Tworzy obrazy kafelków dla różnych poziomów powiększenia na podstawie podanych opcji promienia, gradientu i przezroczystości.

Szczegóły poszczególnych kroków:

  1. Utwórz wystąpienie GMUHeatmapTileLayer, ustawiając właściwość map na GMSMapView (zrób to w funkcji viewDidLoad() w aplikacji).
  2. Przekazywanie kolekcji obiektów GMUWeightedLatLng do instancji GMUHeatmapTileLayer.
  3. Wywołaj funkcję GMUHeatmapTileLayer.map, przekazując widok mapy.

    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

W tym przykładzie dane są przechowywane w pliku JSON o nazwie police_stations.json. Oto wyciąg z pliku:

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

Dostosowywanie mapy termicznej

Mapa ciepła ma kilka właściwości, które można dostosowywać. Opcje możesz ustawić podczas tworzenia instancji GMUHeatmapTileLayer lub w dowolnym momencie, ustawiając nową wartość opcji.

Dostępne są te ustawienia:

  1. Promień: rozmiar rozmycia gaussowskiego zastosowanego do mapy ciepła wyrażony w pikselach. Wartość domyślna to 20. Musi mieścić się w przedziale od 10 do 50. Aby ustawić promień, użyj opcji GMUHeatmapTileLayer.radius.

  2. Gradient: zakres kolorów, których używa mapa ciepła do generowania mapy ciepła, od najniższej do najwyższej intensywności. Funkcja GMUGradient jest tworzona za pomocą tablicy całkowitej zawierającej kolory oraz tablicy zmiennoprzecinkowej wskazującej punkt początkowy dla każdego koloru podany jako procent maksymalnej intensywności i wyrażony jako ułamek od 0 do 1. W przypadku jednokolorowego gradientu musisz określić tylko jeden kolor, a w przypadku wielokolorowego co najmniej 2 kolory. Mapa kolorów jest generowana na podstawie interpolacji tych kolorów. Domyślny gradient ma 2 kolory. Parametr colorMapSize określa liczbę kroków gradientu. Większe wartości spowodują łagodniejszy gradient, a mniejsze – ostrzejsze przejścia podobne do wykresu izoliniiowego. Aby ustawić gradient, użyj GMUHeatmapTileLayer.gradient.

  3. Przezroczystość: przezroczystość całej warstwy mapy termicznej, która może przyjmować wartości od 0 do 1. Wartość domyślna to 0,7. Aby ustawić wartość krycia, użyj elementu GMUHeatmapTileLayer.opacity.

Na przykład utwórz 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];

Aby zmienić przezroczystość istniejącej mapy ciepła:

Swift

heatmapLayer.opacity = 0.7

Objective-C

_heatmapLayer.opacity = 0.7;

Aktualizowanie istniejącej opcji

Aby zaktualizować opcję, która została już ustawiona, wykonaj te czynności:

  1. Zaktualizuj opcję, ustawiając ją na żądaną wartość.
  2. Zadzwoń do firmy GMUHeatmapTileLayer.clearTileCache().

Zmiana zbioru danych

Aby zmienić zbiór danych, na podstawie którego tworzona jest mapa ciepła:

  1. Zaktualizuj zbiór danych. Użyj funkcji GMUHeatmapTileLayer.weightedData, przekazując tablicę GMUWeightedLatLng.
  2. Zadzwoń do firmy GMUHeatmapTileLayer.clearTileCache().

Usuwanie mapy termicznej

Aby usunąć mapę ciepła, wywołaj funkcję GMUHeatmapTileLayer.map, przekazując argument nil.

Swift

heatmapLayer.map = nil

Objective-C

_heatmapLayer.map = nil;

Wyświetlanie aplikacji demonstracyjnej

Innym przykładem implementacji mapy ciepła jest HeatmapViewController w aplikacji demonstracyjnej dołączonej do biblioteki narzędzi. W przewodniku po konfiguracji znajdziesz informacje o uruchamianiu aplikacji demonstracyjnej.