Cesium 1.0 で地理院タイル（地形モデルつき）

2014年8月1日に Cesium 1.0 がリリースされました（Cesium Version 1.0 Released）。それに先立ち、2014年4月29日には STK World Terrain という「terrain tileset for use with Cesium and other applications」という位置づけのものをリリースされています（STK World Terrain）。これらを使って、地理院タイル（標準地図）を表示してみるサンプルを作成してみました。

結果

Hello World!
f:id:hfu:20140812000518p:plain
日本付近で地球儀を拡大していくと、地形の起伏が反映されていることが分かります。また、右上のメニューから、2D、2.5D、球面の3つのモードが選択できる状態になっていることが分かります。

製作過程

Cesium のチュートリアルを二つほどたどったのみです。

Cesium Up and Running

Getting Started 的なものです。これで、地形データの話以外はカバーされます。やたらと内容のあるZIPファイルをサーバに置くことを迫られますが、今回は甘受してみました。また、HTTP Server に node.js を使うことを支持されますが、私は迷わず、python -m SimpleHTTPServer しました。

Cesium Terrain and Water Tutorial

地形データを重ねあわせる部分です。なお、Cesium から地形データには2種類あって、チュートリアルにあるものよりは、//cesiumjs.org/stk-terrain/tilesets/world/tiles のほうがレベルが高いようです。

コード

作成したコードとしては、30行程度となりました。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>Hello World!</title>
<script src="../Build/Cesium/Cesium.js"></script>
<style>
@import url(../Build/Cesium/Widgets/widgets.css);
#cesiumContainer {
  position: absolute; top: 0; left: 0; height: 100%; width: 100%;
  margin: 0; overflow: hidden; padding: 0; font-family: sans-serif;
}
html {height: 100%;}
body {padding: 0; margin: 0; overflow: hidden; height: 100%;}
</style>
</head>
<body>
<div id="cesiumContainer"></div>
<script>
var viewer = new Cesium.Viewer('cesiumContainer', {
  imageryProvider: new Cesium.OpenStreetMapImageryProvider({
    url: 'http://cyberjapandata.gsi.go.jp/xyz/std/', credit: '地理院タイル'}),
    baseLayerPicker: false});
viewer.scene.terrainProvider = new Cesium.CesiumTerrainProvider({
  url: 'http://cesiumjs.org/stk-terrain/tilesets/world/tiles'});
</script>
</body>
</html>