Mapbox GL基础（十四）：蒙层效果

项目过程中经常会遇到只展示项目区域影像底图的情况，这时可能利用蒙层来达到遮掩其他区域会是一个好的选择，下面将实现的过程进行说明。

背景与效果

默认加载吉林一号全球一张图的瓦片地址，只可见指定区域的地图，其他区域进行蒙层遮掩，效果如下图所示：

实现原理

最初的想法为：首先加载吉林一号全球一张图的瓦片地址，然后在其上面加载一个遮掩背景，最后再加载想要加载区域的切片地址。
上面的想法很快被排除了，因为这样需要重新生产区域影像切片，图层也会重复加载，得不偿失，因此采用新的想法，如下：
利用geojson的polygon空心，即在多边形‘挖洞’的原理，在加载图层时设置polygond的coordinates为空心多边形，具体代码如下：

mapBoxMap.on('load', () => {
    //设置想要显示的区域边界坐标
    let res = [
      [73.66, 3.86], 
      [135.05, 3.86], 
      [135.05, 53.55], 
      [73.66, 53.55]
    ]
    mapBoxMap.addLayer({
      //蒙层图层
      id: 'mb',
      type: 'fill',
      source: {
        type: 'geojson',
        data: {
          type: 'Feature',
          geometry: {
            type: 'Polygon',
            coordinates: [
              [
              // 多边形外围 默认世界的四个端点
                [-180, 90],
                [180, 90],
                [180, -90],
                [-180, -90],
              ],
               //想要显示的区域边界坐标
              res,
            ],
          },
        },
      },
      paint: {
        'fill-color': 'rgba(200,202,199,.90)',
      },
    });
  })

总结

本文针对蒙层效果的实现进行了说明，以后如果遇到新的功能再进行补充，接下来的章节将继续探索Mapbox。
欢迎关注星林社区，文章将同步更新在星林社区中！