メモ

eaflet.DistortableImageを使ってLeafletで画像を重ねて表示してみた（画像の回転、拡縮、移動）のでそのメモ。(2023/8)

Leaflet.DistortableImageとは

Leaflet.DistortableImageは、Leafletで画像を表示するJavaScriptのライブラリです。
　Leaflet.DistortableImage：https://github.com/publiclab/Leaflet.DistortableImage

表示した画像をマウス操作で「回転」「拡縮」「移動」などができます。
公式のgithubにサンプルページがあり、お試しできます。
　サンプル:https://publiclab.github.io/Leaflet.DistortableImage/examples/index.html

地図の上に画像を重ねて表示する

Leafletで表示した地図上にLeaflet.DistortableImageで画像を表示することは多いようで、WEBでもいくつかコンテンツがあります。
公式のgithubもそうですので、詳しくはリファレンスとサンプルページのコードを見てください。
　サンプル:https://publiclab.github.io/Leaflet.DistortableImage/examples/index.html

画像の上に画像を重ねて表示する

Leafletは地図の代わりに画像を表示できます。
Leaflet.DistortableImageを使うと、地図の代わりの画像の上に、画像を表示して回転などができます。
こちらはコツがいるようなので、それについて記載します。

地図の代わりに画像を表示する方法については「Leafletで地図の代わりに画像を表示してみた」を参照してください。

準備

地図の代わりに画像を表示するときに、mapの初期化時に「crs:L.CRS.Simple」を指定しましたが、これを指定すると、最新のDistortableImageでは正常に動作しなくなるようです。
下記のチケットで対応がされているようです。筆者が確認した範囲では、「master」と「v0.21.10」は正常に動作せず、「v0.21.9」は動作しました。
　https://github.com/publiclab/Leaflet.DistortableImage/pull/1036

DistortableImage v0.21.9では動作しますので、githubから「v0.21.9」のコードをダウンロードします。
githubの「Code」タブのドロップダウンリストで「Tags」→「v0.21.9」を選択してダウンロードします。

必要なのは下記の5つのファイルです。
ダウンロードしたファイルには含まれていませんのでビルドします。

※ダウンロードしたファイルに含まれている場合は使用してもかまいませんが、WebSocketに関するエラーが発生する場合があります。そのときはビルドしたものを使用すると改善しました。
　参考：https://github.com/publiclab/Leaflet.DistortableImage/issues/1323

githubからダウンロードしたzipを展開します。
コマンドプロンプトを起動して、ファイルを展開したフォルダに移動します。「package.json」ファイルがあるフォルダです。
下記のコマンドを実行して必要なライブラリなどをインストールします。

続いて下記のコマンドを実行してビルドします。
ビルドが終わると、distフォルダに５つのファイルが生成されています。

コード

コードは地図の場合と変わりません。
コードはサンプルを見てください。

実行のサンプルはこちら（一部変更あり）

これで、Leaflet.DistortableImageを使ってLeafletで画像を重ねて表示してみた（画像の回転、拡縮、移動）、はおしまいです。