Тепловые карты

Выберите платформу: Android iOS JavaScript

На этой странице описана утилита тепловой карты, доступная в библиотеке утилит Maps SDK для iOS . Тепловые карты полезны для представления распределения и плотности точек данных на карте.

В этом видео обсуждается использование тепловых карт в качестве альтернативы маркерам, когда для ваших данных требуется большое количество точек данных на карте.

Тепловые карты позволяют зрителям понять распределение и относительную интенсивность точек данных на карте. Вместо размещения маркера в каждом месте тепловые карты используют цвет для представления распределения данных.

В приведенном ниже примере красный цвет обозначает районы с высокой концентрацией полицейских участков в Виктории, Австралия.

Карта с тепловой картой, показывающей расположение полицейских участков.
Тепловая карта на карте

Если вы еще не настроили библиотеку, следуйте инструкциям по установке, прежде чем читать остальную часть этой страницы.

Добавление простой тепловой карты

Чтобы добавить тепловую карту на карту, вам понадобится набор данных, состоящий из координат каждого интересующего местоположения. Сначала создайте экземпляр GMUHeatmapTileLayer , задав для свойства map значение GMSMapView . Сделайте это в функции viewDidLoad() вашего приложения, чтобы убедиться, что базовая карта загружена перед работой с тепловой картой. Затем передайте коллекцию объектов GMUWeightedLatLng экземпляру GMUHeatmapTileLayer .

Утилита предоставляет класс GMUHeatmapTileLayer , который принимает коллекцию объектов GMUWeightedLatLng . Он создает мозаичные изображения для различных уровней масштабирования на основе предоставленных параметров радиуса, градиента и непрозрачности.

Рассмотрим этапы более подробно:

  1. Создайте экземпляр GMUHeatmapTileLayer , установив для свойства map значение GMSMapView (сделайте это в функции viewDidLoad() вашего приложения).
  2. Передайте коллекцию объектов GMUWeightedLatLng экземпляру GMUHeatmapTileLayer .
  3. Вызовите GMUHeatmapTileLayer.map , передав представление карты.

    Быстрый 

    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
  }
}

    Цель-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

В этом примере данные хранятся в файле JSON, police_stations.json . Вот выдержка из файла: 

[
{"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 }
]

Настройка тепловой карты

Тепловая карта имеет несколько настраиваемых свойств. Вы можете установить параметры при первоначальном создании экземпляра GMUHeatmapTileLayer или в любое время, задав для параметра новое значение.

Доступны следующие варианты:

  1. Радиус: размер размытия по Гауссу, примененного к тепловой карте, выраженный в пикселях. Значение по умолчанию — 20. Должно быть от 10 до 50. Используйте GMUHeatmapTileLayer.radius чтобы установить радиус.

  2. Градиент: диапазон цветов, которые тепловая карта использует для создания цветовой карты, в диапазоне от самой низкой до самой высокой интенсивности. GMUGradient создается с использованием целочисленного массива, содержащего цвета, и массива с плавающей запятой, указывающего начальную точку для каждого цвета, заданного в процентах от максимальной интенсивности и выраженного в виде дроби от 0 до 1. Вам необходимо указать только один цвет. для одноцветного градиента или минимум два цвета для многоцветного градиента. Карта цветов создается с использованием интерполяции между этими цветами. Градиент по умолчанию имеет два цвета. Параметр colorMapSize определяет количество шагов градиента. Большие числа приведут к более плавному градиенту, а меньшие числа дадут более резкие переходы, подобные контурному графику. Используйте GMUHeatmapTileLayer.gradient чтобы установить градиент.

  3. Непрозрачность: это непрозрачность всего слоя тепловой карты, она варьируется от 0 до 1. Значение по умолчанию — 0,7. Используйте GMUHeatmapTileLayer.opacity чтобы установить значение непрозрачности.

Например, создайте Gradient :

Быстрый 

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

Цель-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];

Чтобы изменить непрозрачность существующей тепловой карты:

Быстрый 

heatmapLayer.opacity = 0.7

Цель-C 

_heatmapLayer.opacity = 0.7;

Обновить существующую опцию

Чтобы обновить уже установленный параметр, выполните следующие действия:

  1. Обновите параметр до желаемого значения.
  2. Вызовите GMUHeatmapTileLayer.clearTileCache() .

Изменение набора данных

Чтобы изменить набор данных, на основе которого строится тепловая карта:

  1. Обновите свою коллекцию данных. Используйте GMUHeatmapTileLayer.weightedData , передав массив GMUWeightedLatLng .
  2. Вызовите GMUHeatmapTileLayer.clearTileCache() .

Удаление тепловой карты

Чтобы удалить тепловую карту, вызовите GMUHeatmapTileLayer.map , передав nil .

Быстрый 

heatmapLayer.map = nil

Цель-C 

_heatmapLayer.map = nil;

Посмотреть демо-приложение

В качестве еще одного примера реализации тепловой карты взгляните на HeatmapViewController в демонстрационном приложении, которое поставляется с служебной библиотекой. В руководстве по установке показано, как запустить демонстрационное приложение.