電子国土Webシステムを利用したGPSログ表示

logo
Webサービス by Yahoo! JAPAN

このサイトについて

電国くん
電子国土の
オリジナルキャラ
「電国くん」

このサイトでは、ハンディGPSで記録したログ（軌跡データ）を、電子国土の地形図に重ね合わせてホームページに表示する方法を解説しています。GPSログを表示した地図を、本サイトでは「ルート地図」と呼んでいます。電子国土を用いたルート地図がメインですが、GoogleマップやYahoo!地図を用いたルート地図の表示方法についての情報も掲載しています。

このサイトの内容は、GPSからのログの読み込みに、GPSデータ編集機能が多彩で使い勝手が良いカシミール3Dを利用することを前提としています。カシミール3Dで作成したルート地図を、単に画像としてホームページに表示するのではなく、電子国土WebシステムやGoogleマップAPI、Yahoo!地図APIなどの地図系Web APIを活用して、スクロールやズームイン・ズームアウトが可能なルート地図として表示することを目指しています。

このサイトのレベルは、ハンディGPSとカシミール3Dの操作方法、および、ホームページ作成、HTML、JavaScriptについての初級レベルの知識を想定しています。これらについては、カシミール3DマニュアルやとほほのWWW入門などを参照して下さい。

このサイトでは、ルート地図を作成するためのユーティリティGPX2JSGI（GPX→JSGIコンバータ）もフリーソフトウェアとして配布しています。これは、作者個人のホームページ（あにねこ登山日誌）の山行記録に添えるルート地図を、少ない手間で見栄えよく表示したいという目的で開発しているものです。

サイトマップ

このサイトは、以下のページから構成されています。

どんなルート地図ができるの？

図1(a)は、カシミール3Dで作成したルート地図の例です。GPSから読み込んだ軌跡データに、測位誤差の大きな区間の削除と手作業による補間、ウェイポイントの追加などの編集を加えて、完成させたものです。

このルート地図を元にして、ルート地図を構成するGPSデータ（トラック、ルート、ウェイポイント）をカシミール3DでGPX形式のファイルとして保存し、GPX2JSGIでJSGI形式に変換して電子国土に重ね合わせたものが、図1(b)のルート地図です。比較のため、表示領域の画素数は図1(a)の元画像に合わせてあります。また、GPXファイルをGPX2JSGIでKML形式のファイルに変換して、GoogleマップとYahoo!地図にそれぞれ重ね合わせたものが、図1(c)と図1(d)のルート地図です。

図1(b)〜(d)のルート地図では、マウス左ボタンを押しながら地図をドラッグすると、滑らかにスクロールさせることができます。また、[+]、[-]ボタンのクリックやマウスホイールの回転により、地図のズームイン、ズームアウトができます。地図上のアイコンにマウスカーソルを乗せたりクリックすると、小窓がポップアップして地名や簡単な説明が表示されます。GoogleマップとYahoo!地図では、航空写真への切り替えも可能です。

(a)
(a) カシミール3Dで作成したルート地図の元画像
（2009年1月11日城峯山、Garmin eTrex Legend C-J）		 (b) 電子国土版ルート地図（解説：基礎編）

(c) Googleマップ版ルート地図（解説：基礎編） (d) Yahoo!地図版ルート地図（解説：基礎編）
図1 地図系Web APIを利用したルート地図の例

注意！Yahoo!地図を他の地図系Web APIと同じページに表示させようとすると、Internet ExplorerではYahoo!地図上の軌跡の全部または一部が表示されないことがあります（原因は調査中）。ページを分ければ表示されます。

以下のリンクは別のウィンドウを開いてルート地図を表示するものです。こちらは、ウィンドウの大きさを変えると地図の表示範囲も追従して変化します。地図を見やすい大きさで表示することができ、便利です。

