为 Mapbox 地图的某些层应用灰度过滤器
Apply grayscale filter for some layers of a Mapbox map
我尝试对地图背景应用灰度效果，但我不希望地图的上层受到灰度的影响。
天真地，我在 canvas 元素上应用了 CSS 过滤器：
filter: grayscale(1);
当然，我地图上的所有内容都变成了灰色：
我想将艾克斯普罗旺斯城市的边界保留为绿色，但我希望地图的背景为灰色。
是否可以以某种方式将灰度应用于一层后面的所有层？
不，使用 CSS 过滤器是不可能的，因为 mapbox 使用单个 canvas 元素来绘制其所有图层。解决此问题的唯一方法是修改地图 style 中的颜色，并将您想要灰度化的图层的所有颜色相关道具值更改为其灰度等效值。我很确定您会找到 mapbox 的灰度样式。
理论上，由于可以获取地图的所有图层（及其顺序），也可以获取其style对象的内容，这个任务可以自动化，但需要注意细节和彻底的测试。
绝对不是一条线。
很可能，它也不适用于地图使用的外部图像（例如图像层或显示精灵的层），除非您也用灰度替代品替换它们。
另一种可能有效的方法是使用与 mapbox-gl-compare 插件相同的技术，并将两个地图重叠。显然，在你的情况下，你不会有滑块在它们之间切换，上面的那个需要大部分是透明的，而下面的那个将使用 CSS 过滤进行转换。
您可能认为在平移、缩放（以及最重要的：渲染）方面保持两张地图同步是行不通的，但正如您在插件演示中看到的那样，它工作得很好。所有你需要弄清楚的是如何使顶部的地图大部分透明（这是一个地图样式修改工作 - 虽然更容易，因为这次你需要简单地隐藏图层，而不是改变它们的颜色）。另请注意，禁用图层实际上会使顶部地图更快，因此它看起来是正确的解决方案。
我尝试对地图背景应用灰度效果，但我不希望地图的上层受到灰度的影响。
天真地，我在 canvas 元素上应用了 CSS 过滤器：
filter: grayscale(1);
当然，我地图上的所有内容都变成了灰色：
我想将艾克斯普罗旺斯城市的边界保留为绿色，但我希望地图的背景为灰色。
是否可以以某种方式将灰度应用于一层后面的所有层？
不，使用 CSS 过滤器是不可能的，因为 mapbox 使用单个 canvas 元素来绘制其所有图层。解决此问题的唯一方法是修改地图 style 中的颜色，并将您想要灰度化的图层的所有颜色相关道具值更改为其灰度等效值。我很确定您会找到 mapbox 的灰度样式。
理论上，由于可以获取地图的所有图层（及其顺序），也可以获取其style对象的内容，这个任务可以自动化，但需要注意细节和彻底的测试。
绝对不是一条线。
很可能，它也不适用于地图使用的外部图像（例如图像层或显示精灵的层），除非您也用灰度替代品替换它们。
另一种可能有效的方法是使用与 mapbox-gl-compare 插件相同的技术，并将两个地图重叠。显然，在你的情况下，你不会有滑块在它们之间切换，上面的那个需要大部分是透明的，而下面的那个将使用 CSS 过滤进行转换。
您可能认为在平移、缩放（以及最重要的：渲染）方面保持两张地图同步是行不通的，但正如您在插件演示中看到的那样，它工作得很好。所有你需要弄清楚的是如何使顶部的地图大部分透明（这是一个地图样式修改工作 - 虽然更容易，因为这次你需要简单地隐藏图层，而不是改变它们的颜色）。另请注意，禁用图层实际上会使顶部地图更快，因此它看起来是正确的解决方案。