Cesiumを動かしてみよう

Cesiumを動かしてみよう
石崎一隆
2016年7月8日

講座の流れ
１．ハンズオン１
– 動かしてみる –
２．Cesiumの説明
３．ハンズオン２
– いろいろ実装してみる –
４．フォーマット
2

3
ハンズオン１
– 動かしてみる –
Apacheのインストールを行い
Cesiumを体験して頂きます。

1-0 何ができるのか？
4
「ハンズオン１」は以下を目標に進めていきます。
• WindowsはApacheのインストール
• MacはApacheの起動
• Cesiumのコピー
• Cesiumの表示、操作

1-1 Apacheのダウンロード
5
• WebブラウザよりApacheのページにアクセスします。
https://httpd.apache.org/
[From a Mirror]を選択

6
[2.4.20]を選択

7
[Files for Microsoft Windows]を選択

8
[ApacheHaus]を選択

9
[Apache 2.4 VC14]を選択

10
32bit版OS[Apache 2.4.20]
64bit版OS[Apache 2.4.20 x64]
を選択

11
ファイルを保存

12
ファイルを展開
[httpd-2.4.20-x64-vc14-r2]フォルダを開き
[Apache24]フォルダをC:直下にコピー

13
[C:Apache24confhttpd.conf]ファイルを
テキストエディタから開く

14
テキストエディタ内の検索機能から
「Define SRVROOT」を検索
「“/Apache24”」→「"c:Apache24"」へ変更

1-11 Apacheのインストール
15
Apacheをインストールすると
「コンピューターにVCRUNTIME140.DLLがないため、
プログラムを開始できません。この問題を解決するには、
プログラムを再インストールしてみてください。」
とメッセージが表示される為、 Visual Studio 2015 の
Visual C++ 再頒布可能パッケージをインストールします。

1-12 Visual C++ パッケージのダウンロード
16
• WebブラウザよりVisual Studio 2015 の Visual C++ 再頒布可能
パッケージのページにアクセスします。
https://www.microsoft.com/ja-jp/download/details.aspx?id=48145

17
[日本語]を選択
下へスクロール
[ダウンロード]ボタンを選択

18
32bit版は[vc_redist.x86.exe]をチェック
64bit版は[vc_redist.x64.exe]をチェック
[次へ]ボタンを選択

19
[ファイルを保存]ボタンを選択

20
32bit版[vc_redist.x86.exe]ファイルをダブルクリック
64bit版[vc_redist.x64.exe]ファイルをダブルクリック
1-16 Visual C++ パッケージのセットアップ

21
[ライセンス条項および使用条件に同意する]に
チェックを入れる
[インストール]ボタンを選択

22
セットアップが完了したら[閉じる]ボタンを選択

23
• Apacheをインストールします。
スタートメニュー
－「コマンドプロンプト」右クリック
－ローカルメニューより
「管理者として実行」を選択

24
「cd C:Apache24bin」フォルダを移動
「httpd.exe -k install -n “ApacheService”」
サービスをインストール

25
[アクセスを許可する]ボタンを選択

26
1-22 Apacheの起動
[管理ツール]を選択
スタートメニュー－コントロールパネル

27
[ApacheService]を選択
[開始]を選択
[サービス]を選択

28
「sudo apachectl start」を実行し、Apacheを起動
• MacはApacheがインストールされている為、
Apacheを起動します。

• WebブラウザよりローカルのApacheのページにアクセスします。
http://localhost
29
1-25 Apacheの起動の確認

• WebブラウザよりCesiumのページにアクセスします。
https://cesiumjs.org/
30
1-26 Cesiumのダウンロード
[DOWNLOADS]を選択

31
[DWNLOAD CESIUM]を選択
「ファイルを保存する」を選択、「OK」ボタンを選択

32
ファイルを展開
[Cesium-1.23]フォルダ名を
[Cesium]へ変更
[Cesium]フォルダを
[C:Apache24htdocs]にコピー

