Question

我有一个带有一个图块层和一个矢量图层的OL3地图。由于矢量图层上的要素对背景中的切片图层不够突出，因此我想对切片图层进行去饱和处理。

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

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

注意：我无法对服务器上的磁贴进行去饱和处理，因为我无法控制承载磁贴的服务器。

Answer 1

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

OL3 color manipulation example很好地展示了如何将颜色处理应用于source。拼图中的重要部分是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值。然后，它通过使用RGB的亮度（产生一些灰度值）并从原始像素复制alpha值来返回新的RGBA像素。

OpenLayers 3中的去饱和图块层

1 个答案: