Эта страница переведена с помощью Cloud Translation API.

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

Выберите платформу: Android iOS JavaScript

Обзор
Загрузить библиотеку визуализации
Добавить взвешенные точки данных
Настройте слой тепловой карты

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

Обзор

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

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

Слой тепловой карты является частью библиотеки google.maps.visualization и не загружается по умолчанию. Классы визуализации представляют собой самостоятельную библиотеку, отделенную от основного кода JavaScript API Карт. Чтобы использовать функциональность этой библиотеки, необходимо сначала загрузить её с помощью параметра libraries в URL-адресе начальной загрузки 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 : определяет, рассеиваются ли тепловые карты при масштабировании. Если значение Dissipating равно False, радиус влияния увеличивается с увеличением масштаба, чтобы гарантировать сохранение интенсивности цвета в любой географической точке. Значение по умолчанию — True.
gradient : цветовой градиент тепловой карты, заданный как массив цветовых строк CSS. Поддерживаются все цвета CSS3 , включая RGBA, за исключением расширенных именованных цветов и значений HSL(A).
maxIntensity : максимальная интенсивность тепловой карты. По умолчанию цвета тепловой карты динамически масштабируются в соответствии с наибольшей концентрацией точек в каждом конкретном пикселе карты. Это свойство позволяет указать фиксированное максимальное значение. Установка максимальной интенсивности может быть полезна, если ваш набор данных содержит несколько выбросов с необычно высокой интенсивностью.
radius : радиус влияния для каждой точки данных в пикселях.
opacity : Непрозрачность тепловой карты, выраженная числом от 0 до 1.

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

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

Слой тепловых карт Оптимизируйте свои подборки Сохраняйте и классифицируйте контент в соответствии со своими настройками.