Слой тепловых карт

Выберите платформу: Android iOS JavaScript
  1. Обзор
  2. Загрузите библиотеку визуализации
  3. Добавьте взвешенные точки данных
  4. Настройка слоя тепловой карты

Слой тепловой карты обеспечивает рендеринг тепловых карт на стороне клиента.

Обзор

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

Загрузите библиотеку визуализации

Слой тепловой карты является частью библиотеки google.maps.visualization и не загружается по умолчанию. Классы визуализации представляют собой автономную библиотеку, отдельную от основного кода API JavaScript Карт. Чтобы использовать функциональные возможности, содержащиеся в этой библиотеке, необходимо сначала загрузить ее с помощью параметра libraries в URL-адресе начальной загрузки Maps JavaScript API:

<script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&loading=async&libraries=visualization&callback=initMap">
</script>

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

Чтобы добавить слой тепловой карты, необходимо сначала создать новый объект HeatmapLayer и предоставить ему некоторые географические данные в форме массива или объекта MVCArray[] . Данные могут быть либо объектом LatLng , либо объектом WeightedLocation . После создания экземпляра объекта HeatmapLayer добавьте его на карту, вызвав метод setMap() .

В следующем примере на карту Сан-Франциско добавляется 14 точек данных.

/* Data points defined as an array of LatLng objects */
var heatmapData = [
  new google.maps.LatLng(37.782, -122.447),
  new google.maps.LatLng(37.782, -122.445),
  new google.maps.LatLng(37.782, -122.443),
  new google.maps.LatLng(37.782, -122.441),
  new google.maps.LatLng(37.782, -122.439),
  new google.maps.LatLng(37.782, -122.437),
  new google.maps.LatLng(37.782, -122.435),
  new google.maps.LatLng(37.785, -122.447),
  new google.maps.LatLng(37.785, -122.445),
  new google.maps.LatLng(37.785, -122.443),
  new google.maps.LatLng(37.785, -122.441),
  new google.maps.LatLng(37.785, -122.439),
  new google.maps.LatLng(37.785, -122.437),
  new google.maps.LatLng(37.785, -122.435)
];

var sanFrancisco = new google.maps.LatLng(37.774546, -122.433523);

map = new google.maps.Map(document.getElementById('map'), {
  center: sanFrancisco,
  zoom: 13,
  mapTypeId: 'satellite'
});

var heatmap = new google.maps.visualization.HeatmapLayer({
  data: heatmapData
});
heatmap.setMap(map);

Добавьте взвешенные точки данных

Тепловая карта может отображать либо объекты LatLng , либо WeightedLocation , либо их комбинацию. Оба объекта представляют одну точку данных на карте, но объект WeightedLocation позволяет дополнительно указать вес для этой точки данных. Применение веса к точке данных приведет к тому, что WeightedLocation будет отображаться с большей интенсивностью, чем простой объект LatLng . Вес представляет собой линейную шкалу, в которой каждый объект LatLng имеет неявный вес, равный 1. Добавление одного WeightedLocation {location: new google.maps.LatLng(37.782, -122.441), weight: 3} будет иметь тот же эффект, что и добавив google.maps.LatLng(37.782, -122.441) три раза. Вы можете смешивать объекты weightedLocation и LatLng в одном массиве.

Использование объекта WeightedLocation вместо LatLng может быть полезно в следующих случаях:

  • Добавление больших объемов данных в одном месте. Отрисовка одного объекта WeightedLocation с весом 1000 будет быстрее, чем отрисовка 1000 объектов LatLng .
  • Применение акцента к вашим данным на основе произвольных значений. Например, вы можете использовать объекты LatLng при построении графика данных о землетрясениях, но вы можете использовать WeightedLocation для измерения магнитуды каждого землетрясения по шкале Рихтера. 
/* Data points defined as a mixture of WeightedLocation and LatLng objects */
var heatMapData = [
  {location: new google.maps.LatLng(37.782, -122.447), weight: 0.5},
  new google.maps.LatLng(37.782, -122.445),
  {location: new google.maps.LatLng(37.782, -122.443), weight: 2},
  {location: new google.maps.LatLng(37.782, -122.441), weight: 3},
  {location: new google.maps.LatLng(37.782, -122.439), weight: 2},
  new google.maps.LatLng(37.782, -122.437),
  {location: new google.maps.LatLng(37.782, -122.435), weight: 0.5},

  {location: new google.maps.LatLng(37.785, -122.447), weight: 3},
  {location: new google.maps.LatLng(37.785, -122.445), weight: 2},
  new google.maps.LatLng(37.785, -122.443),
  {location: new google.maps.LatLng(37.785, -122.441), weight: 0.5},
  new google.maps.LatLng(37.785, -122.439),
  {location: new google.maps.LatLng(37.785, -122.437), weight: 2},
  {location: new google.maps.LatLng(37.785, -122.435), weight: 3}
];

var sanFrancisco = new google.maps.LatLng(37.774546, -122.433523);

map = new google.maps.Map(document.getElementById('map'), {
  center: sanFrancisco,
  zoom: 13,
  mapTypeId: 'satellite'
});

var heatmap = new google.maps.visualization.HeatmapLayer({
  data: heatMapData
});
heatmap.setMap(map);

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

Вы можете настроить способ отображения вашей тепловой карты с помощью следующих параметров тепловой карты. Дополнительную информацию см. в документации HeatmapLayerOptions .

  • dissipating : определяет, рассеиваются ли тепловые карты при масштабировании. Если значение рассеивания ложно, радиус влияния увеличивается с увеличением уровня масштабирования, чтобы гарантировать сохранение интенсивности цвета в любом заданном географическом местоположении. По умолчанию истинно.
  • gradient : цветовой градиент тепловой карты, заданный как массив цветовых строк CSS. Поддерживаются все цвета CSS3 , включая RGBA, за исключением расширенных именованных цветов и значений HSL(A).
  • maxIntensity : максимальная интенсивность тепловой карты. По умолчанию цвета тепловой карты динамически масштабируются в соответствии с наибольшей концентрацией точек в любом конкретном пикселе карты. Это свойство позволяет указать фиксированный максимум. Установка максимальной интенсивности может оказаться полезной, если ваш набор данных содержит несколько выбросов необычно высокой интенсивности.
  • radius : радиус влияния для каждой точки данных в пикселях.
  • opacity : непрозрачность тепловой карты, выраженная числом от 0 до 1.

В приведенном ниже примере показаны некоторые доступные параметры настройки.

Посмотреть пример