はじめに

産総研の地質調査総合センターでは、標高タイルサービスを提供しています。今回は、この標高タイルサービスを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が提供するBingMapsAerial、高さ情報は標高タイルサービスを利用。

ほかの情報との組み合わせ
先ほどは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>

図　標高タイルサービスによる高さの付与。背景には地理院地図、高さ情報は標高タイルサービスを利用