На этой странице описана утилита тепловой карты, доступная в библиотеке утилит Maps SDK для iOS . Тепловые карты полезны для представления распределения и плотности точек данных на карте.
В этом видео обсуждается использование тепловых карт в качестве альтернативы маркерам, когда для ваших данных требуется большое количество точек данных на карте.
Тепловые карты позволяют зрителям понять распределение и относительную интенсивность точек данных на карте. Вместо размещения маркера в каждом месте тепловые карты используют цвет для представления распределения данных.
В приведенном ниже примере красный цвет обозначает районы с высокой концентрацией полицейских участков в Виктории, Австралия.
![Карта с тепловой картой, показывающей расположение полицейских участков.](https://developers-dot-devsite-v2-prod.appspot.com/static/maps/documentation/ios-sdk/images/heatmap-ios.png?authuser=7&hl=ru)
Если вы еще не настроили библиотеку, следуйте инструкциям по установке, прежде чем читать остальную часть этой страницы.
Добавление простой тепловой карты
Чтобы добавить тепловую карту на карту, вам понадобится набор данных, состоящий из координат каждого интересующего местоположения. Сначала создайте экземпляр GMUHeatmapTileLayer
, задав для свойства map
значение GMSMapView
. Сделайте это в функции viewDidLoad()
вашего приложения, чтобы убедиться, что базовая карта загружена перед работой с тепловой картой. Затем передайте коллекцию объектов GMUWeightedLatLng
экземпляру GMUHeatmapTileLayer
.
Утилита предоставляет класс GMUHeatmapTileLayer
, который принимает коллекцию объектов GMUWeightedLatLng
. Он создает мозаичные изображения для различных уровней масштабирования на основе предоставленных параметров радиуса, градиента и непрозрачности.
Рассмотрим этапы более подробно:
- Создайте экземпляр
GMUHeatmapTileLayer
, установив для свойстваmap
значениеGMSMapView
(сделайте это в функцииviewDidLoad()
вашего приложения). - Передайте коллекцию объектов
GMUWeightedLatLng
экземпляруGMUHeatmapTileLayer
. - Вызовите
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
или в любое время, задав для параметра новое значение.
Доступны следующие варианты:
Радиус: размер размытия по Гауссу, примененного к тепловой карте, выраженный в пикселях. Значение по умолчанию — 20. Должно быть от 10 до 50. Используйте
GMUHeatmapTileLayer.radius
, чтобы установить радиус.Градиент: диапазон цветов, которые тепловая карта использует для создания цветовой карты, от самой низкой до самой высокой интенсивности.
GMUGradient
создается с использованием целочисленного массива, содержащего цвета, и массива с плавающей запятой, указывающего начальную точку для каждого цвета, заданного в процентах от максимальной интенсивности и выраженного в виде дроби от 0 до 1. Вам необходимо указать только один цвет. для одноцветного градиента или минимум два цвета для многоцветного градиента. Карта цветов создается с использованием интерполяции между этими цветами. Градиент по умолчанию имеет два цвета. ПараметрcolorMapSize
определяет количество шагов градиента. Большие числа приведут к более плавному градиенту, а меньшие числа дадут более резкие переходы, подобные контурному графику. ИспользуйтеGMUHeatmapTileLayer.gradient
, чтобы установить градиент.Непрозрачность: это непрозрачность всего слоя тепловой карты, она варьируется от 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;
Обновить существующую опцию
Чтобы обновить уже установленный параметр, выполните следующие действия:
- Обновите параметр до желаемого значения.
- Вызовите
GMUHeatmapTileLayer.clearTileCache()
.
Изменение набора данных
Чтобы изменить набор данных, на основе которого строится тепловая карта:
- Обновите свою коллекцию данных. Используйте
GMUHeatmapTileLayer.weightedData
, передав массивGMUWeightedLatLng
. - Вызовите
GMUHeatmapTileLayer.clearTileCache()
.
Удаление тепловой карты
Чтобы удалить тепловую карту, вызовите GMUHeatmapTileLayer.map
, передав nil
.
Быстрый
heatmapLayer.map = nil
Цель-C
_heatmapLayer.map = nil;
Посмотреть демо-приложение
В качестве еще одного примера реализации тепловой карты взгляните на HeatmapViewController
в демонстрационном приложении, которое поставляется с служебной библиотекой. В руководстве по установке показано, как запустить демонстрационное приложение.