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.
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:
- Utwórz instancję
GMUHeatmapTileLayer
z ustawieniem właściwościmap
naGMSMapView
(zrób to w funkcjiviewDidLoad()
aplikacji). - Przekaż do instancji
GMUHeatmapTileLayer
kolekcję obiektówGMUWeightedLatLng
. - 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:
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
.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. ParametrcolorMapSize
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 klawiszaGMUHeatmapTileLayer.gradient
.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:
- Zmień opcję na odpowiednią wartość.
- Zadzwoń do firmy
GMUHeatmapTileLayer.clearTileCache()
.
Zmienianie zbioru danych
Aby zmienić zbiór danych, na którym tworzona jest mapa termiczna:
- Zaktualizuj zbieranie danych. użyj funkcji
GMUHeatmapTileLayer.weightedData
, która przekazuje tablicęGMUWeightedLatLng
. - 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.