GPS軌跡を表示した3D地図が簡単に作成できる

神奈川県の弟(GPS登山のオーナー)から、地理院地図の3D地図が作成できないという連絡が入った。
3D地図は長い間使ってなかった間に、サイトの内容もかなり変わっていて、ちょっと戸惑ったが、一応オンラインでは表示に成功した。
次にダウンロードしたデータを表示してみると、アクセスはしているみたいだが、いつまで待っても白紙のまま変化がない。

国土地理院の「地理院地図の3D機能説明ページ」を読んでみると、取り扱い説明の中に 「ローカル環境でご覧になる場合には、Mozilla Firefoxをご利用ください」 と書いてあった。
そこでブラウザを Mozilla Firefox に切り替えて表示してみると、ちゃんと表示できた。 OSが Windows10 になってから、既定のブラウザは「Microsoft Edge」になったまま変更してなかった。

ブラウザだけの問題なのか確かめるため、昔の3D地図をローカル環境で「Microsoft Edge」で表示してみると、やっぱり表示できない。 どうやら、ローカル環境での表示については、昔も今も変わってはいないようだ。 昔は既定のブラウザに Mozilla Firefox を使っていたので、たまたまうまく表示できていただけかもしれない・・・・。

今回の3D地図はバージョンアップが行われたのだろう。 「6番.おまけ」として、「地理院地図」の「作図」機能を利用すると、登山ルートなどを入れた立体地図や立体模型を作ることができます。 と書いてある。
早速試してみた。

昔はこの機能がなかった。そのためカシミールで表示したGPS軌跡の地図から3D地図の「texture.png」と同じ範囲を切り出して、地理院地図の「texture.png」に代替してGPS軌跡を表示していた。 この作業は大変面倒で時間がかかったが、これが簡単に実現できるようになったことは、大変ありがたい。

■ 3D地図にGPS軌跡を表示する方法

作図機能で利用できるファイル形式は KML、GeoJSON、TopoJSON の3個らしいので、今回は KML を使うことにする。

GPSデータを KML形式で書き出す
  1. 表示するGPSトラックデータをカシミール3Dで表示する
  2. メニューの[編集] → [GPSデータ編集] をクリックすると [GPSデータエディタ] 画面が開く。
  3. 3D地図に表示するトラックデータを右クリックで選択
  4. [ファイルへの書き出し] を選択
  5. [GPSファイルに部分書出し] 画面が開く
  6. 保存する場所、ファイル名を指定する
  7. [ファイルの種類] は [KMLファイル] を選択する
  8. [KML出力] は [KMLラインストリング] を選択する。
  9. [保存] ボタンを押して保存する。

地理院地図3D作成サイトで KML ファイルを読み込み・表示する
  1. 地理院地図サイト(http://maps.gsi.go.jp/)を表示する。
    (縮尺・表示位置は指定しなくてよい)
  2. 右上の [機能] ボタンの [ツール] → [作図・ファイル] をクリック
  3. [作図・ファイル] ポップアップの一番左のアイコン(黄色)をクリック。(右図の赤丸)
  4. [参照] ボタンで KML ファイルを指定して [読込を開始] ボタンをクリック。(右図)
  5. 即、GPS軌跡が表示される
  6. 線の色・幅・透過率などを変更する場合は、KMLファイル名の右の [編集] ボタンをクリック
  7. KML オブジェクト範囲を示す枠が表示されるので、枠内のGPS軌跡の線をダブルクリックする
  8. 線の色・幅・透過率などの編集画面に切り替わるので、値を指定して [確定] ボタンをクリック。(右図)
  9. KML ファイルは複数個指定でき、それぞれに色などを編集できる
  10. [機能] ボタンに戻って [3D] ボタンをクリック
  11. 3D画像が表示される
  12. 画面下の [WebGL用ファイル] の [ダウンロード] ボタンをクリック
  13. ダウンロードファイルが4個表示される
    HTMLファイル(index.html)
    標高ファイル(dem.csv)
    テクスチャ画像(texture.png)
    ワールドファイル(texture.pgw)
  14. 4個のファイルそれぞれに [ダウンロード] ボタンが表示されているので、4個ともダウンロードする
    (上記の「地理院地図の3D機能説明ページ」の5番参照)

オリジナル3D地図を表示する
  1. ダウンロードした4個のファイルを任意のフォルダ([3d]など)に保存する。
  2. [index.html] には 『高さの強調度を変えたい場合は、[index.html] の20行目の数値を変更してください。』 のコメントが表示されるので、削除するか 『高さの強調度は2倍です』 などに書き換える。(209行目)
  3. ローカル環境で表示するには、ブラウザに Mozilla Firefox を使って [index.html] を表示させる。
    他のブラウザでは表示できない。 サーバーにアップすれば、何れのブラウザでも表示可能。

地図を表示するHTMLページに3D地図を並べて表示する場合
    <iframe name="3dmap" src="3d/index.html" width="xxx" height="yyy" scrolling="no"></iframe>
  1. 地図を表示するHTMLページの3D地図を表示するところに、上記のようなインラインフレームを設置する。
  2. src属性でフレーム内に表示する [index.html] を指定する。(上記の場合は [3d] フォルダの index.html。 xxx, yyy はフレームのサイズを指定)
  3. 表示例はここ(http://sksanko.sakura.ne.jp/report/150802-2/map.html
    KML ファイルを2個使用し、1日目と2日目を色を違えて表示した例。

■ 今後の課題

自作の「ホームページ作成支援ツール」では、GPSログを読み込むためにカシミールを使って GPX 形式で書き出しているが、今回 KML 形式でも書き出すことになったので二度手間になった。
近い内に「ホームページ作成支援ツール」に KML 形式のデータからGPS軌跡を読み込むようにして、省力化ができないか考えてみたい。

データ
  • 2016.08.19(金)

 

アーカイブ

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