Mapy termiczne

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 wskazywania rozkładu i gęstości punktów danych na mapie.

W tym filmie omówiono, jak można wykorzystać mapy termiczne jako alternatywę 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ędności punktów danych na mapie. Mapy termiczne zamiast umieszczać znaczniki w poszczególnych lokalizacjach używają kolorów do odzwierciedlenia rozkładu danych.

W przykładzie poniżej kolor czerwony oznacza obszary o dużym stężeniu stacji policyjnych w Wiktorii w Australii.

Jeśli nie masz jeszcze skonfigurowanej biblioteki, postępuj zgodnie z przewodnikiem konfiguracji, zanim przeczytasz pozostałą część tej strony.

Dodawanie prostej mapy termicznej

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

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

Przyjrzyjmy się 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ę GMUWeightedLatLng obiektów do instancji GMUHeatmapTileLayer.
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 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 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. Wartością domyślną jest 20. Wymagana wartość z zakresu od 10 do 50. Użyj GMUHeatmapTileLayer.radius, aby ustawić promień.

2. Gradient: zakres kolorów używanych przez mapę termiczną do generowania mapy kolorów od najniższej do najwyższej intensywności. Pole GMUGradient jest tworzone z wykorzystaniem tablicy całkowitej zawierającej kolory oraz tablicy zmiennoprzecinkowej, która wskazuje punkt początkowy każdego koloru, wyrażonej jako procent maksymalnej intensywności i wyrażanej jako ułamek od 0 do 1. W przypadku gradientu jednokolorowego wystarczy określić jeden kolor, a w przypadku wielokolorowego – co najmniej dwa. 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 gradientu. Większe liczby oznaczają płynniejszy gradient, a mniejsze wartości – wyraźniejsze przejścia podobne do wykresu konturowego. Użyj funkcji GMUHeatmapTileLayer.gradient, aby ustawić gradient.

3. Przezroczystość: przezroczystość całej warstwy mapy termicznej w zakresie od 0 do 1. Wartość domyślna to 0,7. Użyj GMUHeatmapTileLayer.opacity, aby ustawić wartość przezroczystości.

Na przykład utwórz Gradient:

let gradientColors: [UIColor] = [.green, .red]
let gradientStartPoints: [NSNumber] = [0.2, 1.0]
heatmapLayer.gradient = GMUGradient(
  colors: gradientColors,
  startPoints: gradientStartPoints,
  colorMapSize: 256
)
      

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:

heatmapLayer.opacity = 0.7
      

_heatmapLayer.opacity = 0.7;
      

Aktualizowanie istniejącej opcji

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

1. Ustaw odpowiednią wartość opcji.
2. Zadzwoń do firmy GMUHeatmapTileLayer.clearTileCache().

Zmiana zbioru danych

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

1. Zaktualizuj zbieranie danych. użyj funkcji GMUHeatmapTileLayer.weightedData, przekazując w ten sposób tablicę z wartością GMUWeightedLatLng.
2. Zadzwoń do firmy GMUHeatmapTileLayer.clearTileCache().

Usuwanie mapy termicznej

Aby usunąć mapę termiczną, wywołaj GMUHeatmapTileLayer.map z wynikiem pozytywnym nil.

heatmapLayer.map = nil
      

_heatmapLayer.map = nil;
      

Zobacz aplikację w wersji demonstracyjnej

Kolejny przykład implementacji mapy termicznej znajdziesz na stronie HeatmapViewController w aplikacji w wersji demonstracyjnej, która zawiera bibliotekę narzędzi. Z przewodnika konfiguracji dowiesz się, jak uruchomić aplikację w wersji demonstracyjnej.