ヤマレコBLOG

Yahoo Maps上にルート作成（５）：線画座標と経度・緯度座標の変換

GPSのGPXファイル（ルート情報）を読み込んで、Yahoo! 地図情報上にルートを作成するプログラムを作成しました。その際のメモを残しておきます。

前回までで、Yahoo地図上にプロットするための経度・緯度の座標データがそろいつつ、線画するためのライブラリも準備できました。

今回は線画用の座標系と経度・緯度の座標系変換です。

jsgraphics (wz_jsgraphics.js)で使う座標系は、divタグで指定したキャンバスの左上位置を座標(x,y)=(0,0)として、下にy軸、右にx軸が伸びる座標系です。

図１：キャンバスの座標系の例

それに対して、GPS情報で取得した座標データは経度・緯度ベースの情報なので、線を描くには座標系を合わせるための変換処理が必要になります。

図２：地図の座標系の例

今回はブラウザ上で線画をしたいので、GPS情報の経度・緯度情報を座標系に変換します。
座標変換のためには、まず
１）今表示している地図の経度・緯度ベースの座標範囲
２）地図を表示しているキャンバスのサイズ（ピクセル値）
を求めて、経度・緯度それぞれ１度移動すると縦横に何ピクセル移動するか（すなわち座標系のスケールの違い）を算出しておいて
Yahoo地図の左上（x,y)=(0,0)の経度・緯度をもとに、
３）GPSの各データのピクセル位置を特定します。

言葉で書いても分かりにくいので、例を使って個別に解説します。


１）今表示している地図の経度・緯度ベースの座標範囲

Yahoo!地図情報のリファレンスマニュアルを見ると、キャンバスの左上と右上の座標を取得する関数としてgetBottomLeft関数とgetTopRight関数が用意されています。
var bl = _map.getBottomLeft();
var tr = _map.getTopRight();
とすれば、左下の緯度・経度が（bl.lat, bl.lon)右上の緯度・経度が(tr.lat, tr.lon)に格納されます。


２）地図を表示しているキャンバスのサイズ（ピクセル値）

これはdivタグで指定したwidth, heightの値です。
Windowのサイズから自動的にとる場合は、
if(window.innerWidth) {
w = window.innerWidth;
h = window.innerHeight;
} else {
w=document.body.clientWidth;
h=document.body.clientHeight;
}
とすれば、変数wに幅が、hに高さがピクセル値で得られます。


これで、以下の式を使えば経度・緯度それぞれ１度あたりのピクセル数を算出できます。
var wscale = w / (tr_w.lon-bl_w.lon);
var hscale = h / (tr_w.lat-bl_w.lat);


４）GPSの各データのピクセル位置

GPSの各データがtrkpts[0]["-lat"], trkpts[0]["-lon"]に格納されていた場合、
x[0] = Math.round((trkpts[0]["-lon"] - bl_w.lon)*wscale);
y[0] = Math.round(h-(trkpts[0]["-lat"] - bl_w.lat)*hscale);
とすると、各トラックポイントの座標位置をキャンバス上の座標に変換することができます。

上記の内容を踏まえて線を描くと・・・

★サンプルはこちらのページにあります。

線がはみ出ます・・・。あとドラッグしても線が置き去りになります。

ということで、さらに
・キャンバス外に出たポイントを線画しないように修正
・ドラッグしたときに再線画するように修正
すれば、やっとGPX情報を経路情報として表示できるようになりました！

本当は線画領域の境界を計算して画面ぎりぎりまで線を引くべきなんですが、サボって画面外に出たら線を引かないようにしてます。この部分はそのうち直すかも。

興味のある方は、完成したトレースの表示ページから、ソースコードも確認してみてください。