No, no es posible usar filtros CSS, ya que mapbox usa un solo elemento de lienzo para dibujar todas sus capas. La única forma de hacerlo es modificar los colores en el estilo del mapa y cambiar todos los valores de accesorios relacionados con el color de las capas que desea escalar en grises a su equivalente en escala de grises. Estoy bastante seguro de que encontrará estilos en escala de grises para mapbox.

En teoría, dado que es posible recuperar todas las capas del mapa (y su orden), y también es posible obtener el contenido de su objeto de estilo, esta tarea podría automatizarse, pero necesitaría atención a los detalles y pruebas exhaustivas.

Definitivamente no es una sola línea.

Lo más probable es que tampoco funcione para las imágenes externas (por ejemplo, capas de imágenes o capas que muestran sprites) utilizadas por el mapa, a menos que también las reemplace con alternativas en escala de grises.

Otro enfoque, que podría funcionar, sería usar la misma técnica que elcomplemento mapbox-gl-compare y tener dos mapas superpuestos. Obviamente, en su caso, no tendrá el control deslizante para alternar entre ellos y el de arriba debería ser en su mayoría transparente, mientras que el de abajo se transformaría usando el filtrado CSS.

Uno pensaría que mantener dos mapas sincronizados en términos de panorámica, zoom (y, lo que es más importante, representación) no funcionaría pero, como puede ver en la demostración del complemento, funciona bastante bien. Todo lo que tiene que descubrir es cómo hacer que el mapa en la parte superior sea casi transparente (es un trabajo de modificación del estilo del mapa, aunque más fácil, ya que esta vez simplemente necesitaría ocultar las capas, no cambiar su color). También tenga en cuenta que tener las capas deshabilitadas hará que el mapa superior sea más rápido, por lo que parece la solución correcta.