Encoded Polyline

このホームページでは登山やウォーキング&歩き旅のコーナーでGPSのトラックログを地図上に表示している。
その背景となる地図には国土地理院が API を公開して、我々にも使いやすい環境を提供してくれているので、それを使ってGPS軌跡を公開してきた。
しかし、国土地理院の電子国土Mapは 1/2万5000 の地図は大変正確で利用価値が高いが、1/5万 とか 1/20万 は急に情報量が不足する地図になってしまうため、不満があった。
最近 Google Maps にGPS軌跡を表示しているサイトを見かけるようになったので、私も挑戦してみた。
きょう、漸く電子国土Map と Google Map とを並べて表示することができた。およそ10日間悪戦苦闘した。

11日から約1週間、志賀高原に妻とスキーに行ったが、天気が下り坂の予報だったで、Google Maps API の参考書4冊とノートPC持参で出かけた。
12日と15日は快晴で、富士山が望めるほどの上天気だった。
幸いと言うか、残念と言うか、天気予報は見事に外れて宿でゆっくりパソコンをやっている日は一日もなかった。
富士山
中央最奥 富士山
浅間山
浅間山

お陰で Google Map の作業はほとんど進まないばかりか、顔はサングラスの部分だけ残して真っ黒。 逆パンダだ!!

おっと! 本題を忘れるところだった。
実は Google Map に自分のトラックログを載せようと思ったのは、電子国土Mapにトラックログを載せる前からだった。
Google Maps API や Ajax についての参考サイトを探していたら、偶然にも電子国土API に遭遇してしまった。
こちらは、素人の私にも判るように、サンプルが順を追って、懇切丁寧に解説付きで載っているので、Google より先にこちらが出来上がってしまったという訳だ。
Google の方は、参考書に従って Google Maps API Key を取得し、自宅付近の緯度・経度を中心とする地図を表示しただけで終わっていた。
それが去年の6月頃だったから、約7ヶ月が経過してしまった。
まだ、 Google Maps API Key は有効だろうか?
自宅を表示したファイルがどこかにあるはずだが見当たらないので、参考書に従って数行の JavaScript を書き、プリントアウトしてあった Key を入力。
おそるおそる起動してみると、案の定何も表示されない。やっぱり Key が無効になってしまったのかも知れない、と思いながらも念のため恐ろしく長い Key 文字の入力間違いをチェック。
やっぱりあった。それを2~3回繰り返して、やっと地図上にマーカーが表示された。
どうやら Google に登録したアカウントは半年以上何もせず放ったらかしにしていても無事だったようだ。(当たり前?)

今日までにやったこと

◇ Google Maps API Key の取得

