google mapの様な拡大縮小される地図を描画する際には、地図の画像を用いる必要があります。しかしながら、倍率に合わせて用いるべき地図の画像の解像度は異なります。世界地図を見たいのに、細かい街まで描画された画像が送られてきた場合、送受信者共にPCの資源を大きくムダにします。m単位の地図を見たいのに、引き伸ばされた日本地図を渡されても何が何だかわかりません。そのような問題を解決するためにタイルを用いた手法が使われています。下のGIFはタイルを選択する動作です。地図の範囲と倍率に合わせて異なるタイルを用意することによって、無駄の少ない地図のやり取りを実現しています。
タイルによって地図を表現する手法には画像タイルとベクトルタイルの二種類の手法が用いられています。目的に合わせて使い分けられたり、併用されたりです。
画像タイルを用いる手法はいたって単純、そのままタイルの様に画像をタイルらしく並べるだけの手法です。256x256pxの画像が用いられ大体軽量です。衛星写真などはたまに圧縮されにくい画像が現れ重くなります。画像タイルのみで作られた地図は加工に不向きです。画像認識を行い、解釈して、解釈に応じて加工して、と手間がかかります。
ベクトルタイルはある区域の情報をテキストとして点、線、面、それぞれの意味するモノを格納したタイルです。[始点,終点],国道n号線,道幅6m;[点A,点B,点C,点D],浜松駅、みたいな感じです。この手法は加工を行いやすいです。属性に条件をかけ、渡された点、線、面の端点や頂点の情報を元に描かれる図形の色や形を変えるだけで加工が行えます。
画像タイルと同じ範囲のベクトルタイルを用意し、画像タイルを背景に加工されたベクトルタイルを重ねる、というだけでとても便利になります。
