Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

20170121 codeforikoma cesium実践

2017/01/21 code for ikoma 用

Related Books

Free with a 30 day trial from Scribd

See all
  • Be the first to comment

20170121 codeforikoma cesium実践

  1. 1. Code for Ikoma 2017.1.21 Ikoma ~ Cesium実践 ~ NPO法人 伊能社中
  2. 2. 誰もが楽しめる地球儀 ~Google Earth~
  3. 3. 誰もが楽しめる地球儀 ~Google Earth~ Google earth Proが無償となり、 高度な機能も無料で使えるようになった ・・・しかし 2015年 12月 Google Earth API廃止 Webでの3D地球儀が見れなくなった。
  4. 4. ハンズオン概要 Google Earth APIの廃止 3D地球儀がWeb上で使えなくなった 2015年12月 ブラウザによって制限される すでに……。 Cesiumが注目 HTML5・WebGLに対応 オープンソース GitHubで一括管理公開できる 移行する環境は整っている
  5. 5. そこでCesium
  6. 6. Cesiumとは Web GLを利用して、高度な3D表現が可能 プラグインなしでwebでGoogleEarthのような地図が使える 平面⇔球体表現が自由 そして・・・ オープンソースである なにかと便利でGoogleEarthからCesiumへ移行する動きがみられる ふ む ふ む 。
  7. 7. http://cesiumjs.org/index.html
  8. 8. http://cesiumjs.org/Cesium/Apps/HelloWorld.html
  9. 9. とはいえ、 GoogleEarthのほうが使い勝手が良い点も たとえば、このようなポリゴンを書きたいとき・・・
  10. 10. Google Earthなら ポリゴン作成のアイコンをクリックして、ポチポチするだけで視覚的に作成できる
  11. 11. Cesiumだと var Polygon = viewer.entities; Polygon.add({ name : 'Polygon', polygon : { hierarchy : Cesium.Cartesian3.fromDegreesArray([-108.0, 42.0, -100.0, 42.0, -104.0, 40.0, -111.0,40.0]), extrudedHeight: 500000.0, material : Cesium.Color.GREEN } });
  12. 12. 安心してください Kmlデータをcesiumに読み込ませることも可能 Cesium上で直接点・占・面を各方法 Googleearthで点・占・面を作ってそれを読み込ませる方法
  13. 13. ところで、Cesiumの内容はJavaScriptで記載 Webブラウザでそのスクリプトを読み込む JavescriptにCesiumの表示や、kmlの読み込み命令文を記入 そのjavaScriptをウェブブ ラウザで読み込む CesiumはWeb GL を用いたWebGIS 表示にはウェブサーバーを介する必要がある そのため、それらをGitHubにアップする
  14. 14. 伊能社中で作成したCesium 福知山水害アーカイブ http://sagara1020.github.io/tokyo-demo/cesium-starter-app- master/index.html
  15. 15. GitHub
  16. 16. GitHub ソフトウェアバージョン管理にすぐれている、 共有ウェブサービス Git プログラムソースなどの変更履歴を管 理するバージョン管理システム ⇒コードを共有・公開できる
  17. 17. 1.実践〜Cesium + GitHub で地図を表示しましょう〜 ①GitHubの準備(GitHubでリポジトリ作成) ②CesiumのデータをGitHubにアップ ③App.jsの操作(Cesiumの表示) ④Cesiumで点線面を書いてみる ⑤kmlをCesiumで表示(kmlを作成してから) 2.実際に生駒のアーカイブを作ってみよう 本日のタスクフロー
  18. 18. 1.実践
  19. 19. ① GitHubの準備
  20. 20. GitHubにSign Inする
  21. 21. user name(or email address) とパスワードを入力する
  22. 22. GitHubにログインしたら、➕ ボタンから「New repository」を作成する
  23. 23. Repository nameを入力し、READMEをチェックし、「Create Repository」をクリック
  24. 24. タブの(Settings)をクリックする
  25. 25. 「master branch」 を選び「save」をクリック
  26. 26. 「Clone or download」 →「Open in Desktop」をクリックし、ローカルに複製する ※「Github Desktop」を使うPCに入れておく。
  27. 27. クライアントソフトが自動的に立ち上がるので、複製するディレクトリを選択する
  28. 28. クライアントソフトに追加されたことを確認する。
  29. 29. ② GitHubにCesiumを
  30. 30. http://cesiumjs.org/downloads.html Cesiumのホームページからダウンロードすることができる
  31. 31. 今回はこちらを利用する https://github.com/oza-pong/ikomaArchive.git 「Clone or download」→「Download ZIP」 をクリックする
  32. 32. 解凍した「cesium-starter-app」をクリックし、中身を確認する
  33. 33. 「cesium-starter-app-master」を 先ほど作成したディレクトリにコ ピーする。
  34. 34. 変更された 内容が表示 される Summaryを入力して→「Commit to master」をクリック 「Sync」をクリック
  35. 35. Githubに「cesium-starter-app-master」が入っているか確認する。
  36. 36. Cesiumを表示してみる SettingsタブからGithub Pagesの Your site is published at以下の URLをコピーする。 そのURLの後ろに「cesium- starter-app-master/index.html」 をつける。
  37. 37. https://oza-pong.github.io/codeforikoma/cesium-starter-app-master/index.html 地球が表示される!
  38. 38. Cesiumは、ダウンロードして ローカルフォルダーにいれるだけで Web上で表示できる! ②の要点
  39. 39. ③Cesium編集入門 ・点線面を書く ・視点を変える
  40. 40. Sourceを開き、「App.js」をテキストエディタで開く(本来は…。) https://github.com/pjcozzi/cesium-starter-app
  41. 41. Sourceを開き、「App.js」をテキストエディタで開く ビューワーを読み込むコード
  42. 42. //add a point var point = viewer.entities; point.add({ position : Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883), point : { pixelSize : 10, color : Cesium.Color.YELLOW } }); ポイントを追加する:point とへいう変数を設定し、色や位置を設定する ←緯度経度 ←ポイントのサイズ ←ポイントの色 ここに下のコードを貼り付ける
  43. 43. ポイントが追加された
  44. 44. //add a line var line1 = viewer.entities; line1.add({ name : 'Red line on the surface', polyline : { positions : Cesium.Cartesian3.fromDegreesArray([-75, 35, -125, 35]), width : 5, material : Cesium.Color.RED } }); ラインを追加する:Line1とへいう変数を設定し、色や位置(始点と終点)を設定する ここに下のコードを貼り付ける ←ラインの視点と終点の座標 ←ラインの色 ←ラインの太さ
  45. 45. ラインが追加された
  46. 46. //add polygon var Polygon = viewer.entities; Polygon.add({ name : 'Polygon', polygon : { hierarchy : Cesium.Cartesian3.fromDegreesArray([-108.0, 42.0, -100.0, 42.0, -104.0, 40.0]), extrudedHeight: 500000.0, material : Cesium.Color.GREEN } }); ここに下のコードを貼り付ける ポリゴンを追加する:Polygon とへいう変数を設定し、色や位置(と高さ)を設定する ←ポリゴンを構成する頂点の座標 ←高さ(m:https://cesiumjs.org/refdoc.html参照) ←ポリゴンの色
  47. 47. ポリゴンが追加された
  48. 48. ここに下のコードを貼り付ける viewer.camera.flyTo({ destination : Cesium.Cartesian3.fromDegrees(135.69, 34.69, 1000.0)}); Cesiumに動きをつけて、地図の視点を変更する ← 表示画面の視点が変更された ↑ 生駒市周辺の緯度経度を入力 ←ビューワーの視点を変更するコード
  49. 49. var viewer = new Cesium.Viewer('cesiumContainer', { imageryProvider: new Cesium.OpenStreetMapImageryProvider({ url: 'http://cyberjapandata.gsi.go.jp/xyz/std/', credit: new Cesium.Credit('地理院タイル', '', 'http://maps.gsi.go.jp/development/ichiran.html') }), baseLayerPicker: false }); viewer.camera.flyTo({ destination : Cesium.Cartesian3.fromDegrees(139.76,35.67, 15000.0)}); Cesiumで地理院地図を表示する ← 東京周辺を表示する ← 地理院地図+Cesiumが表示できる ※ 実装する場合は利用規約に従う http://maps.gsi.go.jp/development/sample.ht ml :(コードは、国土地理院を参照) ↑地理院タイルを読み込むコード ↓視点を変更するコード
  50. 50. cesium-stater-appを使えば、 App.jsを編集するだけで地物を追加できる! ③の要点
  51. 51. ④CesiumにKMLをのせる
  52. 52. Ikoma_sample.kmlを入れよう!
  53. 53. KmlをGithubに入れよう! Kmlを作成したレポジトリーに入 れる。
  54. 54. var viewer = new Cesium.Viewer('cesiumContainer'); viewer.dataSources.add(Cesium.KmlDataSource.load('kmlのディレクト リー')); ここに下のコードを貼り付ける kmlをApp.jsと同じフォルダーに移動し、フルパスを取得し貼り付ける ※フルパスの方が安定して表示される
  55. 55. アップロードするとcesiumにkmlが表示される
  56. 56. 4.さぁ、kmlをCesiumへ 〜習うより慣れろのコーナー〜 各班で前回行ったフィールドワークのデータをcesiumに入 れよう!
  57. 57. 参考サイト紹介
  58. 58. Cesiumのホームページ(Demo)、実用例が紹介されている http://cesiumjs.org/demos.html
  59. 59. http://cesiumjs.org/Cesium/Apps/Sandcastle/index.html Cesiumのホームページ(Demo)コードの確認、実行が可能なサイト
  60. 60. 伊能社中からのお知らせ
  61. 61. すごい災害訓練の募金 https://donation.yahoo.co.jp/detail/5101001/

    Be the first to comment

    Login to see the comments

  • kazutoaoki

    Jan. 21, 2017

2017/01/21 code for ikoma 用

Views

Total views

645

On Slideshare

0

From embeds

0

Number of embeds

23

Actions

Downloads

6

Shares

0

Comments

0

Likes

1

×