1000以上のルートを、ユーザごとの地図に投影する方法(3) - 座標とタイル画像のピクセル位置の変換

今回は少し技術的な内容になります。
ルートを高速に表示するために、あらかじめルートを
画像として用意しておいて、Google Mapのオーバーレイ機能を
使って表示させます。
そのためのタイル画像の準備をします。

タイル画像の準備

Google Mapの地図は、256x256ピクセルのタイル画像が敷き詰められてできています。
タイル画像は(x,y)の番号がついていて、地図の左上が(x,y)=(0,0)で
右に行くとxが増えて、下に行くとyが増えます。

たとえば、上から20番目、左から10番目のタイルの場合
(x,y)=(9,19)となります。
※タイル番号が0から始まるため、番号が一つずれます。

このあたりの仕様は、マニュアルを参考にしました。
[参考] Map Overlays - Google Maps API - Google Code
http://code.google.com/apis/maps/documentation/overlays.html#Tile_Overlays

線を描くレイヤごとにこのタイル画像を用意する必要があります。

線を引く時に説明しますが、生成するファイル名は
zoom,x,yの3つのパラメータを入れる必要があります。
今回は
tile_z[zoom]_y[y]_x[x].png
という名前にしました。

たとえばzoom6の上から20番目、左から10番目のタイルの場合
tile_z6_y19_x9.png
となります。

ルートの各座標位置から、タイル画像のピクセル位置特定

ルートの線をタイル画像に落とすためには
・地球上の座標（経度、緯度）
を
・特定のタイル画像上のピクセル位置
に変換する必要があります。

つまり、ある座標があったときに、その座標がどのタイル画像の
どのピクセルに該当するのか？を知る必要があります。

まともにやるならGoogle Mapの使っている投影図法を調べて
座標変換の計算をすると思います。
今回はその辺をサボって、変換をやってくれるperlのライブラリ
"USNaviguide_Google_Tiles"を利用します。

■USNaviguide_Google_Tiles
http://www.usnaviguide.com/google-tiles.htm

Googleで検索したらHitしないので、
あまりメジャーじゃないのかもしれません。

まずは使い方を知るために、ある座標のピクセル位置を取得する
サンプルコード(gettileinfo.pl)を作ってみました。

use USNaviguide_Google_Tiles;
my $lat=36.845861;
my $lon=138.690444;
my $zoom=6;

my @d = &Google_Tiles($lat, $lon, $lat, $lon, $zoom);
print "(x,y)=(".$d[0]{'NAMEX'}.",".$d[0]{'NAMEY'}.")\n";
print "north: ".$d[0]{'NORTH'}."\n";
print "south: ".$d[0]{'SOUTH'}."\n";
print "east : ".$d[0]{'EAST'}."\n";
print "west : ".$d[0]{'WEST'}."\n";
print "north border: ".$d[0]{'PYN'}."\n";
print "south border: ".$d[0]{'PYS'}."\n";
print "east border : ".$d[0]{'PYE'}."\n";
print "west border : ".$d[0]{'PYW'}."\n";

Google_Tilesを使うと、座標上の2点を結ぶタイルの情報が取れるようです。
今回は1つの点だけ取れればいいので、同じ座標を指定します。

実行するとこんな感じになります。

# perl gettileinfo.pl
(x,y)=(56,24)
north: 6386
south: 6386
east : 14504
west : 14504
north border: 6144
south border: 6399
east border : 14591
west border : 14336

$d[0]{'NAMEX'}, $d[0]{'NAMEY'}にタイルの番号が入ります。
1つの点座標なので、northとsouth、eastとwestには同じ値が入ります。
$d[0]{'PYN'}はタイル画像の北の端のピクセル位置が表示されます。
図で書くと、↓のようなイメージです。