Cesium の機能（テライン）

【概要】

Cesium は、3次元の地図を Web ブラウザで表示するための JavaScript ライブラリである。ここでは、地形（テライン）の起伏を表示する機能と、地形に光と水の効果を付ける機能を紹介する。

【目次】

前準備
テライン（Terrain）
テラインで光と水の効果を付ける

【関連する外部ページ】

CesiumJS: https://cesium.com/platform/cesiumjs/

【サイト内の関連情報】

3次元地図システム Cesiumについて

前準備

Cesium の準備

Cesium を使ってみるの Web ページを参考に、Cesium の準備が終わっていること
テラインの表示には Cesium ion のアクセストークンが必要である。無料の Cesium ion アカウントを作成し、アクセストークンを取得しておくこと（https://ion.cesium.com/tokens）

かつて公開されていた AGI の地形データ配信（assets.agi.com の STK World Terrain や PAMAP Terrain）は、現在は提供が終了している。現行の Cesium では、地形データは Cesium World Terrain（Cesium ion 経由で配信される全世界の地形）を Cesium.Terrain.fromWorldTerrain() で読み込む方式に置き換わっている。

テライン（Terrain）

Apps/HelloWorld.html を Apps/HelloWorld2.html にコピーし、Apps/HelloWorld2.html を次のように書き換える。your_access_token の部分は、取得した Cesium ion のアクセストークンに置き換える。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Hello World!</title>
  <script src="../Build/Cesium/Cesium.js"></script>
  <style>
      @import url(../Build/Cesium/Widgets/widgets.css);
      html, body, #cesiumContainer {
          width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
      }
  </style>
</head>
<body>
  <div id="cesiumContainer"></div>
  <script>
    Cesium.Ion.defaultAccessToken = 'your_access_token';
    const viewer = new Cesium.Viewer('cesiumContainer', {
      terrain: Cesium.Terrain.fromWorldTerrain()
    });
  </script>
</body>
</html>

Web ブラウザで Apps/HelloWorld2.html を開く。全世界の地形（Cesium World Terrain）が読み込まれ、山地の起伏が立体的に表示される。マウスで回転・ズームして地形を確認する。

テラインで光と水の効果を付ける

Apps/HelloWorld.html を Apps/HelloWorld4.html にコピーし、Apps/HelloWorld4.html を次のように書き換える。your_access_token の部分は、取得した Cesium ion のアクセストークンに置き換える。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Hello World!</title>
  <script src="../Build/Cesium/Cesium.js"></script>
  <style>
      @import url(../Build/Cesium/Widgets/widgets.css);
      html, body, #cesiumContainer {
          width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
      }
  </style>
</head>
<body>
  <div id="cesiumContainer"></div>
  <script>
    Cesium.Ion.defaultAccessToken = 'your_access_token';
    const viewer = new Cesium.Viewer('cesiumContainer', {
      terrain: Cesium.Terrain.fromWorldTerrain({
        requestVertexNormals: true,
        requestWaterMask: true
      })
    });
    viewer.scene.globe.enableLighting = true;
  </script>
</body>
</html>

Web ブラウザで Apps/HelloWorld4.html を開く。地形に光（陰影）と水面の効果が加わって表示される。requestVertexNormals は陰影表現のための法線を、requestWaterMask は水面表現のための水域マスクを要求するオプションである。