Теплокарта (Heatmap) используется повсеместно — для визуализации наиболее посещаемых областей веб-страницы, ареалов обитания животных, областей сейсмической активности, плотности осадков и многого другого. В данной статье мы рассмотрим тепловую карту плотности распределения городов по миру.
Получить список городов достаточно просто — например, из википедии. Конечно, в том виде, в котором они находятся на википедии (в формате HTML), их использовать достаточно трудно. К счастью, есть люди, которые подготовили всю информацию в удобном для картографии виду — в формате GeoJSON. Это обычный JSON, который следует определенным правилам (структуре). Рассмотрим структуру GeoJSON на основе двух элементов из коллекции:
{
"type": "FeatureCollection",
"features": [{
"geometry": {
"type": "Point",
"coordinates": [-176.633, 51.883]
},
"type": "Feature",
"properties": {
"wikipedia": "Adak,_Alaska",
"city": "Adak"
},
"id": "Adak"
},
{
"geometry": {
"type": "Point",
"coordinates": [-175.2, -21.133]
},
"type": "Feature",
"properties": {
"wikipedia": "Nukuʻalofa",
"city": "Nukuʻalofa"
},
"id": "Nukuʻalofa"
}]
}
Тип FeatureCollection
говорит о том, что перед нами коллекция геометрий в массиве features
. Каждый элемент из этого массива — отдельный объект, содержащий геометрию (в нашем случае это точка) и свойства (например, city — название города). Для подключения формата GeoJSON в OpenLayers существует готовый формат для источника данных — ol.format.GeoJSON
:
new ol.source.Vector({
url: 'cities.json',
format: new ol.format.GeoJSON()
})
Таким образом мы создаем векторный источник данных GeoJSON из файла cities.json. В целом, это и все, что необходимо для создания тепловой карты. Теперь достаточно создать сам слой ol.layer.Heatmap
и добавить его на карту:
var vector = new ol.layer.Heatmap({
source: new ol.source.Vector({
url: 'cities.json',
format: new ol.format.GeoJSON()
})
});
map.addLayer(vector);
Для того, чтобы прибавить карте немного живости, добавим возможность настройки вида теплокарты с помощью двух параметров:
- blur — уровень размытия, по умолчанию 15
- radius — радиус точек, по умолчанию 8
…и посмотрим на результат:
Размытие Радиус
Ссылки: