Cesiumを使ったKML可視化のサンプル

Cesiumを使った日野市オープンデータを元にしたKMLファイル可視化のサンプルです。なお、日野市オープンデータに限らず、任意のKMLファイルをデジタルアース上に表示可能です。

首都大学東京システムデザイン学部インダストリアルコース3年生の授業向けに作成しました。プログラミング初心者でも、オープンデータを使ったデジタルアースコンテンツを作れます。受講者以外のかたもぜひご活用ください。

使い方

視点移動、ジオコーディング、ImageryLayerの切り替え、現在地へ移動、ストリートビュー起動、ヘルプ起動の各機能がすでに実装されています。これらの機能は「ヒロシマ・アーカイブ」のものに倣っています。

  • 視点移動:左上のメニューボタン
  • ジオコーディング:左上のフォーム
  • ImageryLayer切り替え:右上のパラメータボタン
  • 現在地へ移動:下**のボタン
  • ストリートビュー起動:ビルボード(アイコン)をダブルクリック
  • ヘルプ起動:右上の「?」ボタン

カスタマイズ

サンプルのKMLファイルと自分の作成したKMLファイルを入れ替えて、下記のカスタマイズを行うだけで表示できます。

  • index.html 106行目 : 視点配列を作成します。label, lat, lng, heading, pitch, rangeを指定可能です。画面左上のプルダウンメニューに表示されます。260行目のchangeViewPoint関数で処理されます。
  • index.html 130行目 : KML配列を作成します。labelとurlを指定可能です。data/kmlに格納したkmlファイルについて指定してください。
  • Cesium/Widgets/InfoBox/InfoBoxDescription.css : KMLのタグ内のスタイルはこのCSSで指定してください。
  • その他 : 自由に編集してください。

日野市オープンデータのKMLファイルについて

日野市オープンデータをGoogleFusionTablesを使ってKML化したものです。ただし、以下の編集を施しています。

  • MultiGeometryタグの削除 : GFTからKMLを書き出すと自動的にMultiGeometryタグが追加され、PointとLinearRingが格納されています。Cesiumでそのまま表示すると、画面上にLinearRingのポリゴンが描画され、視覚的に煩雑なので、タグのみ削除しています。LinearRingタグは実害がないのでそのままにしてあります。ファイル容量を減らしたい場合はPointタグのみ残すのが良いと思います。

参考リンク

  1. GitHub Pagesでの閲覧
  2. Cesium
  3. KML Reference
  4. Fusion Tablesを使ってみる
  5. オープンデータページ 日野
  6. ヒロシマ・アーカイブ

ライセンス

Licensed under the [Apache License, Version 2.0][Apache] [Apache]: http://www.apache.org/licenses/LICENSE-2.0