googlemapに重ね合わせた公図を自由変形（アフィン変換、射影変換）してみる。on Leaflet

　　公図や地積測量図などの画像データをleafletのマップ上に重ね合わせ表示して、イラストレーターみたいに変形したり拡大縮小回転したり出来たらいいと思ったので作ってみた。

　手頃なプラグインを探したところ、アフィン変換、その拡張でホモグラフィ（射影変換）を使ったleafletプラグインLeaflet.DistortableImageが便利そう。

　画像切り取りはcropper.jsを利用したサンプルをカスタマイズした。

　対応する画像データは、pdf、png、jpeg。ただし、pdf（pdf.js)はpcのみ対応とした。

　使い方は、

１．ファイルを読み込む。

２．クロップ（トリミング）する範囲を決める。

３．「クロップして貼り付け」ボタンをクリックする。

４．マップに取り込んだ画像が表示される。

５．画像をクリックすると画像上段に下記ツールがアイコン表示されるので適宜編集する。

ツールは左端から

１．編集ロック、ロック解除ボタン

２．移動伸縮ボタン

３．４点歪み補正（台形補正：射影変換）ボタン

４．取り込み時オリジナル画像に戻すボタン

５．移動回転ボタン

６．移動回転伸縮ボタン

７．半透明化ボタン

８．編集後画像出力ボタン

９．画像削除ボタン

思った以上に編集自由度が高い。

座標を持たない公図や地積測量図、建物図面などの重ね合わせができそうだ。

いいぞ。