これらのルート地図は、地図上にGPSログを表示するだけの最も基本的な機能を実装したものです。この他にも、本サイトが取り扱う範囲を超えますが、設定と工夫次第でいろいろな機能を追加することができます。地図系Web APIを利用したルート地図の表示に興味が湧いたでしょうか。是非、チャレンジしてみて下さい。

ルート地図作成手順の概要

*
図2 ルート地図作成のためのデータ処理の流れ

図2は、電子国土Webシステムを用いたルート地図を作成するための、データ処理の流れを示したものです。

以上でルート地図が完成します。Webブラウザで⑤のHTMLファイルにアクセスすると、国土地理院の地図サーバから読み出した背景地図データに上乗せデータを重ね合わせたルート地図が表示されます。

なお、他の地図系Web APIを利用する場合も、上乗せデータの形式とJavaScriptコード部分がそれぞれ異なりますが、データ処理の流れは基本的に同じです。本サイトでは、GPX2JSGIを配布するほか、各地図系Web APIに対応したJavaScriptコードについても解説しています。

ルート地図の表示方式の比較

ルート地図の各表示方式を比較してまとめた表を示します。なお、比較は、地図上にGPSログを表示する最も基本的な機能だけを実現する場合を想定して行っています。

表1 ルート地図の表示方式の比較
比較項目画像（img要素）地図系Web API
電子国土GoogleマップYahoo!地図
地図のスクロール×○○○
ズームイン／アウト×○○○
表示領域のサイズ変更×○○○
航空写真への切り替え×△（オルソ画像）○○
コード記述○簡単△やや複雑（※1）△やや複雑（※1）△やや複雑（※1）
上乗せデータ形式JPGJSGI、ネイティブKML、KMZKML
データサイズ（図1の場合）146KB6KB（ネイティブ）3KB（KMZ）13KB
データ変換○簡単（ペイント）△簡単（※2）△簡単（※2）△簡単（※2）
利用許諾必要（国土地理院）不要不要不要（※3）
特徴単純で簡単地形図が高精細高機能でポピュラーまだマイナー？

※1 複雑と言っても、HTMLファイルに定型的なJavaScriptコードを10数行加えるだけです。
※2 GPX2JSGIを使えば簡単。手間はインストールだけです。
※3 アプリケーションIDの登録（無料）が必要です。

リンク集

地図系Web APIを利用したGPS軌跡表示
（115x40）

GPSと電子国土Webシステムの利用に関連する情報、活用事例へのリンクです（随時、追加中）。なお、当サイトへのリンクは御自由にどうぞ。リンクの際にもしバナーが必要でしたら、右のリンクバナーをご利用下さい。

更新履歴

2012-01-12 Yahoo!地図版ルート地図の地図デザインに地形図を追加。 NEW
2011-12-08 電子国土版ルート地図の dmap-basic.html と routemap.html のバグ（IE9での表示の不具合）を修正。
2011-11-11 電子国土(Ver.3)版ルート地図 を試験公開。
routemap.html と googlemap.html のバグ（IEでの表示の不具合）を修正。
2011-03-28 サイトを http://anineco.nyanta.jp/gpsweb.html に移転し、全面的にリニューアル。
GPX2JSGI Ver.1.2を公開。
2010-10-23 GPX2JSGI Ver.1.1βを公開。
2010-10-12 GPX2JSGI に、カシミール3D Ver.8.8.5 に関する注記を追加。 
2010-08-04 GPX2JSGI Ver.1.0βを公開。
2009-11-15 リンク集に「東海だより」を追加。
2009-04-26 GPX2JSGI Ver.1.0αを公開。
2009-01-25 GPX2JSGI Ver.0.9αの公開に合わせて、サイトの構成と内容を全面的に改訂。
2008-12-13 ネイティブデータの読み込みに対応するため、routemap.html、routemap_sub.htmlを変更。
2008-10-08 リンクバナーを作成。
2008-10-05 サポート掲示板を開設。routemap_sub.htmlのバグを修正。
2008-09-21 リンク集を作成。
2008-08-18 リニューアル公開。
*
© 2008-2011 Anineco