成果图
原理
原理其实是利用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',},});