成果图
原理
原理其实是利用geojson的polygon空心圆
理论上必须在coordinates里面,第一个坐标数组要是最外圈的,套住后面坐标数组,这样就可以实现空心圆的效果,但是实际上,如果两个坐标数组在拓扑关系是不相交的话也没问题,如果相交的话可能会出bug。
代码
如果不想贴的这么严丝合缝的话,可以加一个缓冲区,利用turf
res= turf.buffer(res, 0.5, {units: 'miles'});
map.addLayer({
//蒙版图层 //通过边界数据反选 达到挖洞效果
id: 'mb',
type: 'fill',
source: {
type: 'geojson',
data: {
type: 'Feature',
geometry: {
type: 'Polygon',
coordinates: [
[
// 多边形外围 需要进行遮罩的点 这里是给世界地图加遮罩 所以是世界的四个端点
[-180, 90],
[180, 90],
[180, -90],
[-180, -90],
],
// 第 1个孔 ,这个坐标数组就是你的边界坐标,用上面的世界坐标挖去这个边界坐标就能达到空心的效果,也就是蒙版
res,
],
},
},
},
paint: {
'fill-color': 'rgba(200,202,199,.90)',
},
layout: {
visibility: 'visible',
},
});