Cesium の機能（テライン）

【概要】

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

【目次】

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

【関連する外部ページ】

CesiumJS: https://cesium.com/platform/cesiumjs/
Visualizing 3D Terrain: https://cesium.com/learn/cesiumjs-learn/cesiumjs-terrain/

【サイト内の関連情報】

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

前準備

Cesium の準備

Cesium を使ってみるの Web ページを参考に、Cesium の準備が終わっていること
地形データ Cesium World Terrain は Cesium ion から配信される。無料の Cesium ion アカウントを作成し、アクセストークンを取得しておくこと（https://ion.cesium.com/tokens）

テライン（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()
    });
    viewer.camera.flyTo({
      destination: Cesium.Cartesian3.fromDegrees(138.60, 35.20, 20000)
    });
  </script>
</body>
</html>

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

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

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 は水面表現のための水域マスクを要求するオプションである。enableLighting は、太陽の位置に応じた陰影を有効にするものである。