MapBox Heatmap隐藏外部边界

问题描述

我正在创建美国的热图，设计人员希望“阻止”颜色从美国边界以外渗出。因此，在德克萨斯州下，颜色将到达州的边缘并停止。

这可能吗？

我尝试创建另一个包含墨西哥，加拿大和太平洋/大西洋的图层，但是之后会渲染热图，而且我也找不到如何设置渲染优先级的方法。

编辑：这是显示所需效果的图像：

这是我的代码，减去一些不相关的数据：

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','data': '/path/to/mexico.geojson'
    });

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

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

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

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

由于某种原因，我在热图上绘制的边框显示在其“顶部”。但是，当我尝试“填充”图层时（例如上面的墨西哥），该图层将不会出现在热图渐变上方，始终在下方。

那我如何才能将热图的阴影“剪切”到美国边界之外，以实现上述图像的预期效果？

解决方法

您的热图在剪辑多边形上方渲染，因为您随后将其添加到地图中。

您只需要更改两个addLayer()调用的顺序。

heatmap mapbox-gl-js