- Обзор
- Загрузка библиотеки Visualization
- Добавление взвешенных точек данных
- Настройка слоя тепловых карт
Слой тепловых карт обеспечивает прорисовку этого типа карт на стороне клиента.
Обзор
На тепловой карте демонстрируется плотность данных в различных географических точках. Если этот слой активирован, на карте отображается цветное наложение. По умолчанию области с максимальной и минимальной плотностью закрашиваются красным и зеленым цветом соответственно.
Загрузка библиотеки Visualization
Слой тепловых карт входит в библиотеку 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>
Добавление слоя тепловых карт
Чтобы добавить слой тепловых карт, нужно предварительно создать новый объект 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, с ростом масштаба увеличивается радиус влияния. Это позволяет обеспечить равномерную интенсивность цвета в любой географической точке. Значение по умолчанию – true.gradient– градиент цвета тепловой карты в виде массива строк цветов CSS. За исключением расширенных именованных цветов и значений HSL(A), поддерживаются любые цвета CSS3, в том числе RGBA.maxIntensity– максимальная интенсивность цветов на тепловой карте. По умолчанию цвета тепловой карты динамически изменяются в зависимости от максимальной концентрации точек в каждом определенном пикселе карты. С помощью этого свойства можно указывать фиксированное максимальное значение. Это ограничение задается, если в наборе данных есть несколько мест с необычно высокой интенсивностью.radius– радиус влияния каждой точки данных (в пикселях).opacity– прозрачность тепловой карты, выраженная в виде значения от 0 до 1.
В примере ниже показаны некоторые доступные параметры настройки.