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