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 上で使えなくなった

２０１５年１２月

ブラウザによって制限される

すでに……。

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. 実際に生駒のアーカイブを作ってみよう

本日のタスクフロー

１ . 実践

① 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/