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

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

Слой тепловых карт обеспечивает визуализацию тепловых карт на стороне клиента.

Обзор

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

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

Heatmap Layer является частью библиотеки google.maps.visualization и не загружается по умолчанию. Классы Visualization представляют собой автономную библиотеку, отделенную от основного кода Maps JavaScript API. Чтобы использовать функциональность, содержащуюся в этой библиотеке, необходимо сначала загрузить ее с помощью параметра 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>

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

Чтобы добавить слой Heatmap, необходимо сначала создать новый объект 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 : Указывает, рассеиваются ли тепловые карты при масштабировании. Если dissipating имеет значение false, радиус влияния увеличивается с уровнем масштабирования, чтобы гарантировать сохранение интенсивности цвета в любом заданном географическом местоположении. Значение по умолчанию — true.
  • gradient : цветовой градиент тепловой карты, указанный как массив цветовых строк CSS. Поддерживаются все цвета CSS3 , включая RGBA, за исключением расширенных именованных цветов и значений HSL(A).
  • maxIntensity : максимальная интенсивность тепловой карты. По умолчанию цвета тепловой карты динамически масштабируются в соответствии с наибольшей концентрацией точек в любом конкретном пикселе на карте. Это свойство позволяет указать фиксированный максимум. Установка максимальной интенсивности может быть полезна, когда ваш набор данных содержит несколько выбросов с необычно высокой интенсивностью.
  • radius : радиус влияния для каждой точки данных в пикселях.
  • opacity : непрозрачность тепловой карты, выраженная числом от 0 до 1.

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

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