OpenLayers で地図をグレースケールにしたり乗算合成したり

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

デモページ (Observable)
https://observablehq.com/@cieloazul310/openlayers-v6-blend-mode-and-filters

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