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

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

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

Обзор

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

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

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

<script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&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 : указывает, рассеиваются ли тепловые карты при масштабировании. Если для рассеивания установлено значение false, радиус влияния увеличивается с увеличением уровня масштабирования, чтобы обеспечить сохранение интенсивности цвета в любом заданном географическом местоположении. По умолчанию истинно.
  • gradient : цветовой градиент тепловой карты, указанный в виде массива цветовых строк CSS. Поддерживаются все цвета CSS3 , включая RGBA, за исключением расширенных именованных цветов и значений HSL(A).
  • maxIntensity : максимальная интенсивность тепловой карты. По умолчанию цвета тепловой карты динамически масштабируются в соответствии с наибольшей концентрацией точек в любом конкретном пикселе на карте. Это свойство позволяет указать фиксированный максимум. Установка максимальной интенсивности может быть полезна, когда ваш набор данных содержит несколько выбросов с необычно высокой интенсивностью.
  • radius : радиус влияния для каждой точки данных в пикселях.
  • opacity : непрозрачность тепловой карты, выраженная числом от 0 до 1.

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

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