leaflet 地理院地図の範囲を指定して画像に保存(仮)

地理院地図を使用して、最終形態は業務上の申請書類(PDF)にしたいと思いあれこれ思案中。
試行錯誤した結果をメモします。(未完の為注意してください)

まず地理院地図タイルには代表ライブラリなるものが公式にて紹介されている。
地理院地図|地理院タイルを用いたサイト構築サンプル集


調べてみたところLeafletが一番サクサクかつプラグインが豊富ということでこれを使うことに。

地理院地図をLeafletで使用する(github)


・LeafletのPlugin(プラグイン)まとめ

公式でまとめられており、かなり便利


今回自分が最終的にやりたいことは、
①Leafletから地図を読み込み、選択範囲表示
②選択範囲を表示した部分を縮尺を指定して画像やらに保存
③その画像を使用して資料作成

色々と躓いたのでここにメモ。

①Leafletから地図を読み込み、選択範囲表示

これは色々とググった結果、この方のプラグインを使用させてもらいました。

このコードの地図の部分を、Leafletに置き換えればいいだけ。
(私は淡色の地理院地図を使いました。)

参考までに、淡色地図のコード

var gsimono = L.tileLayer('http://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png',
 {attribution: "<a href='http://portal.cyberjapan.jp/help/termsofuse.html' target='_blank'>地理院タイル</a>"});
②選択範囲を表示した部分を縮尺を指定して画像やらに保存