はじめに
産総研の地質調査総合センターでは、標高タイルサービスを提供しています。今回は、この標高タイルサービスをCesiumで可視化してみます。
データ
産総研の標高タイルサービスには、以下のものがあります。
- 統合DEM
- 陸域統合DEM
- 兵庫県
- 基盤地図情報数値標高モデル
- 西之島付近噴火活動
- 内閣府地形データ
- ASTER GDEM 003
- 日本周辺250mメッシュ
- GEBCO Grid
- 地球地図全球版標高第2版
ライブラリ
標高タイルサービスをCesiumで可視化するためのライブラリを公開しているので、今回はこのライブラリを使ってみます。
NumericalPngTerrainProvider もしくは ExtendedNumericalPngTerrainProviderというクラスが提供されているので、これらのjsをhtmlに読みます。
統合DEMを読む場合には、以下のように記述します。
qiita.html
const viewer = new Cesium.Viewer( 'app', {
terrainProvider: new NumericalPngTerrainProvider()
});
コード
それではCesiumで標高タイルサービスを可視化してみましょう。
- テンプレート作成
まず、Cesium Templateを開き、テンプレートを作成します。そして、index.htmlを開きます。
テンプレートの状態では、以下のようになっていると思います。
-
JSライブラリの取得
NumericalPngTerrainProvider.jsとExtendedNumericalPngTerrainProvider.jsをダウンロードして、Glitchのプロジェクトにアップロードします。 -
jsライブラリの追加
の直下が一般的です。
以下のコードをindex.htmlに記述します。記述する場所は
qiita.html
<script src="NumericalPngTerrainProvider.js"></script>
<script src="ExtendedNumericalPngTerrainProvider.js"></script>
- 標高タイルサービスの可視化
ひとまず、何も考えずに標高タイルサービスを使用して2次元の地図に高さを付与します。
サンプルコードは以下のようになっており、富士山のある位置を可視化すると図のようになります。
qiita.html
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cesium.com/downloads/cesiumjs/releases/1.82/Build/Cesium/Cesium.js"></script>
<link href="https://cesium.com/downloads/cesiumjs/releases/1.82/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
</head>
<body>
<script src="NumericalPngTerrainProvider.js">
</script>
<div id="cesiumContainer"></div>
<script>
// Cesium ionの読み込み指定
Cesium.Ion.defaultAccessToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI5N2UyMjcwOS00MDY1LTQxYjEtYjZjMy00YTU0ZTg5MmViYWQiLCJpZCI6ODAzMDYsImlhdCI6MTY0Mjc0ODI2MX0.dkwAL1CcljUV7NA7fDbhXXnmyZQU_c-G5zRx8PtEcxE";
const viewer = new Cesium.Viewer( 'cesiumContainer', {
terrainProvider: new NumericalPngTerrainProvider()
});
viewer.camera.setView({
destination: Cesium.Cartesian3.fromDegrees(138.7201, 35.3631, 10000.0)
});
</script>
</body>
</html>
- ほかの情報との組み合わせ
先ほどはCesiumのデフォルトとして提供している画像に対して高さ情報を付与しました。
今度は地理院地図に対して高さを付与してみましょう。
コードは以下のようになっております。
qiita.html
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cesium.com/downloads/cesiumjs/releases/1.82/Build/Cesium/Cesium.js"></script>
<link href="https://cesium.com/downloads/cesiumjs/releases/1.82/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
</head>
<body>
<script src="NumericalPngTerrainProvider.js">
</script>
<div id="cesiumContainer"></div>
<script>
// Cesium ionの読み込み指定
Cesium.Ion.defaultAccessToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI5N2UyMjcwOS00MDY1LTQxYjEtYjZjMy00YTU0ZTg5MmViYWQiLCJpZCI6ODAzMDYsImlhdCI6MTY0Mjc0ODI2MX0.dkwAL1CcljUV7NA7fDbhXXnmyZQU_c-G5zRx8PtEcxE";
const viewer = new Cesium.Viewer( 'cesiumContainer', {
terrainProvider: new NumericalPngTerrainProvider()
});
viewer.camera.setView({
destination: Cesium.Cartesian3.fromDegrees(138.7201, 35.3631, 10000.0)
});
</script>
</body>
</html>
