Mapbox实现蒙版掩膜效果

贴个群号

WebGIS学习交流群461555818，欢迎大家。

成果图

原理

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