FOSS4G Advent Calendar 2014 の5日目です。
今回は、ゲームタイルと呼ばれる何かについて話そうと思います。
ソーシャルストーキングが得意なみなさんなら僕が先月イベントで話したネタだとわかるはずです。
はい。
そうです。
使い回しです。
さて、ゲームタイルという何かですが、別に名前があるわけではないです。
平たく言うと L.CRS.Simple の話です。
Leafletの CRS.Simple.js の先頭にこんなのがあります。
/* * A simple CRS that can be used for flat non-Earth maps like panoramas or game maps. */
ここにゲームマップって書いてあるよね。以上。
というわけで早速ゲームマップを動かしてみましょう。
とりあえず画像を拾ってきます。「ドラクエ 地図 画像」とかで検索するとそれっぽいのが拾えます。ただし、それを出してしまうとスクウェア・エニックスなだけに問題がありそうなので、今回は高野さんで代用します。
次に画像処理ですが、ぶっちゃけ Using Leaflet.js with non-geographic imagery - Oliver Marriott にある処理を行います。
ただし、total_tilesとか入力するのは面倒なので全て自動化してしまいます。
あとはflickrから落としてきた高野さんを食わせます。
おっと、この高野さんは長方形なので余計な横幅がひどく目立ちます！
というわけで正方形の高野さんをフォトショップなどで作成してからタイルを作成します。
ここから技術的な解説をします。
まずL.CSR.Simpleでは 2 の zoom レベル乗が縦横それぞれの長さとなります。
zoom レベルが0であれば1x1, zoomレベルが8であれば256x256, zoomレベルが12であれば4096x4096という範囲になります。
そしてタイルが256x256というサイズなので、zoomレベル12の時は縦横16x16の画像を作成するということになります。
ただし、長方形の画像が入力された場合は端っこが切れてしまいます。
単にzoomレベル12で15x14みたいな数しか出力されないというだけならいいのですが、
端っこの方の画像が256x256よりも小さい画像になってしまうと無理やり256x256のサイズで表示しようとしてしまい画像が無理やり引き伸ばされてしまいます。
今回はこれをキレイにするために縦横がそれぞれ256の倍数になっている画像をわざと生成して、それを元画像と合体させてからタイルの切り出しをしています。
なお、この処理をしても綺麗な高野さんは生成されません。
L.CSR.Simpleを使ってもlatlngの値は普通の地図と同じように90 -90,180 -180の範囲を採ります。
しかしながら単純に画像を処理しているのでこれらの値を使うのはとても大変です。
そこで利用するのがmap.unprojectです。
この関数はタイル上のx, y座標をlatlngに変換します。
例えば 2048x2048 (maxZoom 11) のタイルを表示するときに300, 200ぐらいの座標を中心にもっていく場合はこんな感じでやります。
var map = L.map('map', { maxZoom: 11, minZoom: 8, crs: L.CRS.Simple }).setView([0, 0], 0); map.setView(map.unproject([300, 200], 11));
GeoJSONもlatlngではなく、x, y座標で記述することもできます。
ただし、取り込みの際に coordsToLatLng で変換ルールを記述する必要があります。
具体的にはこんな感じで動かします。
var geojson = { "type":"Feature", "geometry": { "type":"LineString", "coordinates":[[200,300],[400,400]] }, "properties":{} }; var geojson_layer = L.geoJson(geojson, { coordsToLatLng: function (newcoords) { return (map.unproject([newcoords[0], newcoords[1]], 11)); }});
これを駆使すれば高野さんにいくらでもイタズラすることができます。
以上です。
