[leaflet]地図タイル画像にCSSフィルターを適用する

最終更新日

leaflet css filter

example

こちらの記事では、重ねたレイヤーをCSSクリップを使って表示領域を操作していますが、CSS Clipが効くのであればCSS Filterだって効くだろうと思ってやってみたのが上記です。

地図タイル画像に対してCSS Filterを適用しコンストラストや彩度、ボカシなどの画像処理を行い増す。CSS Filterには他にもセピア化やグレイスケール化などのフィルターがあるのですが、重ねがけするのが難しかったので外してあります。興味ある方は試してみてはいかがでしょうか。

ちなみに最新のChromeとFirefoxでは動くことを確認していますが、IEでは動きません。

サンプル

上のサンプルはいろいろごちゃごちゃしているので、コントラストフィルターを適用するだけのシンプルなコードを載せておきます。
戦後・復興期と現在の空中写真を重ねて比較してみた」のコードとほとんど変わりません。38行目でcssフィルター(コントラスト)を適用しています。
Leaflet Ccontrasts Filter example

example

透明度を操作する

画面上位のスライダーを操作するとレイヤーの透明度を変更することができます。これが一番実用的かもしれません。

example

プラグインを使う

以前の記事ですが、プラグインでCSSフィルターをタイル画像に適用する方法もあります。

[leaflet]クライアントサイドでの画像処理を可能にする「tilefilter」プラグイン