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

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

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

Тепловые карты подходят для разных сценариев использования. Ниже приведены некоторые из них.

• Данные о температуре. Вы сможете получить приблизительные значения данных между двумя точками.
• Сведения от датчиков шума. У вас будет возможность не только оценить уровень шума в точке установки датчика, но и получить представление о снижении шума на расстоянии. Уровень шума на одном из участков может быть невысоким. Но если несколько датчиков фиксируют воздействие на одну зону, в этой области могут наблюдаться более высокие уровни шума. Такая область перекрытия будет видна на тепловой карте.
• GPS-данные. Вам будет доступна информация в виде взвешенной карты высот, где интенсивность каждой точки данных зависит от скорости. Например, эта функция позволит узнать, на каких участках транспортное средство двигалось с превышение скорости.

Совет

Слои тепловой карты по умолчанию преобразовывают координаты всех геометрических объектов в источнике данных. Чтобы отображать в слое только геометрические объекты, присвойте параметру filter для этого слоя значение ['==', ['geometry-type'], 'Point']. Если вам также нужно включить компоненты MultiPoint, присвойте параметру filter для этого слоя значение ['any', ['==', ['geometry-type'], 'Point'], ['==', ['geometry-type'], 'MultiPoint']].

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

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

В примере кода ниже каждая точка тепловой карты имеет радиус 10 пикселей на любом уровне масштабирования. Для удобства пользователей тепловая карта находится под слоем меток. Так метки четко видны. Данные в этом примере содержат информацию об опасности землетрясений от Геологической службы США. Здесь учтены значительные землетрясения, произошедшие за последние 30 дней.

//Create a data source and add it to the map.
var datasource = new atlas.source.DataSource();
map.sources.add(datasource);

//Load a dataset of points, in this case earthquake data from the USGS.
datasource.importDataFromUrl('https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_week.geojson');

//Create a heat map and add it to the map.
map.layers.add(new atlas.layer.HeatMapLayer(datasource, null, {
  radius: 10,
  opacity: 0.8
}), 'labels');

В примере уровня простой тепловой карты показано, как создать простую тепловую карту из набора функций точек. Исходный код этого примера см . в разделе "Простой исходный код уровня тепловой карты".

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

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

• radius — это радиус в пикселях для отрисовки каждой точки данных. Радиус определяется в виде фиксированного числа или выражения. С помощью выражения можно масштабировать радиус, в зависимости от уровня увеличения, чтобы демонстрировать согласованные пространственные области на карте (например, радиус 5 миль).

• color: — это цвета для тепловой карты. Цветовой градиент — это стандартный параметр тепловых карт. Нужного эффекта можно достичь с помощью выражения interpolate. Вы также можете использовать выражение step для выделения цветом элементов тепловой карты, чтобы визуально разбить плотность данных на диапазоны. Так карта будет напоминать топографическую или радиолокационную. Эти цветовые палитры определяют цвета в диапазоне от минимальной до максимальной плотности.

  Значения цветов для тепловых карт указываются в виде выражения для значения heatmap-density. Цвет области, в которой отсутствуют данные, определяется индексом 0 в выражении для интерполяции или цветом по умолчанию в выражении для ступенчатой палитры. Это значение можно использовать для определения цвета фона. Часто применяется прозрачный или полупрозрачный черный цвет.

  Вот несколько примеров выражений для определения цвета.

  Выражение для интерполяции цвета	Выражение для ступенчатой палитры
  [     'interpolate',     ['linear'],     ['heatmap-density'],     0, 'transparent',     0.01, 'purple',     0.5, '#fb00fb',     1, '#00c3ff' ]	[     'step',     ['heatmap-density'],     'transparent',     0.01, 'navy',     0.25, 'green',     0.50, 'yellow',     0.75, 'red' ]

• opacity — это степень прозрачности слоя тепловой карты.

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

• weight — это вес точки данных. По умолчанию для этого параметра установлено значение 1 для всех точек данных, то есть они имеют равный вес. Параметр weight используется в качестве множителя. Для него можно использовать фиксированное число или выражение. Если в качестве веса задано число, то это эквивалентно двукратному размещению каждой точки данных на карте. Например, если значение параметра weight равно 2, то плотность удваивается. Фиксированное число в качестве значения параметра weight изменяет тепловую карту точно так же, как изменение параметра intensity.

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

• source и source-layer позволяют обновлять источник данных.

В примере "Параметры слоя тепловой карты" показано, как различные параметры слоя тепловой карты, влияющие на отрисовку. Исходный код этого примера см . в разделе "Параметры слоя тепловой карты".

Согласованная масштабируемая тепловая карта

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

Используйте выражение zoom для изменения радиуса на всех уровнях масштабирования, чтобы каждая точка данных покрывала одну и ту же физическую область на карте. Это выражение делает слой тепловой карты более статичным и согласованным. Каждый уровень масштабирования карты имеет в два раза больше пикселей по вертикали и горизонтали, чем предыдущий.

Удваивание радиуса с каждым уровнем масштабирования позволяет создавать тепловые карты, которые выглядит согласованно на всех уровнях. Чтобы применить такое масштабирование, используйте выражение zoom с базовым значением 2 для exponential interpolation. Радиус пикселей должен быть задан для минимального уровня масштабирования, а масштабируемый радиус для максимального уровня — вычислен как 2 * Math.pow(2, minZoom - maxZoom), что показано в примере ниже. Измените масштаб, чтобы посмотреть, как меняется тепловая карта.

В примере с согласованной масштабируемой тепловой картой показано, как создать тепловую карту, в которой радиус каждой точки данных охватывает одну и ту же физическую область на земле, создавая более согласованный пользовательский интерфейс при масштабировании карты. Тепловая карта в этом примере последовательно масштабируется между уровнями масштабирования 10 и 22. Каждый уровень масштабирования карты имеет в два раза больше пикселей по вертикали и горизонтали, чем предыдущий. Удвоение радиуса с каждым уровнем масштабирования создает тепловую карту, которая выглядит согласованно во всех уровнях масштабирования. Исходный код для этого примера см. в разделе "Согласованный масштабируемый исходный код тепловой карты".

Выражение zoom можно использовать только в выражениях step и interpolate. Следующее выражение можно использовать для приближения радиуса в метрах. Это выражение использует заполнитель radiusMeters, который следует заменить нужным радиусом. Это выражение вычисляет приблизительный радиус в пикселях для уровней масштабирования на экваторе 0 и 24, а также использует выражение exponential interpolation для масштабирования этих значений так же, как и в системе мозаичного заполнения на карте.

[
    'interpolate',
    ['exponential', 2],
    ['zoom'],
    0, ['*', radiusMeters, 0.000012776039596366526],
    24, ['*', radiusMeters, 214.34637593279402]
]

Совет

При включенной кластеризации для источника данных, расположенные близко друг к другу точки данных группируются в кластерные точки. Количество точек в каждом кластере можно использовать в качестве выражения weight для тепловой карты. Это поможет значительно сократить количество отрисованных точек. Число точек кластера хранится в свойстве point_count компонента точки.

var layer = new atlas.layer.HeatMapLayer(datasource, null, {
   weight: ['get', 'point_count']
});

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

Следующие шаги

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

HeatMapLayer

HeatMapLayerOptions

Дополнительные примеры кода для добавления в карты см. в следующих статьях:

Создание источника данных

Использование стилистических выражений на основе данных