OpenLayers で地図をグレースケールにしたり、乗算合成する方法です。
この記事は OpenLayers v3 時代に一度書いていましたが 、 2019年11月にリリースされた v6 では CSS で実装可能になっていたので、メモとして残しておきます。

v6 の実装方法

v6 での実装は CSS で記述することができます。v5 以前のイベントによる実装に比べるととても簡単になりました。以下がサンプルコードです。

JavaScript

import TileLayer from "ol/layer/Tile";
import XYZSource from "ol/source/XYZ";

// 地理院標準タイル
const layer = new TileLayer({
  className: "hoge", // className を設定
  source: new XYZSource({
    url: "https://cyberjapandata.gsi.go.jp/xyz/cjstd/{z}/{x}/{y}.png",
    attribution: "国土地理院",
  }),
});

CSS

.hoge {
  mix-blend-mode: multiply;
  filter: grayScale(1);
}

以上！

レイヤに className を設定し、CSS で mix-blend-mode や filter を設定することで、地図の乗算合成やグレースケール化などが簡潔に実装できます。

v5 以前の書き方

v5 以前はレイヤにイベントを実装し、レイヤの描写時に canvas の globalCompositeOperation 属性をいじることでレイヤの乗算合成やグレースケール化が可能でした。
この方法はイベント名を precompose → prerender、postcompose → postrender に変更することで v6 でも利用することができます。

// v5 以前は layer.on('precompose', (event) => {});
layer.on("prerender", (event) => {
  // 乗算合成
  event.context.globalCompositeOperation = "multiply";
});

// v5 以前は layer.on('postcompose', (event) => {});
layer.on("postrender", (event) => {
  // 元に戻す
  event.context.globalCompositeOperation = "source-over";
});

So We Won’t Forget / Khruangbin (2020)