Way of dynamically desaturate part of image TileLayer

When using TileLayer, we could desaturate a tile by setting desaturate props of BitmapLayer returned from TileLayer.renderSubLayers, which is quite handy.

Now, we want to achieve effect that dynamically desaturating some rectangle part of a tilelayer: On top of an image TileLayer, there are rectangle grids specified by PolygonLayer. Depending on data, some grids are shown in greyscale while others are shown as original. The desaturate props works at tile level, how do we have similar effect at this grid level?

• Need we do some manual modification upon image when constructing BitmapLayer? Or
• we could have some blend function in extended PolygonLayer or BitmapLayer to achieve the target? Or
• maybe Mask RFC #4161 could help?

Thanks!

[Pessimistress]

You can also subclass the BitmapLayer to apply color filter inside a custom boundary. See https://observablehq.com/@pessimistress/deck-gl-shader-injection

[kylebarron]

I think you could do this in a relatively straightforward manner if that polygon coincides with a tile.

const { bbox } = props.tile;
if (!bbox intersects Polygon) {
	desaturate
}

And use Turf.js for the intersection. The problem is that desaturates entire tiles at once. I don’t think there’s currently a way to desaturate portions of the image without creating a custom LayerExtension