如何解决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()
调用的顺序。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。