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