Mapy termiczne

Wybierz platformę: Android iOS

Ta strona zawiera opis narzędzia do tworzenia map termicznych, które jest dostępne w bibliotece narzędzi pakietu Maps SDK na iOS. Mapy termiczne są przydatne do przedstawiania rozkładu i gęstości punktów danych na mapie.

Z tego filmu dowiesz się, jak używać map termicznych zamiast znaczników, gdy dane wymagają umieszczenia na mapie dużej liczby punktów.

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 termiczne używają kolorów do przedstawiania rozkładu danych.

W poniższym przykładzie kolor czerwony oznacza obszary o wysokim zagęszczeniu komisariatów policji w stanie Wiktoria w Australii.

Mapa z mapą termiczną pokazującą lokalizacje komisariatów policji
Mapa termiczna na mapie

Jeśli nie masz jeszcze skonfigurowanej biblioteki, przed przeczytaniem reszty tej strony zapoznaj się z przewodnikiem po konfiguracji.

Dodawanie prostej mapy termicznej

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

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

Szczegółowe omówienie poszczególnych kroków:

  1. Utwórz instancję GMUHeatmapTileLayer, ustawiając właściwość map na GMSMapView (zrób to w funkcji viewDidLoad() aplikacji).
  2. Przekaż kolekcję obiektów GMUWeightedLatLng do instancji GMUHeatmapTileLayer.
  3. Wywołaj 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 police_stations.json. Oto fragment tego 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 termiczna ma kilka właściwości, które można dostosować. Opcje możesz ustawić podczas początkowego tworzenia instancji GMUHeatmapTileLayer lub w dowolnym momencie, ustawiając nową wartość opcji.

Dostępne są te ustawienia:

  1. Promień: rozmiar rozmycia Gaussa zastosowanego do mapy termicznej, wyrażony w pikselach. Domyślna wartość to 20. Musi mieścić się w zakresie od 10 do 50. Aby ustawić promień, użyj GMUHeatmapTileLayer.radius.

  2. Gradient: zakres kolorów, których mapa termiczna używa do generowania mapy kolorów, od najniższej do najwyższej intensywności. Obiekt GMUGradient jest tworzony za pomocą tablicy liczb całkowitych zawierającej kolory oraz tablicy liczb zmiennoprzecinkowych wskazującej punkt początkowy każdego koloru, podany jako procent maksymalnej intensywności i wyrażony jako ułamek od 0 do 1. W przypadku gradientu jednokolorowego musisz określić tylko 1 kolor, a w przypadku gradientu wielokolorowego – co najmniej 2 kolory. Mapa kolorów jest generowana za pomocą interpolacji między tymi kolorami. Domyślny gradient ma 2 kolory. Parametr colorMapSize określa liczbę kroków w gradiencie. Większe liczby spowodują płynniejszy gradient, a mniejsze – ostrzejsze przejścia podobne do wykresu konturowego. Aby ustawić gradient, użyj GMUHeatmapTileLayer.gradient.

  3. Przezroczystość: przezroczystość całej warstwy mapy termicznej, która mieści się w zakresie od 0 do 1. Domyślna wartość to 0,7. Użyj GMUHeatmapTileLayer.opacity, aby ustawić wartość nieprzezroczystości.

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 termicznej:

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ę do żądanej wartości.
  2. Wywołaj GMUHeatmapTileLayer.clearTileCache().

Zmienianie zbioru danych

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

  1. Zaktualizuj zbieranie danych. Użyj GMUHeatmapTileLayer.weightedData, przekazując tablicę GMUWeightedLatLng.
  2. Wywołaj GMUHeatmapTileLayer.clearTileCache().

Usuwanie mapy termicznej

Aby usunąć mapę termiczną, wywołaj GMUHeatmapTileLayer.map, przekazując nil.

Swift

heatmapLayer.map = nil

Objective-C

_heatmapLayer.map = nil;

Zobacz aplikację w wersji demonstracyjnej

Inny przykład implementacji mapy termicznej znajdziesz w HeatmapViewController w aplikacji w wersji demonstracyjnej, która jest dostarczana z biblioteką narzędzi. W przewodniku po konfiguracji dowiesz się, jak uruchomić aplikację w wersji demonstracyjnej.