ヤマレコBLOG

Yahoo Maps上にルート作成（２）：GPXファイルの解析

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

１回目の記事で、サーバ上に用意したGPXファイルのリモート読み込みが完了しました。
次は、その取得したファイルから座標情報を取り出します。

前回と同じように、Javascript上でXMLファイルを解析できるライブラリを探しました。
今回はXMLファイルの解析のみできればいいので、XML.ObjTree クラスというライブラリを利用します。

ファイルの取得とXML解析の両機能をもつライブラリである、JKL.ParseXMLもあるのですが、前回prototype.jsでファイルを取得するところまでは作ってあるので、XML.ObjTree クラスの方を利用しました。

GPXファイルの構造を見ると、先頭から gpxタグ ⇒ trkタグ ⇒ trksegタグ、とたどった先にtrkptタグがあり、その中にトラックデータが入っています。内容は、１）座標データ、２）標高、３）時刻の３つのデータがあります。

例えば↓のような感じで格納されています。元のGPXファイルはこちら <trkpt lat="35.428840" lon="139.218526"> <ele>751.000000</ele> <time>2007-02-03T08:55:21Z</time> </trkpt> ※ 時刻の部分は、GPSの仕様でグリニッジ標準時（日本時刻-9時間）が入る場合が多いらしいです。

解析方法は
var xotree = new XML.ObjTree();
var tracks = xotree.parseXML( prototype.jsで取得したGPXデータ );

とすれば、tracks.gpx.trk.trkseg.trkptの中に配列でトラックデータが格納されます。
今回は経度・緯度のみのデータを使うので、1つ目のデータの場合：
・経度：tracks.gpx.trk.trkseg.trkpt.trkpts[0]["-lat"]
・緯度：tracks.gpx.trk.trkseg.trkpt.trkpts[0]["-lon"]
を取得すればOK。

で、前回とコードを合わせると、 function getgpx(){ var url = "http://www.yamareco.com/labo/sample.xml"; new Ajax.Request(url , { method: 'get', onSuccess: function(req){ var xotree = new XML.ObjTree(); var tracks = xotree.parseXML( req.responseText ); trkpts = tracks.gpx.trk.trkseg.trkpt; alert('経度：'+trkpts[0]["-lat"]+', 緯度'+trkpts[0]["-lon"]); } }); }
★サンプルはこちらのページにあります。

⇒ 次は取得した経度、緯度情報の測地系を変換する処理です。