KML を使うと Googl Map は超簡単!!

きのう、地理院地図の3D地図を作成した時に KML ファイルを使用した。 KML(Keyhole Markup Language)は、アプリケーション・プログラムにおける三次元地理空間情報の表示をするために開発された、XMLベースのマークアップ言語らしい。 Keyhole とは Google Earth の旧名だそうだ。
そのため KML は地図アプリケーションとの相性がとても良く、Google Map API にも便利な機能があった。

Google Maps API には、KmlLayer クラスが用意されていて、非常に簡単にGPS軌跡を描画した地図を得ることが可能。
基本的には KML ファイルの URL を KmlLayer に渡すだけで、下記のとおり非常に簡潔だ。

var kmlUrl = "http://sksanko.sakura.ne.jp/report/150610/150610.kml";
var kmlLayer = new google.maps.KmlLayer(kmlUrl, {
  map: mapCanvas
});

たったこれだけで、Google Map上にGPS軌跡を表示できてしまう。驚きだ!!

今までGPSデータを地図に表示するためにやってきたことは、膨大なデータを64進数にエンコードしてデータ量を圧縮することだった。 この「なんでも日記」も64進数に変換することに腐心してきた記録と言ってもいい。

Google Map のポリラインは当初はパソコンの性能も良くなかったためか、とてもややこしいアルゴリズムで、10進法のデータを64進法にエンコードして表示速度を得ていた。(2011年9月6日のページ参照
その後 Google Map API がVer.3 にバージョンアップになると、このややこしいアルゴリズムを内包したAPIが提供されて、劇的に簡単になった。(2013年5月6日のページ参照

その後、国土地理院地図も世界標準の Open Layer に全面改定になった。それまでは方式が違っていたので Google Map と地理院Map は別々に描いて2枚表示していたが、この時から1枚の地図の中で切り替え表示が可能になった。
撮影ポイントの算出もそれまでは地理院地図作成時に行っていたものを Google Map 作成過程で計算することにした。(2014年5月19日のページ参照

また、ドンネルなどでGPSデータが切れている場合、これまでは繋がって表示されていたが、繋がっていると具合の悪いケースが出てきた。 それを改修したのがこれ。(20151年6月25日のページ参照

そして今回 KmlLayer を使うことで64進数にエンコードする必要もなく、データのURLを渡すだけで描画できることを知った。 KmlLayer クラスはWeb サーバーのURL (上の例では、さくらのレンタルサーバーのURL) が渡されると、それを Google のサーバー経由で処理をしてから、結果を Web サーバーに返すらしい。

■ テスト表示

2015年8月2日~3日にかけて歩いた白山と別山チブリ尾根のデータを表示させてみた。 (ここをクリックすると表示する)
その具体的なソースは、こんなにも簡単になったが・・・・。

<!DOCTYPE html>
<html>
<head>
<title>KmlLayer テスト表示</title>
<meta charset=UTF-8" />
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&v=3&language=ja&libraries=geometry"></script>
<script type="text/javascript">
  function initialize() {
    var mapDiv = document.getElementById("map_canvas");
    var mapCanvas = new google.maps.Map(mapDiv, {
      mapTypeId : google.maps.MapTypeId.TERRAIN
    });

    var kmlUrl = "http://gps-walk.com/niki/160820/150803.kml";
    var kmlLayer = new google.maps.KmlLayer(kmlUrl, {
      map: mapCanvas
    });
  }
  google.maps.event.addDomListener(window, "load", initialize);
</script>
<style type="text/css">
  html, body, #map_canvas {
    width : 100%;
    height : 100%;
    margin: 0;
    padding : 0;
  }
</style>
</head>
<body>
  <div id="map_canvas"></div>
</body>
</html>

下図はGPSデータをカシミール3Dで KML 形式と GPX 形式で書き出したものだが、KML 形式には時刻データがない。
これは致命的だ。「ホームページ作成支援ツール」でデジカメ画像のExif情報の時刻データとGPSデータの時刻データを照合して、撮影ポイントを取得していたが、これができなくなる。


KML

GPX

テストで分かったこと
  1. KML ファイルには、時刻データがないため、撮影ポイントを推定できないことは致命的
  2. 処理を Googl のサーバーで行うため、Google Map と地理院地図を切り替えて表示することはできない。
  3. 線の色、幅などを変更できないみたい? (いろいろ試してみたができなかった)

ということで、いろいろ難点もあることが分かったので、全面的に KML に変更することはできない。 ホームページ作成支援ツールも、今までどおり「GPX 形式データ」を使うしかない。 3D地図を表示する場合は、更に「KML 形式データ」も必要になることになった。 昨日は二度手間をなくせるかな? と期待したが残念な結果になった。

データ
  • 2016.08.20(土)

 

アーカイブ

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