OpenLayers 3 中的去饱和图块层

Question

我有一张包含一个图块层和一个矢量图层的 OL3 地图。由于矢量图层上的特征与背景中的图块层相比不够突出，我想对图块层进行去饱和处理。

我知道 the Hue/Saturation Example，但这种方法仅适用于 WebGL。 WebGL 反过来不支持矢量图层。

如何在使用 canvas 渲染器时对 OpenLayers 3 切片图层进行去饱和处理？

注意：我无法降低服务器上磁贴的饱和度，因为我不控制托管磁贴的服务器。

Answer 1

@tsauerwein 的评论为我指明了正确的方向，这是解决方案。

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。它是一种代理源，可以从另一个源加载数据并能够在渲染之前应用操作。

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]];
    }
});

此处，operation 作用于即将渲染的每个像素。它将像素的 R、G 和 B 分量组合成一个 lightness 值。然后 returns 一个新的 RGBA 像素，通过使用 RGB 的亮度（产生一些灰度值）并从原始像素复制 alpha 值。

OpenLayers 3 中的去饱和图块层

Desaturate tile layer in OpenLayers 3

openlayers-3