Тепловая карта

С помощью источника данных GeoJSON и стилей карты на карте можно нарисовать тепловой слой: набор градиентных кругов, которые сливаются в единый объект при приближении к друг другу.

Чтобы это сделать, нужно подключить источник данных с помощью метода GeoJsonSource(), указав уникальный атрибут для этого источника (например, purpose: 'heatmap'). Подключаемый GeoJSON должен состоять только из объектов Point и MultiPoint (центры кругов).

Важно

Тепловая карта не поддерживается в режиме отображения 3D-рельефа на карте.

const data = {
    type: 'FeatureCollection',
    features: [
        {
            type: 'Feature',
            properties: { customProperty: 1 },
            geometry: {
                type: 'MultiPoint',
                coordinates: [
                    [55.44, 25.34],
                    [55.43, 25.37],
                    [55.41, 25.34],
                ],
            },
        },
        {
            type: 'Feature',
            properties: { customProperty: 2 },
            geometry: {
                type: 'Point',
                coordinates: [55.4, 25.3],
            },
        },
    ],
};

const source = new mapgl.GeoJsonSource(map, {
    data,
    attributes: {
        purpose: 'heatmap',
    },
});

После этого нужно создать стиль для теплового слоя, указав для него тип heatmap и фильтр по указанному при подключении GeoJSON атрибуту (purpose = heatmap).

const layer = {
    id: 'my-heatmap-layer',
    filter: ['match', ['sourceAttr', 'purpose'], ['heatmap'], true, false],
    type: 'heatmap',
    style: {
        color: [
            'interpolate',
            ['linear'],
            ['heatmap-density'],
            0,
            'rgba(0, 0, 0, 0)',
            0.2,
            'rgba(172, 32, 135, 1)',
            0.4,
            'rgba(255, 154, 0, 1)',
            0.6,
            'rgba(255, 252, 0, 1)',
            0.8,
            'rgba(255, 255, 63, 1)',
            1,
            'rgba(255, 255, 255, 1)',
        ],
        radius: 50,
        weight: ['get', 'customProperty'],
        intensity: 0.8,
        opacity: 0.8,
        downscale: 1,
    },
};

map.on('styleload', () => {
    map.addLayer(layer);
});

Описание параметров:

color - набор цветов для градиента, от периметра (0.0) до центра круга (1.0). Для периметра важно указать прозрачный цвет, иначе им будет закрашена вся карта.
radius - радиус круга в пикселях.
weight - интенсивность точки. Чем выше значение, тем больше размер центра круга (сильнее будут преобладать цвета ближе к 1.0 из массива color). В качестве значения имеет смысл указывать только ExtractorExpression или InterpolateExpression, используя одно из свойств объекта, иначе интенсивность будет применена ко всем точкам.
intensity - модификатор интенсивности для всех точек теплового слоя.
opacity - прозрачность слоя (1 - слой непрозрачный, 0 - слой полностью прозрачный).
downscale - модификатор разрешения. Чем выше значение, тем ниже качество изображения теплового слоя и выше скорость отрисовки. По умолчанию 1.