Mapy termiczne

Wybierz platformę: Android iOS JavaScript

Na tej stronie opisujemy narzędzie mapy termicznej, 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ą widzom zrozumienie rozkładu i względnej intensywności punktów danych na mapie. Zamiast umieszczać znacznik w każdej lokalizacji, mapy termiczne wykorzystują kolor, który przedstawia rozkład danych.

W poniższym przykładzie kolor czerwony oznacza obszary o dużym zagęszczeniu posterunków policji w Victorii w Australii.

Mapa z mapą termiczną pokazującą lokalizację komisji policji
Mapa termiczna na mapie

Jeśli nie masz jeszcze skonfigurowanej biblioteki, zapoznaj się z dalszymi informacjami zawartymi w przewodniku po konfiguracji.

Dodawanie prostej mapy termicznej

Aby dodać do mapy mapę termiczną, 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 w funkcji viewDidLoad() w aplikacji, aby przed rozpoczęciem pracy z nią mieć pewność, że mapa podstawowa zostanie wczytana. Następnie przekaż do instancji GMUHeatmapTileLayer kolekcję obiektów GMUWeightedLatLng.

Narzędzie dostarcza klasę GMUHeatmapTileLayer, która akceptuje zbiór obiektów GMUWeightedLatLng. Tworzy ona obrazy kafelków o różnych poziomach powiększenia w zależności od dostępnych opcji promienia, gradientu i przezroczystości.

Więcej informacji na ten temat:

  1. Utwórz instancję GMUHeatmapTileLayer z ustawieniem właściwości map na GMSMapView (zrób to w funkcji viewDidLoad() aplikacji).
  2. Przekaż do instancji GMUHeatmapTileLayer kolekcję obiektów GMUWeightedLatLng.
  3. Zadzwoń pod numer 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 przechowujemy w pliku JSON police_stations.json. Oto fragment 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 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ść tej opcji.

Dostępne są te ustawienia:

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

  2. Gradient: zakres kolorów, których mapa termiczna jest używana do generowania mapy kolorów, od najniższej do najwyższej intensywności. Parametr GMUGradient tworzy się za pomocą tablicy całkowitej zawierającej kolory oraz tablicy zmiennoprzecinkowej wskazującej punkt początkowy każdego koloru, wyrażonej jako procent maksymalnej intensywności i wyrażonej jako ułamek od 0 do 1. Możesz określić tylko jeden kolor dla gradientu jednokolorowego, a co najmniej dwa dla gradientu wielokolorowego. Mapa kolorów jest generowana przez interpolację między tymi kolorami. Gradient domyślny ma dwa kolory. Parametr colorMapSize określa liczbę kroków w gradiencie. Większe liczby zapewniają płynniejszy gradient, a mniejsze – ostrzejsze przejścia podobne do wykresu konturowego. Aby ustawić gradient, użyj klawisza GMUHeatmapTileLayer.gradient.

  3. Przezroczystość: przezroczystość całej warstwy mapy termicznej, mieszcząca się w zakresie od 0 do 1. Wartość domyślna to 0,7. Aby ustawić wartość nieprzezroczystości, użyj 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 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ń opcję na odpowiednią wartość.
  2. Zadzwoń do firmy GMUHeatmapTileLayer.clearTileCache().

Zmienianie zbioru danych

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

  1. Zaktualizuj zbieranie danych. użyj funkcji GMUHeatmapTileLayer.weightedData, która przekazuje 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ą

Kolejnym przykładem implementacji mapy termicznej jest HeatmapViewController w aplikacji demonstracyjnej, która dostarcza bibliotekę narzędziową. Z przewodnika po konfiguracji dowiesz się, jak uruchomić aplikację w wersji demonstracyjnej.