Mapy termiczne

Wybierz platformę: Android iOS JavaScript

Ta strona opisuje narzędzie mapy termicznej, które jest dostępne w bibliotece narzędzi pakietu Maps SDK na iOS. Mapy termiczne są przydatne, gdy chcesz pokazać na mapie rozkład i gęstość punktów danych.

Ten film omawia wykorzystywanie map termicznych jako alternatywy dla znaczników, gdy dane wymagają na mapie dużej liczby punktów danych.

Mapy termiczne ułatwiają widzom poznanie rozkładu i względnej intensywności punktów danych na mapie. Zamiast umieszczać znacznik w każdym miejscu, mapy termiczne używają koloru do reprezentowania rozkładu danych.

W przykładzie poniżej czerwony kolor oznacza obszary z dużą koncentracją policji w Victorii w Australii.

Mapa z mapą termiczną, na której widać lokalizację komisariatu policji
Mapa termiczna na mapie

Jeśli nie masz jeszcze skonfigurowanej biblioteki, zapoznaj się z przewodnikiem po konfiguracji, zanim przeczytasz pozostałą część tej strony.

Dodawanie prostej mapy termicznej

Aby dodać mapę termiczną do mapy, będziesz potrzebować zbioru danych zawierającego współrzędne dla każdej interesującej lokalizacji. Najpierw utwórz instancję GMUHeatmapTileLayer, ustawiając właściwość map na GMSMapView. Zrób to w funkcji viewDidLoad() aplikacji, aby upewnić się, że mapa podstawowa została wczytana przed rozpoczęciem pracy z mapą termiczną. Następnie przekazać do instancji GMUHeatmapTileLayer kolekcję obiektów GMUWeightedLatLng.

Narzędzie udostępnia klasę GMUHeatmapTileLayer, która akceptuje kolekcję obiektów GMUWeightedLatLng. Tworzy on obraz kafelków dla różnych poziomów powiększenia na podstawie dostępnych opcji promienia, gradientu i przezroczystości.

Bardziej szczegółowe kroki:

  1. Utwórz instancję GMUHeatmapTileLayer, podając we właściwości map wartość GMSMapView (zrób to w aplikacji viewDidLoad()).
  2. Przekaż kolekcję obiektów GMUWeightedLatLng do instancji GMUHeatmapTileLayer.
  3. Zadzwoń do firmy GMUHeatmapTileLayer.map, pomijają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 jej fragment:

[
{"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ść dla tej opcji.

Oto one:

  1. Promień: rozmiar rozmycia Gaussa stosowanego do mapy termicznej, wyrażone w pikselach. Domyślna wartość to 20. Musi mieścić się w przedziale od 10 do 50. Użyj ustawienia GMUHeatmapTileLayer.radius, aby ustawić promień.

  2. Gradient: zakres kolorów używany przez mapę termiczną do wygenerowania mapy kolorów, od najniższej do najwyższej intensywności. GMUGradient jest tworzony przy użyciu tablicy całkowitej z kolorami i tablicy zmiennoprzecinkowej 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 lub co najmniej 2 kolory w przypadku gradientu wielokolorowego. Mapa kolorów jest generowana za pomocą interpolacji między tymi kolorami. Domyślny gradient ma 2 kolory. Parametr colorMapSize określa liczbę kroków w gradientie. Większe liczby umożliwiają płynne przejście, natomiast mniejsze wartości zapewniają ostre przejścia podobne do wykresu liniowego. Użyj GMUHeatmapTileLayer.gradient, aby ustawić gradient.

  3. Przezroczystość: to przezroczystość całej warstwy mapy termicznej, o zakresie od 0 do 1. Wartość domyślna to 0,7. Wartość GMUHeatmapTileLayer.opacity określa przezroczystość.

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().

Zmiana zbioru danych

Aby zmienić zbiór danych, na którym powstaje 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 funkcję GMUHeatmapTileLayer.map, przechodząc przez: nil.

Swift

heatmapLayer.map = nil
      

Objective-C

_heatmapLayer.map = nil;
      

Zobacz aplikację demonstracyjną

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