添加遮罩叠加层以突出显示交互式mapboxgl地图上的某些区域

如何解决添加遮罩叠加层以突出显示交互式mapboxgl地图上的某些区域

我正在建立一个网站，用户可以使用“公园”，“超市”，“咖啡馆”等过滤器在地图上搜索特定的地点或区域。例如，用户应该能够找到所有合适的城市中靠近公园但又距离高速公路至少1公里（出于某种原因）的区域。为此，在用户指定了一些滤镜之后，我想添加一个覆盖所有不满足这些滤镜的区域的覆盖，同时仍然允许用户自由缩放和平移。我正在使用MapBoxGL来构建地图。

我的第一个尝试是对我的geojson数据使用Turf来执行必要的操作，即将当前视口转换为边界框多边形，将所有需要的geojson特征合并为一个多边形，并掩盖它们之间的差异，然后只需将结果添加为mapBox地图上的Fill-Layer，如下图所示。

虽然这种方法确实适用于简单的叠加层，但无法缩放，并且在与大量geojson数据和更多过滤器结合使用时，需要大量时间对数据执行必要的操作。

我认为与其直接使用geojson，不如使用画布覆盖并使用webgl渲染遮罩层以提高性能可能更好。我发现有mapbox example用于在地图上覆盖自定义样式层，但不幸的是，我以前从未使用过webgl，而且我不确定如何在此自定义层上呈现这种覆盖。

使用自定义叠加层和webgl解决问题是正确的方法吗？还是有一个我还没有考虑过的明显选项（或另一个库）？