Leafletとは？
- JavaScriptのWeb地図ライブラリ
- 地図を表示してスムーズにズーム、スクロール
- OpenStreetMapや独自の地図に対応
- マーカーや図形を描画
- プラグイン多数
やってみよう
git clone
git clone https://github.com/aoyama-val/maketile2.git
cd maketile2
タイル化しないで一枚絵のまま表示する
imageOverlay.htmlを開いてみる。
これは元画像を一枚絵のまま表示している。
元画像のサイズが大きくなければこれで十分。
サイズが10MBとかになると重くなるので、タイル化した方がいい。
タイル化しよう
Dockerイメージをビルド
RubyとImageMagickを使いたいので、Dockerを使う。
それらが既にインストールされているなら、別にDockerを使わなくてもよい。
# maketile2ディレクトリにて
docker build -t ruby-imagemagick .
コマンド一発でタイル化
convert -crop 256x256というコマンドで簡単にタイル化できる。
mkdir tile1
docker run --rm -v $PWD:/work -w /work ruby-imagemagick convert -crop 256x256 uqm_map_full.png "tile1/tile_%d.png"
maketile2.rbを使う
maketile2.rbはタイル作成をより楽にするためのスクリプト：
- 元画像が256の倍数でない場合に周辺に透明余白を追加する
- 各ズームごとにタイルを作る
- テスト表示用のindex.htmlを生成
docker run --rm -v $PWD:/work -w /work ruby-imagemagick ruby maketile2.rb uqm_map_full.png
open index.html
Leafletの仕組み
- ズーム
- ズーム8のときタイル 1x1枚（256x256 px）
- ズーム12のときタイル 16x16枚（4096x4096 px）
- 1上がるごとに縦横とも2倍。よって全体のサイズは4倍になる
- 座標
- 左上が (0, 0)
- xが上、yが右（緯度, 経度がそうだから。GISでは普通）
- 今回は緯度経度ベースでない地図を
L.CRS.Simpleで表示したので上記の通りだが- 緯度経度ベースの世界地図（OpenStreetMapなど）の場合は違ってくる
- ズーム0のとき1枚（256x256 px）
- Chrome Developerツールでdivの構造を見てみよう
- imgタグを生成してタイルを読み込んでいるのが分かる
-
leaflet-control-container,leaflet-tile-pane,leaflet-shadow-pane,leaflet-overlay-pane,leaflet-marker-paneなどのレイヤー構造が分かる
- 複数のタイルレイヤーを重ねることもできる
- タイル
- 基本的に256x256だが、別のサイズも指定可能
- 中心から周辺にかけてという順序で読み込まれる
- ファイル名は規則的でなければならない
- 左上が(0, 0)
- xが右
- ｙが下