Desaturate плиточный слой в OpenLayers 3

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. Затем он возвращает новый RGBA-пиксель, используя яркость для RGB (в результате получается некоторое значение оттенков серого) и копирование альфа-значения из исходного пикселя.