年末年始、諸事情でCesiumを使わないといけない事象が発生したので、ついでにCesiumで地理院地図（地図タイル及びDEM双方）を使うライブラリ作成しました。
Cesiumって何？の人はこちら => Cesium:WebGL Virtual Globe and Map Engine WebGLを使って、Google Earthのような3D地球儀表示と2D地図表示の双方ができるライブラリです。
地理院タイルについてはこちら => 国土地理院地図タイル / Japan GSI tile API
成果物はgithubで、こちらに置いてあります。
動いているサンプルはこちら。
以下、簡単に使用法説明。
基本的な使い方
var viewer = new Cesium.Viewer('cesiumContainer', {
imageryProvider: new Cesium.JapanGSIImageryProvider({
layerLists: ["ort","relief","std"]
}),
terrainProvider: new Cesium.JapanGSITerrainProvider({}),
baseLayerPicker: false,
mapProjection: new Cesium.WebMercatorProjection(Cesium.Ellipsoid.WGS84)
});
var scene = viewer.scene;
scene.globe.depthTestAgainstTerrain = true;
みたいな感じ。
この中で、JapanGSIImageryProviderとJapanGSITerrainProviderが作成したものです。
JapanGSIImageryProvider
国土地理院の提供する地図画像タイル群から、好きなレイヤを組み合わせてCesiumの地図タイルレイヤを生成するライブラリです。
プロパティ / Property
- layerLists
地理院地図の使いたいレイヤIDを、配列で与えます。
全国レベルの画像セットがあるレイヤはプリセットされていますが、災害情報レイヤ等、一部しかないレイヤはプリセットされていません。
そのようなレイヤを使いたい場合は、以下のような感じで使いたいレイヤを定義してください。
var layers = new Cesium.JapanGSIImageryProvider({
layerLists: [{
"id": "20130717dol",
"zoom": "10-18",
"ext": "jpg"
},"relief","std"]
});
列挙されたレイヤ中、提供されるズームレベルに重なりがある場合は、先に書いたレイヤが優先されます。
JapanGSITerrainProvider
国土地理院のDEMタイル仕様から、Cesiumの地形を生成するライブラリです。
- heightPower
高度差の描画を強調したい場合、この値に1以上の値を与えると、その倍率だけ高さが強調された描画が為されます。
ただしもちろん、建物地物や飛行機の飛行経路等、その他の高度を持つ情報を描画する際は、そちらも同じ倍率を掛けないと相対高さがおかしくなります。
var terrain = new Cesium.JapanGSITerrainProvider({
heightPower: 2.0
});
Tips
どちらのライブラリも、Cesium.ViewerのbaseLayerPickerプロパティをfalse、viewer.scene.globe.depthTestAgainstTerrainプロパティをtrueにして使う事が推奨されます。
前者は、falseにしないと、Cesium標準の地図セット切り替えコントロールが出てきてしまい、設定した地図タイル、地形が反映されません。
後者は、trueにしないと、地形の地面の下に描画した地物も、透けて見えてしまいます。
バグ、拡張等ありましたら、どしどしパッチお願いいたします。
また、こんな機能欲しいという要望ありましたら、ご連絡ください。