Блог

Я создаю тепловую карту Соединенных Штатов, и дизайнеры хотят «остановить» выделение цвета за пределы границ США. Таким образом, в Техасе цвета достигли бы границы штата и просто остановились.

Возможно ли это?

Я попытался создать другой слой, который включал Мексику, Канаду и Тихий / Атлантический океаны, но тепловые карты отображаются после, и я также не могу узнать, как установить приоритет отображения.

редактировать: Вот изображение, которое показывает желаемый эффект:

И вот мой код, за вычетом некоторых нерелевантных данных:

 mapboxgl.accessToken = 'accessTokenString';
var map = new mapboxgl.Map({
    container: 'map-heatmap',
    style: 'mapbox://uri/for/styles',
    center: [-95.922211, 37.881266],
    zoom: 3.15,
    minZoom: 3.15,
    maxZoom: 3.15,
    maxPitch: 0,
    dragPan: false,
    dragRotate: false
});

map.on('load', function() {

    map.addSource('states', {
        'type': 'geojson',
        'data': '/path/to/us-states-contiguous.geojson'
    });

    map.addLayer({
        'id': 'state-fills',
        'type': 'fill',
        'source': 'states',
        'layout': {},
        'paint': {
            'fill-color': '#F2F2F2'
        }
    });

    map.addSource('mexico', {
        'type': 'geojson',
        'data': '/path/to/mexico.geojson'
    });

    map.addLayer({
        'id': 'mexico',
        'type': 'fill',
        'source': 'mexico',
        'layout': {},
        'paint': {
            'fill-color': '#fff'
        }
    });

    map.addSource('heatmapCoordinates', {
        'type': 'geojson',
        data: {
            "type": "FeatureCollection",
            "features": {/* JSON coordinates */}
        }
    });

    map.addLayer({
        'id': 'myHeatmap',
        'type': 'heatmap',
        'source': 'heatmapCoordinates',
        'layout': {},
        'paint': {
            'heatmap-weight': 1,
            'heatmap-color': [
                'interpolate',
                ['linear'],
                ['heatmap-density'],
                0,
                'rgba(0, 0, 0, 0)',
                1,
                'rgba(0, 183, 79, 1)',
            ],
            'heatmap-radius': 100,
            'heatmap-opacity': .5
        }
    }, 'mexico');

    map.addLayer({
        'id': 'state-borders',
        'type': 'line',
        'source': 'states',
        'layout': {},
        'paint': {
            'line-color': 'rgba(43, 43, 43, .5)',
            'line-width': .25
        }
    });
});

  

По какой-то причине границы, которые я рисую над тепловой картой, отображаются «поверх» нее. Но когда я пытаюсь слой «заполнить» (как в случае с Мексикой выше), он не будет отображаться поверх градиентов тепловой карты, всегда под ними.

Итак, как бы я мог «обрезать» затенение тепловой карты за пределами границ США для достижения желаемого эффекта вышеуказанного изображения?

Ваша тепловая карта отображается над полигонами клипа, потому что вы добавляете ее на карту впоследствии.

Вам просто нужно изменить порядок двух addLayer() вызовов.