Mapy termiczne

Wybierz platformę: Android iOS JavaScript

Na tej stronie opisujemy narzędzie mapy termicznej dostępne w narzędziu dla Maps SDK na iOS. Mapy termiczne są przydatne do reprezentowania rozkładu gęstości punktów danych na mapie.

W tym filmie omawiamy zastosowanie map termicznych jako alternatywy dla znaczników, gdy wymaga dużej liczby punktów danych na mapie.

Mapy termiczne ułatwiają widzom zrozumienie rozkładu i względu intensywność punktów danych na mapie. Zamiast umieszczać znacznik przy każdym lokalizacja, mapy termiczne używają kolorów do reprezentowania rozkładu danych.

W przykładzie poniżej czerwony kolor oznacza obszary o wysokim stężeniu policji. stacji radiowej w Wiktorii w Australii.

Mapa termiczna na mapie

Uwaga: możesz ustawić własne kolory mapy termicznej za pomocą przycisków gradient usłudze. Zobacz, jak dostosować kolory i inne właściwości parametrów mapę termiczną.

Jeśli biblioteka nie została jeszcze skonfigurowana, wykonaj te czynności, aby ją skonfigurować , zanim przeczytasz resztę tę stronę.

Dodawanie prostej mapy termicznej

Aby dodać mapę termiczną do swojej mapy, potrzebujesz zbioru danych składających się z dla każdej interesującej lokalizacji. Najpierw utwórz GMUHeatmapTileLayer przez ustawienie właściwości map na wartość GMSMapView. Zrób to w funkcji viewDidLoad() aplikacji, aby mieć pewność, że mapa podstawowa jest załadowano przed rozpoczęciem pracy z mapą termiczną. Następnie przekaż kolekcję GMUWeightedLatLng obiektów do instancji GMUHeatmapTileLayer.

Narzędzie dostarcza klasę GMUHeatmapTileLayer, która akceptuje kolekcja GMUWeightedLatLng obiektów. Tworzy ona obrazki różnych poziomów powiększenia w zależności od opcji promienia, gradientu i przezroczystości. podane.

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 GMUHeatmapTileLayer instancję.
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ć. Możesz ustawić te opcje, gdy: po utworzeniu instancji GMUHeatmapTileLayer lub w dowolnym momencie przez ustawienie nowej wartości 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żywaj GMUHeatmapTileLayer.radius, aby ustawić promień.

2. Gradient: zakres kolorów używanych przez mapę termiczną do generowania koloru. w skali od najniższej do największej intensywności. Element GMUGradient jest tworzony za pomocą tablicę całkowitą zawierającą kolory, a także tablicę zmiennoprzecinkową, która wskazuje punkt początkowy każdego koloru, podany jako procent maksymalnej intensywności, i wyrażona jako ułamek od 0 do 1. Możesz określić tylko jeden kolor dla jednokolorowego gradientu, a w przypadku wielokolorowego – co najmniej dwóch kolorów. gradientu. Mapa kolorów jest generowana przy użyciu interpolacji między tymi kolorami. Domyślny gradient ma 2 kolory. Parametr colorMapSize określa liczby kroków w gradientie. Większe wartości oznaczają płynniejsze działanie gradientu, a mniejsze liczby dają wyraźniejsze przejścia podobne do tych wykres konturowy. Użyj funkcji GMUHeatmapTileLayer.gradient, aby ustawić gradient.

3. Przezroczystość: przezroczystość całej warstwy mapy termicznej i zakresów od 0 do 1. Wartość domyślna to 0,7. Użyj GMUHeatmapTileLayer.opacity, aby ustawić przezroczystoś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. 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 karty GMUHeatmapTileLayer.weightedData z pomyślnym wynikiem tablicę o wartości GMUWeightedLatLng.
2. Zadzwoń do firmy GMUHeatmapTileLayer.clearTileCache().

Uwaga: jeśli chcesz dodać punkty do mapy termicznej lub usunąć je z mapy termicznej, najpierw zaktualizuj zbieranie danych, a następnie GMUHeatmapTileLayer.weightedData.

Usuwanie mapy termicznej

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

Swift

heatmapLayer.map = nil
      

Objective-C

_heatmapLayer.map = nil;
      

Zobacz aplikację w wersji demonstracyjnej

Innym przykładem implementacji mapy termicznej jest HeatmapViewController w aplikacji demonstracyjnej, która jest częścią biblioteki narzędziowej. Z przewodnika konfiguracji dowiesz się, jak uruchom aplikację w wersji demonstracyjnej.