- Cesium 1.19
- Node.js 4.1.1
- npm 2.14.4
- Google Chrome
Cesium版歴史的農業環境閲覧システムを使った開発に便利なアプリケーションを紹介します。
GitHubからソースコードをダウンロードします。サルでもわかるGit入門 に使用しているOSごとのGitのインストール方法が説明されてます。
Node.jsのバージョン管理をするために、nodebrewをインストールします。詳しくは、こちらを参照してください。Windowsユーザーの人はnodeistをインストールします。
$ curl -L git.io/nodebrew | perl - setup
$ export PATH=$HOME/.nodebrew/current/bin:$PATH
$ source ~/.bash_profileNode.jsを使うときには安定バージョン（Stable）を利用するといいです。 https://nodejs.org/en/blog/
$ nodebrew ls-remote
$ nodebrew install-binary v4.1.1
### install-binary しただけでは使えません
$ nodebrew ls
v0.10.38
v4.1.1
v5.7.1
current: v0.10.38
$ nodebrew use v4.1.1
use v4.1.1
$ node -v
v4.1.1
$ npm -v
2.14.4$ git clone https://github.com/HabsNiaes/HabsCesium.git
$ cd HabsCesiumGitHubからCloneしたファイルの構成は下記の図の通りです。
cesium-project
├─ node_modules
│ └ cesium
│ └ Build
│ ├ Cesium <= 圧縮済 本番用
│ │ └ Cesium.js
│ └ CesiumUnminified <= 未圧縮 開発用
│ └ Cesium.js
├─ kml <= KMLファイルを格納
├─ JavaScript <= 地理院標高タイルのライブラリ
├─ img
├─ index.html
├─ style.css <= 各要素のスタイルを設定
└─ main.js <= Cesiumの各機能を読み込むindex.html、main.js、style.css：開発はこのファイルに記述していきます。node_modules：Cesiumの元ソースコードが入ってます。kml：視図、断面図などの図郭外図のKMLデータが入ってます。JavaScript：kochizufanさんの地理院標高タイルのライブラリが入ってます。
Same-Origin Policyのため、Cesiumの開発のためにローカルにサーバーを立ち上げます。
$ sudo npm i st -g
[email protected] /usr/local/lib/node_modules/st
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected] ([email protected])
└── [email protected] ([email protected])
$ st -nc #-ncはキャッシュの無効化
listening at http://127.0.0.1:1337ブラウザを立ち上げて、http://127.0.0.1:1337/index.html をURLに入力すると、Cesiumが立ち上がる。
デフォルトの状態ではいろいろなウィジェット設定されています。そのため、必要ないウィジェットをオフにします。
var viewer = new Cesium.Viewer("cesiumContainer", {
baseLayerPicker : false, //デフォルトのレイヤ切り替えウィジェットをオフにする
timeline : false, //デフォルトのタイムラインウィジェットをオフにする
animation : false //デフォルトのアニメーションウィジェットをオフにする
});index.htmlにJapanGSITerrainProvider.jsの読み込みのコードを記述します。
<script src="JavaScript/JapanGSITerrainProvider.js"></script>JapanGSITerrainProvider.jsの読み込みを設定したうえで、main.jsに下記のコードを記述します。heightPower: で高さの倍率を設定できます。
var terrainProvider = new Cesium.JapanGSITerrainProvider({
heightPower: 2.5 //高さの倍率の設定
});
viewer.terrainProvider = terrainProvider;関東周辺部に初期の視点になるようmain.jsに以下を記述します。
viewer.camera.setView({
destination: Cesium.Cartesian3.fromDegrees(139.6721684, 35.7052493, 50000),
orientation: {
heading: 0, // 水平方向の回転
pitch: -Cesium.Math.PI_OVER_TWO, // 垂直方向の回転 上を見上げたり下を見下ろしたり
roll: 0
}
});KMLファイルを読み込むようmain.jsに以下を記述します。
viewer.dataSources.add(Cesium.KmlDataSource.load('kml/shizu.kmz'),{
camera: viewer.scene.camera,
canvas: viewer.scene.canvas
});各種レイヤ読み込み方法にはプルダウンメニューとチェックボックスの2つの設定しました。main.jsに下記の要素を記入することでレイヤの追加、削除ができます。
addBaseLayerOption();：プルダウンメニューでのレイヤ切り替えaddAdditionalLayerOption();：チェックボタンでのレイヤ切り替え
var baseLayers = viewModel.baseLayers;
function setupLayers() {
// Create all the base layers that this example will support.
// These base layers aren't really special. It's possible to have multiple of them
// enabled at once, just like the other layers, but it doesn't make much sense because
// all of these layers cover the entire globe and are opaque.
addBaseLayerOption(
'Bing Maps Aerial',
undefined); // the current base layer
// Create the additional layers
addBaseLayerOption(
'地理院地図',
new Cesium.OpenStreetMapImageryProvider({
url: 'http://cyberjapandata.gsi.go.jp/xyz/std/',
credit: new Cesium.Credit('地理院タイル', '', 'http://maps.gsi.go.jp/development/ichiran.html')
}));
// Create the additional layers
addBaseLayerOption(
'電子国土基本図（オルソ画像）',
new Cesium.OpenStreetMapImageryProvider({
url: 'http://cyberjapandata.gsi.go.jp/xyz/ort/',
credit: new Cesium.Credit('地理院タイル', '', 'http://maps.gsi.go.jp/development/ichiran.html')
}));
addAdditionalLayerOption(
'迅速測図',
new Cesium.OpenStreetMapImageryProvider({
url: 'http://www.finds.jp/ws/tmc/1.0.0/Kanto_Rapid-900913-L/',
"ext": "jpg",
"zmin": 0,
"zmax": 18,
credit : 'CC BY 国立研究開発法人農業環境技術研究所 歴史的農業環境閲覧システム',
}));
}