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

Оптимизируйте свои подборки Сохраняйте и классифицируйте контент в соответствии со своими настройками.
Выберите платформу: 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 в демонстрационном приложении, которое поставляется с служебной библиотекой. В руководстве по установке показано, как запустить демонстрационное приложение.