• MacはApacheがインストールされている為、
[/Library/WebServer/Documents]に
[Cesium]ディレクトリをコピーします。
33
「Cesium」ディレクトリのアクセス権を変更

• WebブラウザよりローカルのCesiumのページにアクセスします。
http://localhost/cesium/
34
1-30 Cesiumの表示
[Hello World]を選択

• 最も単純な[Hello World]のCesiumが表示されます。
マウスで操作してみましょう。
35
1-31 Cesiumの表示
※ 通常はBing Maps Aerialが表示されますがBing Maps利用規約に違反する恐れがある為
地理院地図の空中写真・衛星画像最新（2007年～）の画面キャプチャに変更しています。
Images on 世界衛星モザイク画像 obtained from site https://lpdaac.usgs.gov/data_access maintained by the NASA Land Processes Distributed Active Archive
Center (LP DAAC), USGS/Earth Resources Observation and Science (EROS) Center, Sioux Falls, South Dakota, (Year). Source of image data product.

• 右側の[Navigation Instructions] を選択して
ナビゲーションの指定を行います。
36
1-32 ナビゲーションの指定
地理院地図の空中写真・衛星画像最新（2007年～）

• 右側のを選択して地図画像、地形の指定を行います。
37
1-33 地図の指定
[地図画像]を選択
[地形]を選択

• 地形を指定すると地形表現が可能です。
38
1-34 地図の指定
[STK World Terrain meshes]を選択

• 右側の[2D/3D] を選択して、2D/3D/Columbus Viewの切替
を行います。
39
1-35 2D/3D/Columbus Viewの切替
[3D]
[2D]
[Columbus View]
[3D]
[2D]
[Columbus View]

• 右側のを選択して住所やランドマークの検索を行います。
40
1-36 住所やランドマークの検索
[札幌市]と入力
[東京スカイ
ツリー]と入力

• 右側の[View Home] を選択し、初期状態に戻します。
41
1-37 初期状態に戻る

42
Cesiumの説明
Cesiumについて説明します。

2-1 Cesiumについて
43
• CesiumはWebGLを利用し、3D表現が可能
• プラグイン無しでWebブラウザで利用可能
• オープンソースである
• Google Earth APIより柔軟性がある
• ソースはGitHubにある

2-2 Cesiumの注目
44
• Google earth Proが無償となり、
高度な機能が無料で利用できる
• 2015年12月にGoogle Earth APIの廃止に伴い
Web上にGoogle Earthのような3D表示が
できない
• Google Earth APIの代替として世界的に移行
されている
• 国土地理院様の地理院地図Globeの試験
公開にCesiumが採用されている

2-3 Cesiumの更新頻度やデモ
45
• CesiumのVersionは頻繁に更新
• デモが多くあります

46
ハンズオン2
– いろいろ実装してみる –
サンプルデータを使い
コードを書いてみます。

3-0 何ができるのか？
47
「ハンズオン２」は以下を目標に進めていきます。
• ベースマップの変更
• 図形形状の表示
• KMZ、GeoJson等ファイルの表示

3-1 Textureのコピー
48
ハンズオン用の[Texture]フォルダを
[C:Apache24htdocsCesiumApps]
へコピー
※ 本Textureは北海道地図株式会社「GISMAP Texture 夏」
になります。本ハンズオン以外での利用はできませんので
ご留意ください。

3-2 Textureタイル画像の表示
49
[HelloWorld.html]を複製し
[handson1.html]ファイルを作成

50
<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>北海道地図Texture夏表示</title>
<script src="../Build/Cesium/Cesium.js"></script>
<style>
@import url(../Build/Cesium/Widgets/widgets.css);
html, body, #cesiumContainer {
width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
}
</style>
</head>
<body>
<div id="cesiumContainer"></div>
<script>
var viewer = new Cesium.Viewer('cesiumContainer');
var tms = new Cesium.UrlTemplateImageryProvider({
url: 'Texture/SUMMER/{z}/{x}/{y}.png',
credit: new Cesium.Credit('北海道地図株式会社 GISMAP Texture 夏', 'logo_small_texture.png', 'http://www.hcc.co.jp'),
maximumLevel : 14
});
var current_image = viewer.scene.imageryLayers.addImageryProvider(tms);
</script>
</body>
</html>
①
②
HTMLのタイトル変更

