Mapy termiczne

Wybierz platformę: Android iOS

Na tej stronie opisujemy narzędzie 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.

W tym filmie omawiamy wykorzystanie map termicznych jako alternatywy dla znaczników, gdy dane wymagają dużej liczby punktów danych na mapie.

Mapy termiczne ułatwiają użytkownikom 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 przykładzie poniżej czerwony kolor oznacza obszary o dużej koncentracji posterunków policji w stanie Wiktoria w Australii.

Mapa z mapą termiczną pokazującą lokalizację posterunków policji
Mapa termiczna na mapie

Jeśli nie masz jeszcze skonfigurowanej biblioteki, zanim przejdziesz do dalszej części tej strony, zapoznaj się z instrukcją 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 obrazy kafelków dla różnych poziomów powiększenia na podstawie podanych opcji promienia, gradientu i przezroczystości.

Przyjrzyjmy się bliżej poszczególnym krokom:

  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 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 police_stations.json. Oto fragment 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 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 cieplnej, wyrażony w pikselach. Wartość domyślna to 20. Musi mieścić się w zakresie od 10 do 50. Użyj GMUHeatmapTileLayer.radius, aby ustawić promień.

  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 przy użyciu interpolacji między tymi kolorami. Domyślny gradient ma 2 kolory. Parametr colorMapSize określa liczbę kroków w gradiencie. Większe liczby dają gładszy gradient, a mniejsze – ostrzejsze przejścia, podobne do wykresu konturowego. Aby ustawić gradient, użyj GMUHeatmapTileLayer.gradient.

  3. Nieprzezroczystość:jest to nieprzezroczystość całej warstwy mapy termicznej, która mieści się w zakresie od 0 do 1. Wartość domyślna to 0,7. Użyj właściwości GMUHeatmapTileLayer.opacity, aby ustawić wartość krycia.

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. Zmień wartość opcji na odpowiednią.
  2. Zadzwoń do firmy GMUHeatmapTileLayer.clearTileCache().

Zmiana 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. Zadzwoń do firmy 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ę demonstracyjną

Inny przykład implementacji mapy termicznej znajdziesz w HeatmapViewController w aplikacji demonstracyjnej dostarczanej z biblioteką narzędzi. Z przewodnika po konfiguracji dowiesz się, jak uruchomić aplikację demonstracyjną.