OpenLayers で地図をグレースケールにしたり、乗算合成する方法です。
この記事は OpenLayers v3 時代に一度書いていましたが、2019年11月にリリースされた v6 では CSS で実装可能になっていたので、メモとして残しておきます。
デモページ (Observable)
https://observablehq.com/@cieloazul310/openlayers-v6-blend-mode-and-filters
v6 の実装方法
v6 での実装は CSS で記述することができます。v5 以前のイベントによる実装に比べるととても簡単になりました。以下がサンプルコードです。
JavaScript
|
|
CSS
|
|
以上!
レイヤに className を設定し、CSS で mix-blend-mode や filter を設定することで、地図の乗算合成やグレースケール化などが簡潔に実装できます。
広告
v5 以前の書き方
v5 以前はレイヤにイベントを実装し、レイヤの描写時に canvas の globalCompositeOperation
属性をいじることでレイヤの乗算合成やグレースケール化が可能でした。
この方法はイベント名を precompose
→ prerender
、postcompose
→ postrender
に変更することで v6 でも利用することができます。
|
|
So We Won’t Forget / Khruangbin (2020)
広告