51
var tms = new Cesium.UrlTemplateImageryProvider({
↑ タイル画像のメソッド
url: 'Texture/SUMMER/{z}/{x}/{y}.png',
↑ Textureタイル画像のフォルダ構成
credit: new Cesium.Credit('北海道地図株式会社 GISMAP
Texture 夏', 'logo_small_texture.png', 'http://www.hcc.co.jp'),
↑ クレジット表示
maximumLevel : 14
↑ ズームレベルの数
});
var current_image =
viewer.scene.imageryLayers.addImageryProvider(tms);
↑ タイル画像をレイヤとして登録
②

• 拡大・移動して北海道札幌近辺を表示します。
Textureタイル画像が表示されました。
52

3-6 地理院地図を表示
53

54
<!DOCTYPE html>
<html lang="en">
<head>
<title>地理院地図地図</title>
<style>
}
</style>
</head>
<body>
<script>
var imageProvider = new Cesium.UrlTemplateImageryProvider({
url: '//cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png',
maximumLevel : 18
});
var current_image = viewer.scene.imageryLayers.addImageryProvider(imageProvider);
</script>
</body>
</html>
①
②

55
var imageProvider = new
Cesium.UrlTemplateImageryProvider({
url: '//cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png',
↑ 地理院地図の指定
maximumLevel : 18
});
var current_image =
viewer.scene.imageryLayers.addImageryProvider
(imageProvider);
↑ 地理院地図をレイヤとして登録
②

• 地理院地図が表示されました。
56
3-9 地理院地図の表示
地理院地図

3-10 地理院地図-写真を表示
57

58
<!DOCTYPE html>
<html lang="en">
<head>
<title>地理院地図地図・空中写真最新（2007年～）</title>
<style>
}
</style>
</head>
<body>
<script>
url: '//cyberjapandata.gsi.go.jp/xyz/ort/{z}/{x}/{y}.jpg',
maximumLevel : 18
});
</script>
</body>
</html>
①
②

59
var imageProvider = new
Cesium.UrlTemplateImageryProvider({
url: ‘//cyberjapandata.gsi.go.jp/xyz/ort/{z}/{x}/{y}.jpg’,
↑ 地理院地図-写真の指定
maximumLevel : 18
});
var current_image =
viewer.scene.imageryLayers.addImageryProvider
(imageProvider);
↑ 地理院地図-写真をレイヤとして登録
②

• 地理院地図-写真が表示されました。
60
3-13 地理院地図-写真の表示

3-14 初期表示時の位置変更
61

62
<!DOCTYPE html>
<html lang="en">
<head>
<title>初期表示位置変更</title>
<style>
}
</style>
</head>
<body>
<script>
maximumLevel : 18
});
viewer.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(141.3860555, 43.056222, 1000)
});
</script>
</body>
</html>
①
②

63
destination: Cesium.Cartesian3.
fromDegrees(141.3860555, 43.056222, 1000)
↑ ↑ ↑
}); 経度緯度高さ
②

• 所期表示時の位置が変更されました。
64

3-18 ポリゴンの表示
65

66
～
<script>
maximumLevel : 18
});
var shikaku = viewer.entities.add({
name : ' shikaku ',
polygon : {
hierarchy : Cesium.Cartesian3.fromDegreesArray([
141.3860555, 43.056222,
141.3870555, 43.056222,
141.3870555, 43.066222,
141.3860555, 43.066222]),
material : Cesium.Color.RED.withAlpha(0.5),
}
});
viewer.zoomTo(shikaku);
</script>
</body>
</html>
①

