y2trip » WEBブラウザだけでGPSトラックを地図に表示してみる

11

01

2015

WEBブラウザだけでGPSトラックを地図に表示してみる

WEBブラウザ上でGPSトラックデータを簡単にチェックする方法


GPSのトラックデータの処理についてはこれまで幾度となくこのブログで紹介してきたが、OpenLayers 3 というオープンソースのJavascriptベースの地図フレームワークを用いると、手元のPCやタブレット、スマートフォンなどのWEBブラウザだけで、GPXやKMLなどのGPSのトラックデータの軌跡を地図上に表示させることが可能だ.


このブログではGPXやKMLなどのGPSのトラックデータの軌跡を表示する際には、”gpsmap” というお手製のWordpressプラグインを用いてトラックデータの軌跡を地図上に表示させている.この”gpsmap” はWEBサーバ側のPHPスクリプトでGPSのトラックデータを処理し、Google MapsやYahoo! Japan Mapなどの地図フレームワークで利用できるJapavascriptのデータに変換して、トラックデータを描画している.このような方法では、自分でWEBサーバを持ち、WEB技術に精通した人でなければ対応できないが、今回紹介する方法は、手元のPC上のWEBブラウザだけで事が済むという大変有り難い方法だ.


勿論、Google EarthやGarminなどが出している無料のPCアプリケーションのような高度な事はできないが、単にトラックデータの内容確認だけであれば、このWEBブラウザによる簡易表示方法で事足りる.


前置きが長くなったが、今回紹介する方法は単にOpenLayers 3の機能を使って、手元のPC上のGPXやKMLファイルをドラッグ&ドロップでWEBブラウザに読み込ませ、OpenLayers 3で地図と一緒にトラックデータを描画しているだけだ.この辺の仕組みはWEBエンジニアリングに精通していないと理解できないとは思うが、利用方法は至って簡単なので、次に示すURLをクリックして地理院地図を手元のWEBブラウザ上に表示してみて欲しい.



GPSトラック表示用サンプルHTML: https://y2web.net/maps/GSIDragAndDropSample.html
(新しいウインドウが開く)



GPSトラックを表示してみる


Drag-And-Drop
手元のPC上にあるGPX(KML)ファイルを地理院地図の上へドラッグ&ドロップする

GPS Track Browser Viewer
GPX(KML)ファイルのトラックが地図上に表示される



このサンプルコードでは初期画面として富士山周辺の地図が表示されていると思うが、手元のPC上にあるGPXかKML形式のGPSトラックデータファイルを地図画面上にドラッグ&ドロップすると、そのGPSトラックデータファイルのトラック範囲に合わせて、自動でベースとなっている地図の範囲が更新されトラックデータの軌跡やWaypointデータが表示される事だろう.


今時、IEの様な時代遅れのブラウザを使っている人は居ないと思うが、OpenLayers 3の機能をまともに利用するにはHTML5に対応したモダンブラウザが必要だ.ここ数年のGoogle Chrome, FireFox, Safari などであれば問題無いだろう.



このサンプルコードは単純にトラックデータを地図上に重ねて表示するだけの簡単なものだが、このブログで行っているような距離と高度のグラフなどの機能も追加することが可能だ.そのうち”gpsmap” プラグインと同じような機能を持つ、HTML(&Javascript)コードを公開する予定だ.




参考HTMLコード


Local Search

Calendar

November 2015
S M T W T F S
« Oct   Feb »
1234567
891011121314
15161718192021
22232425262728
2930  

Meta