对 Mapbox 地图的某些图层应用灰度滤镜

Question

我尝试对地图的背景应用灰度效果，但我不希望地图的上层受到灰度的影响。

天真地，我在画布元素上应用了 CSS 过滤器：

filter: grayscale(1);

但是当然我地图上的所有内容都变成了灰色:

我想保留普罗旺斯地区艾克斯城市的边界为绿色，但我希望地图的背景为灰色。

是否可以以某种方式将灰度应用于一层后面的所有层？

Answer 1

不，不可能使用CSS过滤器，因为mapbox使用单个canvas元素来绘制其所有图层。解决此问题的唯一方法是修改地图的 style 中的颜色，并将您想要灰度化的图层的所有与颜色相关的属性值更改为其灰度等效值。我很确定您会找到 Mapbox 的灰度样式。

理论上，由于可以获取地图的所有图层（及其顺序），并且也可以获取其样式对象的内容，因此该任务可以自动化，但需要注意细节和彻底的测试。

绝对不是单衬。

最有可能的是，它也不适用于地图使用的外部图像（例如：图像图层或显示精灵的图层），除非您也将其替换为灰度替代品。

---

另一种可能有效的方法是使用与 mapbox-gl-compare 插件相同的技术，并使两个地图重叠。显然，在您的情况下，您将无法使用滑块在它们之间切换，并且顶部的滑块需要大部分是透明的，而下面的滑块将使用 CSS 过滤进行转换。

您可能认为在平移、缩放（以及最重要的是渲染）方面保持两个地图同步是行不通的，但是，正如您在插件演示中看到的那样，它工作得很好。您需要弄清楚的是如何使顶部的地图大部分透明（这是一个地图样式修改工作 - 虽然更容易，因为这次您需要简单地隐藏图层，而不是更改它们的颜色）。另请注意，禁用图层实际上会使顶部地图更快，因此它看起来是正确的解决方案。

Answer 2

您可以使用mapbox画布的css过滤器，它会起作用。但它是全局的，图标和其他样式可能会受到影响

 <style>
        body {
            margin: 0;
            padding: 0;
        }
    
        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }
    
        canvas.mapboxgl-canvas {
            filter: grayscale(1);
        }
    </style>