67
name : ‘shikaku',
polygon : {
141.3860555, 43.056222,
141.3870555, 43.056222,
141.3870555, 43.066222,
141.3860555, 43.066222]),
}
});
viewer.zoomTo(shikaku);
①
←実体追加
←実体の名前
←ポリゴンを指定
ポリゴンの座標→
↑塗りの色 ↑透過率
←実体にズーム
※ outlineColor の外形線の色指定はver 1.23では正常に
反映されません。

• ポリゴンが表示されました。
68

3-22 ボックスの表示
69

70
～
<script>
maximumLevel : 18
});
var blueBox = viewer.entities.add({
name : 'Blue box',
position: Cesium.Cartesian3.fromDegrees(141.3860555, 43.056222, 0),
box : {
dimensions : new Cesium.Cartesian3(10.0, 10.0, 10.0),
material : Cesium.Color.BLUE
}
});
viewer.zoomTo(blueBox);
</script>
</body>
</html>
①

71
name : 'Blue box',
position: Cesium.Cartesian3.fromDegrees
(141.3860555, 43.056222, 0),
box : {
material : Cesium.Color.BLUE
}
});
viewer.zoomTo(blueBox);
①
←実体追加
←実体の名前
←ボックスの位置を
経度、緯度で指定
←ボックスを指定
←実体にズーム
↑ボックスの
X、Y、Zを指定↑ボックスの色を指定

• ボックスが表示されました。
72

3-26 複数の図形形状の表示
73

74
～
<script>
maximumLevel : 18
});
name : 'Blue box',
position: Cesium.Cartesian3.fromDegrees(141.3860555, 43.056222, 0),
box : {
material : Cesium.Color.BLUE.withAlpha(0.5),
},
});
name : 'shikaku',
polygon : {
141.3860555, 43.056222,
141.3870555, 43.056222,
141.3870555, 43.066222,
141.3860555, 43.066222]),
}
});
viewer.zoomTo(viewer.entities);
</script>
～
←ボックス
←ポリゴン
←ボックス、ポリゴンを含めた実体へズーム

• ボックス、ポリゴンが表示されました。
75

3-29 Cesiumで扱える図形形状
76
形状名称表示例コード
Boxes var hcc = viewer.entities.add({
name : 'hcc',
position: Cesium.Cartesian3.fromDegrees(142.2860888, 43.7680666, 0.0),
box : {
material : Cesium.Color.BLUE.withAlpha(0.5),
}
});
Circles and
Ellipses
var hcc = viewer.entities.add({
name : 'hcc',
ellipse : {
semiMinorAxis : 10.0,
semiMajorAxis : 10.0,
height: 20.0,
material : Cesium.Color.GREEN.withAlpha(0.5),
}
});
Corridor var hcc = viewer.entities.add({
name : 'hcc',
corridor : {
positions : Cesium.Cartesian3.fromDegreesArray([
142.2860888, 43.7680666,
142.2861888, 43.7680666,
142.2861888, 43.7682666,
142.2862888, 43.7683666
]),
width : 5.0,
outline : true,
outlineColor : Cesium.Color.RED
}
});

77
Cylinder var hcc = viewer.entities.add({
name : 'hcc',
cylinder : {
length : 10.0,
topRadius : 10.0,
bottomRadius : 10.0,
outline : true,
outlineColor : Cesium.Color.DARK_GREEN
}
});
Cones var hcc = viewer.entities.add({
name : 'hcc',
position: Cesium.Cartesian3.fromDegrees(142.2860888, 43.7680666,0),
cylinder : {
length : 10.0,
topRadius : 0.0,
bottomRadius : 10.0,
material : Cesium.Color.YELLOW
}
});
Polylines var hcc = viewer.entities.add({
name : 'hcc',
polyline : {
positions : Cesium.Cartesian3.fromDegreesArray([0, 0,
142.2860888, 43.7695666]),
width : 5,
material : Cesium.Color.ORANGE
}
});

