Desaturate tile layer in OpenLayers 3

Question

I have a OL3 map with one tile layer and one vector layer. Since the features on the vector layer don't stand out enough against the tile layer in the background, I want to desaturate the tile layer.

I'm aware of the Hue/Saturation Example, but this approach works only with WebGL. WebGL in turn does not support vector layers.

How can I desaturate an OpenLayers 3 tile layer when using the canvas renderer?

NOTE: I cannot desaturate the tiles on the server, because I don't control the server that hosts the tiles.

Have you seen this example? openlayers.org/en/master/examples/color-manipulation.html — tsauerwein
@tsauerwein Wow that looks promising, I haven't seen this example yet. Thanks, I'll try it out! — theDmi
I think you could also change the opacity of the base layer. — PSorey
@PSorey I need the map at full contrast, just without colors. So changing the opacity does not have the desired effect. — theDmi

theDmi theDmi · Accepted Answer · 2015-12-28T10:14:52

The comment by @tsauerwein pointed me into the right direction, here is the solution.

The OL3 color manipulation example nicely shows how color manipulation can be applied to a source. The important piece in the puzzle is the Raster source. It is a kind of a proxy source that loads data from another source and is able to apply manipulations before rendering.

var rasterSource = new ol.source.Raster({
    sources: [
        // original source here, e.g. ol.source.WMTS
    ],
    operation: (pixels, data) => {
        var pixel = pixels[0];
        var lightness = (pixel[0] * 0.3 + pixel[1] * 0.59 + pixel[2] * 0.11);
        return [lightness, lightness, lightness, pixel[3]];
    }
});

Here, the operation works on each pixel that is about to be rendered. It combines the R, G, and B components of the pixel into a lightness value. It then returns a new RGBA pixel by using the lightness for RGB (resulting in some grayscale value) and copying the alpha value from the original pixel.

Desaturate tile layer in OpenLayers 3

1 Answers