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

最終更新日

Home · humangeo/leaflet-tilefilter Wiki

「tilefilter」プラグインは、leafletにて読み込んだタイル画像をブラウザに描画される前にフックし、クライアントサイドにて画像処理が行えるようにするプラグインです。
このプラグインでは「Canvasフィルター」と「CSSフィルター」の二種類の方法で画像処理を行うことができます。

インストール

leaflet.js読み込み後にTileLayer.Filter.jsを読み込んでください。

canvasフィルター

タイル画像をいったんcanvasへと転写し、Image Processingを行います。

channelFilterの引数に、タイル画像をcanvasに転写した際のImageData Objectが送られます。
このImageData Objectに対して処理を行うことで様々なフィルタ効果を付加させることができます。
前回の記事では、地理院タイル(電子国土基本図)を読み込み、エッジを抽出しエッジ(白色)以外の透明度を0にしてオーバーレイしています。

ビルトインフィルター

canvasフィルターには、いくつかの組み込みフィルターが用意されています。
以下は、セピア効果を付加するフィルター

CSSフィルター

ブラウザのCSSフィルター機能を使ってタイル画像にフィルター効果を付加します。Chromeなどブラウザでは、CSSでのフィルター効果がGPUによってアクセラレーションレンダリングされるため、単純な画像処理であればcanvasでImageDataを弄るより高速に描画されます。
※Webkit系ブラウザ以外ではCSS Filterに対応していない場合が多数あります。

サンプル

下記はcssフィルターの「invert」コマンドを使ってタイル画像に対して階調の反転を行ったサンプルです。
leaflet css fiter

example

cssフィルタープロパティは複数指定可能です。