78
Polygons var hcc = viewer.entities.add({
name : 'Hcc',
polygon : {
142.2850888, 43.7686666,
142.2873888, 43.7686666,
142.2873888, 43.7676666,
142.2850888, 43.7676666]),
outline : true,
outlineColor : Cesium.Color.BLACK
}
});
Polyline Volumes function computeCircle(radius) {
var positions = [];
for (var i = 0; i < 360; i++) {
var radians = Cesium.Math.toRadians(i);
positions.push(new Cesium.Cartesian2(radius * Math.cos(radians), radius *
Math.sin(radians)));
}
return positions;
}
var hcc = viewer.entities.add({
name : 'hcc',
polylineVolume : {
positions : Cesium.Cartesian3.fromDegreesArray([142.2860888, 43.7685666,
142.2871888, 43.7685666,
142.2871888, 43.7676666]),
shape : computeCircle(10.0),
material : Cesium.Color.RED
}
});

79
Rectangles var hcc = viewer.entities.add({
name : 'hcc',
rectangle : {
coordinates : Cesium.Rectangle.fromDegrees(142.2860888, 43.7685666, 142.2870888,
43.7695666),
rotation : Cesium.Math.toRadians(45),
extrudedHeight : 30.0,
height : 10.0,
outline : true,
outlineColor : Cesium.Color.GREEN
}
});
Spheres var hcc = viewer.entities.add({
name : 'hcc',
ellipsoid : {
radii : new Cesium.Cartesian3(30.0, 30.0, 30.0),
material : Cesium.Color.YELLOW.withAlpha(0.5),
outline : true,
outlineColor : Cesium.Color.BLACK
}
});

80
Ellipsoids vvar hcc = viewer.entities.add({
name : 'hcc',
ellipsoid : {
radii : new Cesium.Cartesian3(20.0, 20.0, 40.0),
material : Cesium.Color.BLACK.withAlpha(0.5),
}
});
Walls var hcc = viewer.entities.add({
name : 'hcc',
wall : {
positions : Cesium.Cartesian3.fromDegreesArrayHeights([142.2860888, 43.7685666,10,
142.2870888, 43.7685666,20,
142.2870888, 43.7675666,20,
142.2860888, 43.7675666,10,
142.2860888, 43.7685666,10]),
material : Cesium.Color.WHITE
}
});

3-34 初期表示時の標高指定
81

82
～
<script>
maximumLevel : 18
});
var terrainProvider = new Cesium.CesiumTerrainProvider({
url : '//assets.agi.com/stk-terrain/world'
});
viewer.terrainProvider = terrainProvider;
destination: Cesium.Cartesian3.fromDegrees(140.745611, 42.9006388, 0),
orientation : {
heading : Cesium.Math.toRadians(150.0),
pitch : Cesium.Math.toRadians(-10.0),
roll : 0.0
}
});
</script>
</body>
</html>
①

83
var terrainProvider =
new Cesium.CesiumTerrainProvider({
↑ 標高指定のメソッド
url : '//assets.agi.com/stk-terrain/world‘
↑ STK World Terrainを指定
});
↑ 標高を登録
①

• 初期表示時標高が指定されました。
84
「データソース：Landsat8画像(GSI,TSIC,GEO Grid/AIST), 海底地形(GEBCO)」

3-38 エフェクト指定
85

86
～
<script>
maximumLevel : 18
});
var terrainProvider = new Cesium.CesiumTerrainProvider({
url : '//assets.agi.com/stk-terrain/world',
requestVertexNormals: true
});
viewer.scene.globe.enableLighting = true;
destination: Cesium.Cartesian3.fromDegrees(140.745611, 42.9006388, 0),
orientation : {
heading : Cesium.Math.toRadians(150.0),
pitch : Cesium.Math.toRadians(-10.0),
roll : 0.0
}
});
</script>
</body>
</html>
①

