巨大な画像をWeb上で伸縮自在に動かしてみたい!とゆーモノだと思い浮かぶのがGoogleMAPなワケでして。APIとかそんなのでも実現可能っぽいですが、今回はLeaflet.jsを使います。0.7.3」をダウンロード。画像は256×256ピクセルのJPEGを準備すれば良いようです。小さくした時(256×256)は0-0-0.jpgという画像。1-1-1.jpgという画像。2-3-3.jpgといった画像を準備すれば良いようです。ズームレベル{z}、X軸指定{x}、Y軸指定{y}の変数さえ指定できればフォルダ名でもファイル名でもOKです。手動でフォルダを作ると非常に面倒なので、ファイル名で作ります。画像分割ただこの分割作業とリネームが非常に面倒臭い。Cutterってのがありました。APIを使って自動的に画像とHTMLを作成してくれるので、ただそれっぽいのを作るならこれでも良いかも。Leaflet.js用にするならリネーム作業が必要になってきます。縦横のサイズが同じでなければムダな画像まで生成してくれます。悪くは無いんですが、今回コレは使用しません。分割結合「あ」で縦に切って、その後横に切りました。自動で連番を振ってくれるので、上手くやればリネーム作業もほとんど必要ありません。それで完成したのがDQ1(GB版)マップになります。2048×2048のマップだったので、上手い具合にできました。ImageMagick今回はこの1枚だけで作ってみましたが...何枚かやってるとやはり面倒。簡単に行けそうなのを探して...ImageMagickが良いとゆー話が。3-7.jpgのコマンドで256×2048の画像(3-0〜3-7.jpg)を256×256の画像(3-0-0〜3-7-7.jpg)に切り出してくれます。楽なコマンドもできそうな気もしますが、とりあえずはこんな感じで。縦横比が違ってもタイル画像を作れますし。2-3-1.jpgといった感じにしないといけません。ま、こうしても0-0-0.jpgはちょっと妙なコトになるんですけどね。Leaflet.jsもImageMagickもまだまだ機能があるので、イロイロ試してみたいと思います。位置指定サンプル...というワケで、一番基本的な感じ↓で作ってみました。true}).addTo(map);</script></body></html>ついでに15、19行目に追加した「leaflet-hash」で座標指定のリンクもできるようにしてみました。メルキド@DQ1(GB版)マップみたいな感じでね。true」を取ると左右(東西)のループになります。今回はDQ1のマップなのでループしないようにしています。グリッド表示サンプルさらに「leaflet-virtual-grid」を使って16×16のグリッドを表示させてみました。全画面にするとシャレにならないくらい重くなるのでINFRAMEです。グリッド表示板DQ1(GB版)マップ16行目で「virtual-grid.js」を読み込んで、28〜59行目でグリッドの設定&表示だと思います。grid.addTo(map);</script></body></html>ミニマップ表示サンプル8、11行目に追加した「MiniMap」でミニマップを表示できるようにしてみました。content="GB版DQ1のマップをGoogleMAP風にしてみました。src="../sc/leaflet.js"></script>」をヘッダに入れないと上手く動きませんでした。あとはミニマップの表示/非表示切り替え画像も場所を指定する必要があるので、「Control.MiniMap.css」を一部書き換えています。CSSなんでHTMLに直接書いても良いんですけどね。この分に関してはコメントアウト部分も日本語なので、あまり解説は無しです。(オイ)表示範囲指定サンプル37、38行目に追加した部分で表示範囲を指定してみました。content="GB版DQ1のマップをGoogleMAP風にしてみました。180]]);map.setMaxBounds(bounds);</script></body></html>ホントは端まで行くとしっかり止まってほしいけど、そういう動きはできないっぽい?DQ1(GB版)マップ(表示範囲指定版)とDQ1(GB版)マップ(通常版)で比べると動作がわかりやすいと思います。マーカー表示サンプル40〜61行目でマーカーを表示させてみました。content="GB版DQ1のマップをGoogleMAP風にしてみました。castle};L.control.layers(overlays,overlays2).addTo(map);</script></body></html>せっかくなので表示・非表示も切り替えられるようにしてます。DQ1(GB版)マップ(マーカーレイヤー切り替え版)で試すコトができます。52〜54行目は無くても良さそうなんですが、削ると動作おかしくなりました。あとはマーカー画像のファイル指定がよくわかりませんでした。(爆)CSV読み込みサンプルマーカーを直接記述せずに、CSV読み込みで表示させてみました。content="GB版DQ1のマップをGoogleMAP風にしてみました。castle};L.control.layers(overlays,overlays2).addTo(map);</script></body></html>DQ1(GB版)マップ(マーカーレイヤー切り替え版)から単純にCSV読み込みに変更しています。DQ1(GB版)マップ(マーカーCSV読み込み&レイヤー切り替え版)で試して...って、挙動は基本変わっていません。テスト)を参考にさせていただきました。12行目で「leaflet-omnivore.min.js」を読み込み、44〜48行目でCSV読み込み&データ表示を行っています。CSVファイルは日本語表記ですが、UTF-8で改行コードがLFじゃないと表示されないってのにハマりました。何かあれば追記していきたいと思います。GoogleMAPライク。