サイトの全体構成

Cesium を使ってみる

Cesium とは，３次元の「地図」をウエブブラウザで表示するための JavaScript ライブラリ． Cesiumのチュートリアルの Web ページの説明（の中の一部分）をもとに、Cesium の機能を紹介します．

テライン (Terrain)
テラインで光と水の効果付き (Enabling Terrain Lighting and Water Effects)

先人に感謝

キーワード： Cesium, 3次元地図, JavaScript, 地形（起伏）の表示、光や波の表現

前準備

Cesium の準備

「Cesium を使ってみる」の Web ページを参考に，Cesium の準備が終わっていること

ここには、インターネットアクセスできるテライン・タイルセット (Terrain Tileset) の Web ページを引用しています．（先人に感謝）

STL World Terrain
http://52.4.31.236/data-and-assets/terrain/stk-world-terrain.html　（現存しないページ）
Cesium PAMap Terrain
http://52.4.31.236/data-and-assets/terrain/pamap-terrain.html　（現存しないページ）

テライン (Terrain)

Apps/HelloWorld.html を Apps/HelloWorld2.html にコピーし、 Apps/HelloWorld2.html を次のように書き換える

■ STL World Terrain を使用

<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Use correct character set. -->
  <meta charset="utf-8">
  <!-- Tell IE to use the latest, best version. -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
  <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>
    var viewer = new Cesium.Viewer('cesiumContainer');
    var terrainProvider = new Cesium.CesiumTerrainProvider({
        url : '//assets.agi.com/stk-terrain/world'
    });
    viewer.terrainProvider = terrainProvider;
  </script>
</body>
</html>

Web ブラウザで Apps/HelloWorld2.html を開く

■ Cesium PAMap Terrain を使用

Apps/HelloWorld.html を Apps/HelloWorld3.html にコピーし、 Apps/HelloWorld3.html を次のように書き換える

<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Use correct character set. -->
  <meta charset="utf-8">
  <!-- Tell IE to use the latest, best version. -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
  <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>
    var viewer = new Cesium.Viewer('cesiumContainer');
    var terrainProvider = new Cesium.CesiumTerrainProvider({
        url : '//assets.agi.com/stk-terrain/v1/tilesets/PAMAP/tiles'
    });
    viewer.terrainProvider = terrainProvider;
  </script>
</body>
</html>

Web ブラウザで Apps/HelloWorld3.html を開く

テラインで光と水の効果付き (Enabling Terrain Lighting and Water Effects)

Apps/HelloWorld.html を Apps/HelloWorld4.html にコピーし、 Apps/HelloWorld4.html を次のように書き換える

■ STL World Terrain を使用

<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Use correct character set. -->
  <meta charset="utf-8">
  <!-- Tell IE to use the latest, best version. -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
  <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>
    var viewer = new Cesium.Viewer('cesiumContainer');
    var terrainProvider = new Cesium.CesiumTerrainProvider({
        url : '//assets.agi.com/stk-terrain/world',
        requestVertexNormals: true,
        requestWaterMask: true
    });
    viewer.terrainProvider = terrainProvider;
    viewer.scene.globe.enableLighting = true;
  </script>
</body>
</html>

Web ブラウザで Apps/HelloWorld4.html を開く

■ Cesium PAMap Terrain を使用

Apps/HelloWorld.html を Apps/HelloWorld5.html にコピーし、 Apps/HelloWorld5.html を次のように書き換える

<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Use correct character set. -->
  <meta charset="utf-8">
  <!-- Tell IE to use the latest, best version. -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
  <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>
    var viewer = new Cesium.Viewer('cesiumContainer');
    var terrainProvider = new Cesium.CesiumTerrainProvider({
        url : '//assets.agi.com/stk-terrain/v1/tilesets/PAMAP/tiles',
        requestVertexNormals: true,
        requestWaterMask: true
    });
    viewer.terrainProvider = terrainProvider;
    viewer.scene.globe.enableLighting = true;
  </script>
</body>
</html>

Web ブラウザで Apps/HelloWorld5.html を開く

本サイトは金子邦彦研究室のWebページである．

資料等の公開では，原則，「クリエイティブコモンズ BY NC SA」として公開するようにしている． PDFファイル，パワーポイントファイルなどには，「クリエイティブコモンズ BY NC SA」を明記するとともに，ロゴを記載するようにしている（作業が間に合っていない分もあるのでご容赦ください）．

公開している資料をご利用になる場合の，再配布の条件，剽窃の防止などについて，別ページ »で説明再配布や資料改変の際には，そのページをご確認ください．

サイトマップは，サイトマップのページをご覧下さい．本サイト内の検索は，サイト内検索のページをご利用下さい．

問い合わせ先：金子邦彦（かねこくにひこ） [image]