87
var terrainProvider =
new Cesium.CesiumTerrainProvider({
url : '//assets.agi.com/stk-terrain/world',
requestVertexNormals: true
↑ リクエストにより再描画
trueにしないと地形が光と連動しない
});
viewer.scene.globe.enableLighting = true;
↑ 時間により光の位置を変更
②

• エフェクトが指定されました。
88
協定世界時 UTC：Coordinated Universal Time

• エフェクトが指定されました。
89
時間を速めたり、遅くしたり設定が可能
速める
遅くする遅くする
速める
時間を進める時間を戻す

3-43 KMZを表示
90
[root.kmz]ファイルをコピー
kmzファイルはGoogle Earth Pro
から作成可能

3-44 KMZを表示
91
～
<script>
maximumLevel : 18
});
var SapporoRoot = viewer.dataSources.add(Cesium.KmlDataSource.load('./root.kmz'));
viewer.zoomTo(SapporoRoot);
</script>
</body>
</html>
①

3-45 KMZを表示
92
var SapporoRoot =
viewer.dataSources.add(Cesium.KmlDataSource.load
(‘./root.kmz’)); ↑ KMZを表示するメソッド
↑ KMZを指定
①

• KMZが表示されました。
93
3-46 KMZを表示

3-47 GeoJsonを表示
94
[Hokkaidoarea.geojson]ファイルをコピー
国土数値情報 http://nlftp.mlit.go.jp/ksj/ 行政区域から作成
QGISを利用してShape → GeoJsonへ変換

95
～
<script>
maximumLevel : 18
});
var Hokkaido = viewer.dataSources.add(Cesium.GeoJsonDataSource.load('./Hokkaidoarea.geojson', {
stroke: Cesium.Color.BLACK,
fill: Cesium.Color.YELLOW.withAlpha(0.5),
strokeWidth: 5
}));
viewer.zoomTo(Hokkaido);
</script>
</body>
</html>
①

96
var Hokkaido =
viewer.dataSources.add
(Cesium.GeoJsonDataSource.load
↑ GeoJsonを表示するメソッド
('./Hokkaidoarea.geojson', {
↑ GeoJsonを指定
stroke: Cesium.Color.BLACK,
↑ 外形線の色を指定
fill: Cesium.Color.YELLOW.withAlpha(0.5),
↑ 塗りの色を指定
strokeWidth: 5
↑ 外形線の幅を指定
}));
①

• GeoJsonが表示されました。
97
GeoJosnよりTopoJosonの
方が軽くなり速い
Node.jsを利用して変換した
Hokkaidoall.topojsonを表示して速度の違いを確認してください
ただし、座標の精度が落ちる場合があります

3-51 画像を表示
98
[foss4g-hkd-2016.png]ファイルをコピー

99
～
<script>
maximumLevel : 18
});
var img = viewer.entities.add({
position : Cesium.Cartesian3.fromDegrees(141.3860555, 43.056222),
billboard :{
image : './foss4g-hkd-2016.png'
}
});
viewer.zoomTo(img);
</script>
</body>
</html>
①

100
var img = viewer.entities.add({
position : Cesium.Cartesian3.fromDegrees
(141.3860555, 43.056222),
billboard :{
↑ 広告のような画像を定義
image : './foss4g-hkd-2016.png‘
↑ 画像ファイルを指定
}
});
①

• 画像が表示されました。
101

3-55 動画を球に表示
102
[weed.mp4]ファイルをコピー

103
～
</style>
<video id="weed" style="display: none;" autoplay="" loop="" >
<source src="./weed.mp4" type=" video/mp4 ">
Your browser does not support the <code>video</code> element.
</video>
</head>
<body>
<script>
maximumLevel : 18
});
var videoElement = document.getElementById('weed');
var sphere = viewer.entities.add({
position : Cesium.Cartesian3.fromDegrees(141.3860555, 43.056222, 1000),
ellipsoid : {
radii : new Cesium.Cartesian3(1000, 1000, 1000),
material : videoElement
}
});
viewer.zoomTo(sphere);
</script>
</body>
</html>
①
②

