Теплокарта (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

…и посмотрим на результат:

Ссылки:

• GitHub