先ず Google アカウントを取得する。無料。(https://www.google.co.jp/accounts/NewAccount)
アカウントにサインインして Google Maps API のページを開く。(http://www.google.com/apis/maps/)
英語でさっぱり判らないページを参考書に従ってチェックを入れたり、自分のURLを入れて「Generate API Key」ボタンをクリックすると、もの凄く長い Key を書いた サンプルページが表示される。

◇ 電子国土Webシステムでの経験が無駄ではなかった

先に電子国土WebシステムAPI でトラックログを表示しているので、Google Maps API も理解しやすかった。
Google のサンプルプログラムに少し手を加えれば、簡単に地図やマーカーを表示できた。
これに気を良くして Polyline でポイントを5点ほどつないだ線を描いてみた。これもOK。
なかなか良い出だしだ。

◇ GPXデータの読み込みに悪戦苦闘

5ポイントほどをつないだ線が描けたので、一気にGPSトラックログをXML形式で書き出したデータ(電子国土Webシステムで使ったもの)を読み込もうとした。割合簡単に行くものと思っていたが、そうは問屋が卸さなかった。
Tag Name を辿ってデータを切り出してくれば良いはずだが、どうもうまく行ってないようだ。
Excel VBA や VBScript はエラー個所を表示してくれるが、どうやら JavaScript にはその機能がないのか、私が使い方を知らないだけなのか良く判らないが、エラー表示がないまま何も表示しないで終了してしまっているようだ。
何か良い方法はあるのだろうけど、判らないまま、どこまで正常に動いているのか調べる意味で alert("aaa") を途中に入れてみたり、スペルが間違ってないか入念に調べたり・・・・。
結局判ってしまえば馬鹿馬鹿しいことなんだけれども、「 ) 」(カッコ)が一個 2~3ヶ所で抜けていただけを発見するのに丸2日かかってしまった。

◇ サーバーにUPすると動かない

自分のパソコン内では2000ポイント以上のGPSトラックログ(GPX形式)でも、それほどストレスなく表示できるようになった。
早速、サーバーにUPしてみたが、どうした訳か軌跡が載らない。
ポイント数を少なくしてみたり、いろいろ試してみるが全くダメ。
参考書には私のやっている方法で、うまく表示できるようなことが書いてある。現に自分のパソコンの中ではうまく表示できているのだから基本的には間違ってないはずだ。
何が悪いのか判らないまま、いろいろ試して3日が過ぎた。

◇ データの軽量化

この間に試したことは、データが多すぎるのではないかと考えてデータの軽量化だ。
しかし、単純に奇数ポイントは残し、偶数ポイントは削除、などというようにしたのでは、屈折点のデータが失われる可能性もある。
直線的な部分では間引き、曲がっている部分ではできるだけ間引かない方法がいい。
参考書を参考に2本の線分の角度が「ある値」以下だったら、つまり直線に近かったらその点を削除し、そうでない場合は残す方法にした。これで予定したポイントを超えた場合は角度の値をもう少し大きく設定して計算し直す。
これを4~5回繰り返しても計算そのものは瞬間的に終了した。
これで2000ポイント以上のデータも400ポイント程度までに間引いても、大切なポイントは残っているので、軌跡の劣化を最小限に抑えて、それほど違和感なく表示することが可能になった。
しかし、サーバーにアップするとやっぱり表示できない状態には変化はなかった。

◇ この方法では長いファイルは読み込めないらしい

ブラウザがサーバーと通信して外部ファイルからデータを読み込むには "GXmlHttp" と "GET" を使うらしい。 私もそうした。外部ファイルは "new.gpx" だ。(下記)


	window.onload = function() {
		var map = new GMap2(document.getElementById("gmap"));
		var centerPoint = new GLatLng(36.216173, 137.594778);
		map.addControl(new GLargeMapControl());
		map.addControl(new GMapTypeControl());
		map.setCenter(centerPoint,14);
		var httpObj = GXmlHttp.create();
		httpObj.open("GET", "new.gpx");
		httpObj.onreadystatechange = function() {
			if (httpObj.readyState == 4) addLine();
		}
		httpObj.send(null);
	}

これで function addLine 内でノードを辿って必要なデータを読み込んでラインを描けば良いはずだが、どうもうまく行かない。
もう一度参考書を読み直してみたら、参考書の隅の方に、チラッとこんなことが書いてあった。
『 GXmlHttp を利用して外部ファイルからデータを取り込むには GET メソッドはサーバーに渡すデータをURLとして渡されるので、データの長さに制限がある・・・・』 と。
はっきり判らないが、どうやらデータ量が多い生のGPXファイルを読み込むのはもともと無理なのかも知れない。
どうりで、参考書にはマーカーのポイントを数個表示する例しか載っていなかった。
GPS軌跡のように数100ポイントから数1000ポイントもある点をつなげる場合、GPX形式のファイルから直接データを読み込むのは無理なのかも知れない。
しかも、私のGPSデータには緯度・経度のデータの他に時刻や標高のデータまである。

◇ やっぱり Encoded Polyline しか解決策はないのかな?

Google Maps API のホームページなどを読んでいたら、大量のデータを表示するために Encoded Polyline を用意してあると書いてあった。
これは地図のズームレベルによって、ラインの精度をコントロールできるらしい。詳細地図の場合は詳細なポイントを、粗い地図の場合はポイントも粗くして表示速度を得ているらしい。
ところが 『 Encoded Polyline Algorithm Format 』 のページを見ると、エンコードはややこしい計算が必要なようだ。
そのため対話型の「ポリラインエン エンコーダ ユーティリティ」も用意されていたが、ポイントを1点ずつ指定する必要があり、私のように1000ポイント以上のGPSデータを一気にエンコードするには不向きのようだ。
どうやら自分でエンコードするプログラムを書く必要がありそうだ。

先のページに戻って解説を読んでみるが、英語を翻訳したためか文が判りづらい。エンコードの手順の解説も一部に良く判らない部分がある。
日本のホームページに参考になるサイトがないか検索したら、同じ事を考え既に実行されているホームページを見つけた。 Encoded Polyline(hPod)
ありがたいことに、筆者は車で旅行した何万点ものポイントを表示しようと努力した経過を克明に公開してくれている。しかもその成果を GPX Casual Editor としてダウンロードできるようにしてくれているではないか。
これは有難い。ソースを読んで参考にさせていただこう。
ソースは私のような素人が書いたものと違って非常に洗練されていて、かつ膨大だ。
ややこしいと思っていたエンコードのアルゴリズムの個所を探すが、大変長いソースの中から探すのは容易ではない。そこで筆者の作成過程を順を追って見て行くことにしたた、若いバージョンの中にそれらしい個所を見出した。
それは90行ほどで巧みに書かれていた。『 Encoded Polyline Algorithm Format 』 のページのアルゴリズム解説と比較しながら1行1行見ていくと、ややこしいと思っていたことをいとも簡単にやってのけている。
どうやらこれは解かっている人にとっては当たり前の決まり事なのかもしれない。

とりあえず GPX Casual Editor をダウンロードして 『焼岳』 のGPSデータを エンコード してみた。
「Import」ボタンをクリックしてGPXファイル読み込んだ。暫く待っても何も起こらない。変だな? と思って、先ほどの地図画面に戻ると表示したいと思っていた私のGPS軌跡が地図上に緑色で表示されているではないか。
「Export」ボタンをクリックすると出力形式を選べるようになっている。ところが Encoded Polyline という項目はない。
いろいろ試してみると「GMapWidget」で「Lite」指定が求める形式らしい。
出力された文字列をHTMLファイルに貼り付けてみたら、簡単に表示できてしまった
何と言う簡単さ! 何と言う素晴らしさ!
良く判らなかった zoomFactor の設定値も適切らしく、(筆者も一番これを悩んだらしいことが記事の中からうかがえた)ズーム量を変えても軌跡の劣化は感じられない。
Google の作例ページではズーム量を下げていくと、ある時点で突然曲線が直線になってしまう。
この「あきひろ氏」の GPX Casual Editor で出力したエンコード結果はいずれのズーム量でも適切な曲線を保ったまま間引き表示しているようだ。素晴らい!!

電子国土地図と Google地図をいっしょに表示するのは ID が重なっていることに気付かず多少手こずったりしたが、とりあえず Google Map 上に自分のGPSトラックログを表示できた。
今度はGPX形式のデータから自動でエンコードされた文字列を作成し、それを全部のページに自動で貼り付けるプログラムを作る必要がある。
先の「ひろあき氏」のページが大いに参考になりそう!!

参考に使ってみた GPS Visualizer で表示してみると、背景画像として地図や衛星画像の他に山の標高線が描いてある「地形図」も表示することができる。
当然 GMapTypeControl で切替が可能だと思っていたら、GMapTypeControl で切替が可能なのは「地図」「衛星画像」「衛星+地図」の3種類しかないらしい。 GPS Visualizer で表示しているのだから何らかの方法はあると思うが、それが判らない。
Google Map の場合、市街地の表示は詳細だが、山岳地帯は情報量が非常に少ない。背景画像として「地形図」が表示できなければ Google Map 上に軌跡を描いてもあまり意味はない。

データ
  • 2009.02.19(木)
ほかの参考サイト
アーカイブ

現在位置: ホームなんでも日記メニュー > このページ