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

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

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

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

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

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

Тепловая карта расположения полицейских участков
Тепловая карта

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

Как добавить простую тепловую карту

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

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

Рассмотрим эти шаги более подробно.

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

    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

В этом примере данные хранятся в файле 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. Radius (Радиус). Размер гауссова размытия, применяемого к тепловой карте, выраженный в пикселях. Значение по умолчанию – 20. Допустимый диапазон значений – от 10 до 50. Чтобы задать радиус, используйте GMUHeatmapTileLayer.radius.

  2. Gradient (Градиент). Диапазон цветов, используемый при создании карты цветов для тепловой карты, в диапазоне от минимальной до максимальной интенсивности. Для создания GMUGradient используются два массива: массив целочисленных значений (integer), содержащий цвета, и массив значений с плавающей запятой (float), указывающий начальную точку для каждого цвета. Последний массив представлен процентными значениями от максимальной интенсивности, которые выражаются дробной величиной от нуля до единицы. Для одноцветного градиента необходимо указать только один цвет, а для многоцветного – как минимум два. Для создания карты цветов используется интерполяция между этими цветами. По умолчанию градиент содержит два цвета. Параметр colorMapSize определяет количество шагов в градиенте. Чем больше значение, тем более плавным будет градиент, а чем меньше – тем более резкими будут переходы, как на контурном графике. Чтобы задать градиент, используйте GMUHeatmapTileLayer.gradient.

  3. Opacity (Непрозрачность). Это непрозрачность всего слоя тепловой карты. Диапазон допустимых значений – от 0 до 1. Значение по умолчанию – 0,7. Используйте GMUHeatmapTileLayer.opacity, чтобы задать значение непрозрачности.

Например, создайте 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];

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

Swift

heatmapLayer.opacity = 0.7

Objective-C

_heatmapLayer.opacity = 0.7;

Как изменить существующий вариант

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

  1. Укажите нужное значение.
  2. Позвоните в компанию "GMUHeatmapTileLayer.clearTileCache()".

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

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

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

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

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

Swift

heatmapLayer.map = nil

Objective-C

_heatmapLayer.map = nil;

Демонстрационное приложение

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