概要

地理院タイルの画像を並べて表示し、ズームイン／ズームアウトの機能を実装したときの整理。マウスカーソルを置いた位置を固定して、そこを中心にズームイン／ズームアウトをするのにちょっと手間取った。

基本の考え方

共通する考え方は以下の通り。

1. マウスクリック位置を記録する
2. 拡大／縮小対象のタイルを拡大／縮小し、マウス位置もそれに合わせて変換
3. 変換後の位置がマウス位置に重なるよう、タイルを平行移動

なお地理院タイルではタイルそのものを表す「タイル座標」を定義しているが、ピクセルの座標との区別を明確にするため、ここでは「タイルアドレス」と表現し、ピクセル単位の座標を「ピクセル座標」と表現する。

ズームインの場合

ズームインの場合、マウス位置がタイルの左側か右側か、上側か下側かによって拡大するタイルやスライドの方向・量が異なる。以下ではxとyがともに左・上、右・下のケースで整理しているが、xとyは独立に判定してよい。

マウス位置がタイルの幅／高さの半分未満の時

下図の緑色のタイルが現在表示されているタイルでタイルの幅をw、高さをhとする。また黒い点(x, y)をマウス位置とする。位置(x, y)はタイル左上の点からのオフセットで表しているが、タイルを表示するcanvasなどの座標に相当する。

タイルアドレスをr/cとして、マウス位置がタイルの幅／高さの半分より左／上の場合を考える。拡大するタイルはr/cに対して青いタイル2r/2cで、拡大前の幅w/2、高さh/2が2倍になり、元のタイルと同じサイズになる。

拡大後のタイルでは、マウス位置(x, y)にあった地上の位置はタイルの拡大につれて(2x, 2y)となる。マウス位置(x, y)は拡大後のタイル上でも同じ。

拡大後の地上の位置を元の位置に合わせるためタイルをスライドさせる。スライド量は(2x, 2y)と(x, y)の差(x, y)で、スライド方向は左上の方向。

マウス位置がタイルの幅／高さの半分以上の時

元のタイルr/cに対して拡大するタイルは2r+1/2c+1となる。また、拡大するタイル内での地上位置のオフセットは(x – w/2, y – h/2)となる。

タイルを拡大すると、地上の位置のオフセットは(2x – w, 2y – h)となる。マウス位置は(x, y)のまま。

地上の位置をマウス位置に合わせるためタイルをスライドさせる。スライド量は(x, y)と(2x – w, 2y – h)の差で(w – x, h – y)。スライド方向は右下の方向。

ズームアウトの場合

ズームインの場合、タイルアドレスが偶数か奇数かによって縮小するタイルやスライドの方向・量が異なる。以下ではxとyがともに偶数／基数のケースで整理しているが、xとyは独立に判定してよい。

タイルアドレスが偶数の場合

緑色のタイルが現在表示されているタイルで、アドレスが偶数の場合、縮小するタイルは右／下方向に広がった青いタイルr/c。その幅・高さは2w、2cから半分のw、cとなる。サイズが半分になる前の地上位置のオフセットは、(x, y)。

ここではタイルのサイズを上の図の2倍のサイズで描いている。タイル縮小後の元の位置は、タイル幅／高さが1/2になるのに伴って(x/2, y/2)となる。マウス位置(x, y)は元のまま。

地上の位置をマウス位置に合わせるためタイルをスライドさせる。スライド量は(x, y)と(x/2, y/2)の差で(x/2, y/2)。スライド方向は右下の方向。

タイルアドレスが奇数の場合

緑色のタイルが現在表示されているタイルで、アドレスが奇数の場合縮小するタイルは左／上方向に広がった青いタイルr/c。縮小するタイル上での縮小前の地上位置のオフセットは(x + w, y +ｈ）

ここではタイルのサイズを上の図の2倍のサイズで描いている。タイル縮小後の元の位置は、タイル幅／高さが1/2になるのに伴って((x + w)/2, (y + h)/2)となる。マウス位置(x, y)は元のまま。

地上の位置をマウス位置に合わせるためタイルをスライドさせる。スライド量は((x + w)/2, (y + h)/2と(x/2, y/2)の差で((w – x)/2, (h – y)/2)。スライド方向は左上の方向。

概要

国土地理院により、ラスタータイプのタイル地図が「地理院タイル」として提供されている。その仕様についてまとめてみた。

地理院タイルの考え方

地理院タイルは、地球全体をメルカトル投影により正方形化し、それがズームレベルに従って辺長1/2のエリアに分割されていく。

1. 経緯度表現の全球をメルカトル投影により変換
2. 投影後の形が正方形になるよう南北を制限
3. 投影後正方形の地球全図をズームレベル0とする
4. その後順次、同じ範囲に辺長を1/2の正方形が収まるよう分割

具体のタイル

具体の地理院タイルとタイル座標はタイル座標確認ページで確認できる。最小ズームレベル2で表示すると以下のように横長く表示されるが、正方形の世界全図が経度方向に繰り返されているのがわかる。

たとえば2/1/3のタイルの場合、ズームレベルが2、タイルのx座標、y座標がそれぞれ1、3ということになる。

ズームイン

ズームレベルを日本付近で上げていくと詳細な地図に変化していく。以下は首都圏付近のズームレベル9のタイル。首都圏中心部のタイルは454/201となっている。

最大ズームレベル18のタイルまで準備されている。以下は日本水準原点付近のタイルの例。

日本付近ではズームレベル18まで準備されているが、それ以外の地域で準備されているタイルはズームレベル8まで。以下は与那国島～台湾付近を順次拡大していった様子。

タイル座標

たとえばズームレベル2の場合、タイル座標は0/0～3/3、縦4×横4の16タイルで構成されている。ズームレベルが3になると、タイル座標は0/0～7/7、縦8×横8の64タイルで構成されている。

つまり、ズームレベルがzのとき、タイル座標は0～2^z、タイルの枚数は2^z×2^z=2^2z枚ということになる。

タイルの取得

以下のURLを指定して、地理院サイトからタイル画像を取得することができる。

{t}は「データID」で、標準地図ならstd、単色地図ならpaleなどのコードが与えられている。{z}はズームレベル、{x}と{y}はタイル座標値、{ext}は拡張子で、たとえば標準地図や単色地図ならpng。

タイルピクセル

タイルサイズは、ズームレベルに関わらず256ピクセル×256ピクセルとなっている。

たとえばズームレベル2の場合は縦横256×4＝1024ピクセルで構成され、ズームレベルが3になると縦横256×8＝2048ピクセルでズームレベル2の時の倍のピクセル数となる。

一般にズームレベルzのとき、全球地図の縦・横のタイルピクセル数は256×2^zとなり、ズームレベルが1つ上がるごとに倍になっていく。

タイル座標とタイルピクセル位置の関係

タイル座標とタイルピクセル位置の関係は、int(タイルピクセル位置/256)となる。そしてタイルピクセル位置からタイル座標値の256倍を引いた値（タイルピクセル位置を256で割った剰余）は、そのタイルピクセルを含むタイル内でのピクセルのオフセット位置になる。

たとえばズームレベル2の場合、(896, 448)のピクセルが属するタイルは3/1となり、このタイル内でのピクセルのオフセットは(128, 192)となる。