104
<video id=“weed” style="display: none;"
↑ ↑
ビデオ要素の一意のID ビデオを非表示
②で定義する球に表示
autoplay="" loop="“>
↑ ↑
ビデオをビデオを
自動再生繰り返し再生
<source src="./weed.mp4" type="video/mp4 ">
↑動画指定 ↑mp4指定
Your browser does not support the <code>video</code>
element.
</video>
①

105
var videoElement = document.getElementById('weed');
↑ビデオ要素の一意のIDを指定
var sphere = viewer.entities.add({
position : Cesium.Cartesian3.fromDegrees
(141.3860555, 43.056222, 1000),
ellipsoid : { ← 球体を指定
radii : new Cesium.Cartesian3(1000, 1000, 1000),
material : videoElement
↑ 球体にビデオを表示
}
});
②

• 動画が球に表示されました。
106
動画は
mp4、webm、mov
に対応

3-60 3Dモデルを表示
107
[Anotogastersieboldii.gltf]ファイルをコピー
ゼロ工房様から商用利用可能な3Dモデルデータを
ダウンロードし、obj2gltfを利用してobj → gltfへ変換
ゼロ工房様 http://www.eonet.ne.jp/~zerokobo/

108
～
<script>
maximumLevel : 18
});
var modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(
Cesium.Cartesian3.fromDegrees(141.3860555, 43.056222, 500.0));
var model = viewer.scene.primitives.add(Cesium.Model.fromGltf({
url : './Anotogastersieboldii.gltf',
modelMatrix : modelMatrix,
scale : 50.0
}));
destination: Cesium.Cartesian3.fromDegrees(141.3860555, 43.056222, 5000)
});
</script>
</body>
</html>
①

109
var modelMatrix =
Cesium.Transforms.eastNorthUpToFixedFrame(
↑モデルの配置位置指定のメソッド
Cesium.Cartesian3.fromDegrees
(141.3860555, 43.056222, 500.0));
↑モデルの配置位置経度、緯度、高さ
var model =
viewer.scene.primitives.add(Cesium.Model.fromGltf({
↑gltfのモデルのメソッド
url : ‘./Anotogastersieboldii.gltf’, ←gltfの指定
modelMatrix : modelMatrix, ←モデルの配置位置
scale : 50.0 ← モデルの拡大率
}));
①

• 3Dモデルが表示されました。
110

111
フォーマット
読み込み・変換j実績があるフォーマットについて
説明します。

4-1 フォーマット
112
フォーマット拡張子データ種別処理手順
Jpeg *Jpg / *.jgw 画像 / ワールドファイル Jpg/jgw → 画像タイル → Cesium
Tiff *.tif / *.tfw 画像 / ワールドファイル tif/tfw → 画像タイル → Cesium
Shapefile *.shp ベクターデータ Shp → GeoJson → Cesium
GeoJson *.json ベクターデータ GeoJson → Cesium
TopoJson *topojson ベクターデータ TopoJson → Cesium
KMZ *.kmz ベクターデータ KMZ → Cesium
CZML *.czml ベクターデータ / 時間 CZML → Cesium
obj *.obj 3Dモデル obj → gltf → Cesium
gltf *.gltf 3Dモデル gltf → Cesium
XYZ *.xyz 標高データ XYZ → 標高タイル → Cesium
Tiff *.tif 標高データ TIF → 標高タイル → Cesium
ReCap *.rcp / *.rcs 点群 ReCap（ライセンス必要） →
pts → pnts/json → Cesium

ありがとうございます
113

Cesiumを動かしてみよう

More Related Content

What's hot (20)

Similar to Cesiumを動かしてみよう (20)

More from Kazutaka ishizaki (14)

Recently uploaded (9)

Cesiumを動かしてみよう