ArcGIS Developers 開発リソース集 > スタートアップガイド > アプリ開発 > CesiumJS

CesiumJS

シーンを表示する

このチュートリアルでは、CesiumJS とベースマップレイヤーサービスを使用して、シーンを表示する方法を紹介します。

ArcGIS マップタイルサービスを使用すると、CesiumJS で地図が表示できます。例えば ArcGIS:Imagery マップタイルレイヤーには、世界の地形と組み合わせて使用できる、グローバルなカバレッジを持つ衛星画像が含まれています。

このチュートリアルでは、ArcGIS:Imagery と Cesium World Terrain を使用して、富士山周辺のシーンを表示します。

ベースマップレイヤーの詳細については、Mapping and location services ガイドの Basemaps とベースマップを参照してください。

前提条件

この機能を使うには、開発者アカウントが必要です。アカウントの作成手順については「開発者アカウントの作成」を参照してください。

ステップ

新しい Pen の作成

CodePen にアクセスして、新しい Pen を作成します。

HTML の追加

HTML ページを定義して、Web ブラウザの幅と高さにあわせたマップを作成します。

CodePen > HTML で、HTML と CSS を追加して、cesiumContainer という id 属性を持つ div 要素のあるページを作成します。 cesiumContainer は、マップを表示するために使用される id 属性です。CSS はブラウザの設定をリセットして、マップがブラウザの幅と高さ全体に表示されるようにします。

<!DOCTYPE html>
<html lang="ja">
  <head>

    <meta charset="utf-8" />
    <title>CesiumJS: Display a Scene</title>

    <style>
        html, body, #cesiumContainer {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
        }
    </style>
  </head>

  <body>

    <div id="cesiumContainer"></div>

  </body>
</html>

スクリプト参照の追加

<head>タグで、CesiumJS CSS および JS ライブラリへの参照を追加します。

<!DOCTYPE html>
<html lang="ja">
  <head>

    <meta charset="utf-8" />
    <title>CesiumJS: Display a Scene</title>
    <!-- cesium js のライブラリと css ファイルを指定 -->
    <script src="https://cesium.com/downloads/cesiumjs/releases/1.118/Build/Cesium/Cesium.js"></script>
    <link href="https://cesium.com/downloads/cesiumjs/releases/1.118/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
    <style>
        html, body, #cesiumContainer {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
        }
    </style>
  </head>

  <body>

    <div id="cesiumContainer"></div>

  </body>
</html>

Cesium ion アクセストークンの取得

すべての Cesium アプリケーションは、Cesium ion を通じて提供されるアクセストークンを使用する必要があります。このトークンによって、アプリケーションで Cesium World Terrain などのアセットにアクセスできるようになります。

Cesium ion のダッシュボードにアクセスし、アクセストークンを生成し、取得します。
<body>タグ内に<script>タグを追加します。

<!DOCTYPE html>
<html lang="ja">
  <head>

    <meta charset="utf-8" />
    <title>CesiumJS: Display a Scene</title>
    <!-- cesium js のライブラリと css ファイルを指定 -->
    <script src="https://cesium.com/downloads/cesiumjs/releases/1.118/Build/Cesium/Cesium.js"></script>
    <link href="https://cesium.com/downloads/cesiumjs/releases/1.118/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
    <style>
        html, body, #cesiumContainer {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
        }
    </style>
  </head>

  <body>

    <div id="cesiumContainer"></div>
    <!--script のタグを追加-->
    <script>

    </script>

  </body>
</html>

変数 cesiumAccessToken を作成し、Cesium ion ダッシュボードからコピーしたアクセストークンを格納し、Cesium.Ion.defaultAccessToken に設定します。

<!DOCTYPE html>
<html lang="ja">
  <head>

    <meta charset="utf-8" />
    <title>CesiumJS: Display a Scene</title>
    <!-- cesium js のライブラリと css ファイルを指定 -->
    <script src="https://cesium.com/downloads/cesiumjs/releases/1.118/Build/Cesium/Cesium.js"></script>
    <link href="https://cesium.com/downloads/cesiumjs/releases/1.118/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
    <style>
        html, body, #cesiumContainer {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
        }
    </style>
  </head>

  <body>

    <div id="cesiumContainer"></div>
    <!--script のタグを追加-->
    <script>
      // 取得した Cesium ion のアクセス トークンを貼り付け
       const cesiumAccessToken = "YOUR_CESIUM_ACCESS_TOKEN";
      // Cesium ion へのアクセス トークンを cesiumAccessToken に設定
       Cesium.Ion.defaultAccessToken = cesiumAccessToken;
    </script>

  </body>
</html>

ArcGIS APIキーの取得

ロケーションサービスにアクセスするには、API キーまたは OAuth2.0 アクセストークンが必要です。API キーの作成手順については「API キーの取得」を参照してください。

認証方法とアクセストークンの取得方法の詳細については、「セキュリティと認証」を参照してください。

ダッシュボードにアクセスして、Developer credentials から API キーを取得します。
作成した ArcGIS API キーを変数 apiKey に格納し、Cesium.ArcGisMapService.defaultAccessToken に設定します。

CesiumJS で利用可能な ArcGIS サービスの詳細については、Key features を参照してください。

<!DOCTYPE html>
<html lang="ja">
  <head>

    <meta charset="utf-8" />
    <title>CesiumJS: Display a Scene</title>
    <!-- cesium js のライブラリと css ファイルを指定 -->
    <script src="https://cesium.com/downloads/cesiumjs/releases/1.118/Build/Cesium/Cesium.js"></script>
    <link href="https://cesium.com/downloads/cesiumjs/releases/1.118/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
    <style>
        html, body, #cesiumContainer {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
        }
    </style>
  </head>

  <body>

    <div id="cesiumContainer"></div>
    <!--script のタグを追加-->
    <script>
      // ArcGIS API キーの追加
      const apiKey = "YOUR_API_KEY";
      // ArcGIS API キーを Cesium.ArcGisMapService.defaultAccessToken に設定 
      Cesium.ArcGisMapService.defaultAccessToken = apiKey;

      // 取得した Cesium ion のアクセス トークンを貼り付け
       const cesiumAccessToken = "YOUR_CESIUM_ACCESS_TOKEN";
      // Cesium ion へのアクセス トークンを cesiumAccessToken に設定
       Cesium.Ion.defaultAccessToken = cesiumAccessToken;
    
    </script>

  </body>
</html>

シーンの作成

World Imagery マップタイルレイヤーにアクセスする Viewer を作成します。ArcGisMapServerImageryProvider クラスを使用して、ベースマップスタイルサービスに認証済み要求を行います。

SATTELITE ベースマップタイプを使用して新しい ArcGisMapServerImageryProvider クラスを作成します。SATTELITE ベースマップタイプは、ArcGIS:World Imagery マップタイルサービスにアクセスします。

<!DOCTYPE html>
<html lang="ja">
  <head>

    <meta charset="utf-8" />
    <title>CesiumJS: Display a Scene</title>
    <!-- cesium js のライブラリと css ファイルを指定 -->
    <script src="https://cesium.com/downloads/cesiumjs/releases/1.118/Build/Cesium/Cesium.js"></script>
    <link href="https://cesium.com/downloads/cesiumjs/releases/1.118/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
    <style>
        html, body, #cesiumContainer {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
        }
    </style>
  </head>

  <body>

    <div id="cesiumContainer"></div>
    <!--script のタグを追加-->
    <script>
      // ArcGIS API キーの追加
      const apiKey = "YOUR_API_KEY";
      // ArcGIS API キーを Cesium.ArcGisMapService.defaultAccessToken に設定 
      Cesium.ArcGisMapService.defaultAccessToken = apiKey;

      // 取得した Cesium ion のアクセス トークンを貼り付け
       const cesiumAccessToken = "YOUR_CESIUM_ACCESS_TOKEN";
      // Cesium ion へのアクセス トークンを cesiumAccessToken に設定
       Cesium.Ion.defaultAccessToken = cesiumAccessToken;
      // fromBasemapType メソッドを利用して ArcGIS のベースマップを呼び出し
      const arcGisImagery = Cesium.ArcGisMapServerImageryProvider.fromBasemapType(Cesium.ArcGisBaseMapType.SATELLITE);
    
    </script>

  </body>
</html>

CesiumContainer に接続された Cesium.Viewer クラスを作成します。 Cesium.ImageryLayer.fromProviderAsync メソッドで、baseLayer プロパティを設定します。

<!DOCTYPE html>
<html lang="ja">
  <head>

    <meta charset="utf-8" />
    <title>CesiumJS: Display a Scene</title>
    <!-- cesium js のライブラリと css ファイルを指定 -->
    <script src="https://cesium.com/downloads/cesiumjs/releases/1.118/Build/Cesium/Cesium.js"></script>
    <link href="https://cesium.com/downloads/cesiumjs/releases/1.118/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
    <style>
        html, body, #cesiumContainer {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
        }
    </style>
  </head>

  <body>

    <div id="cesiumContainer"></div>
    <!--script のタグを追加-->
    <script>
      // ArcGIS API キーの追加
      const apiKey = "YOUR_API_KEY";
      // ArcGIS API キーを Cesium.ArcGisMapService.defaultAccessToken に設定 
      Cesium.ArcGisMapService.defaultAccessToken = apiKey;

      // 取得した Cesium ion のアクセス トークンを貼り付け
       const cesiumAccessToken = "YOUR_CESIUM_ACCESS_TOKEN";
      // Cesium ion へのアクセス トークンを cesiumAccessToken に設定
       Cesium.Ion.defaultAccessToken = cesiumAccessToken;
      // fromBasemapType メソッドを利用して ArcGIS のベースマップを呼び出し
      const arcGisImagery = Cesium.ArcGisMapServerImageryProvider.fromBasemapType(Cesium.ArcGisBaseMapType.SATELLITE);
      // CesiumContainer に接続された Cesium.Viewer クラスを作成
      const viewer = new Cesium.Viewer("cesiumContainer", {
        // Cesium のベースマップを SATELLITE に設定
        baseLayer: Cesium.ImageryLayer.fromProviderAsync(arcGisImagery),

      });
    </script>

  </body>
</html>

オプションの追加パラメーターを設定し、Viewer の外観を構成します。今回は、timeline、animation、geocoder コントロールを無効にし、Cesium World Terrain を追加します。

<!DOCTYPE html>
<html lang="ja">
  <head>

    <meta charset="utf-8" />
    <title>CesiumJS: Display a Scene</title>
    <!-- cesium js のライブラリと css ファイルを指定 -->
    <script src="https://cesium.com/downloads/cesiumjs/releases/1.118/Build/Cesium/Cesium.js"></script>
    <link href="https://cesium.com/downloads/cesiumjs/releases/1.118/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
    <style>
        html, body, #cesiumContainer {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
        }
    </style>
  </head>

  <body>

    <div id="cesiumContainer"></div>
    <!--script のタグを追加-->
    <script>
      // ArcGIS API キーの追加
      const apiKey = "YOUR_API_KEY";
      // ArcGIS API キーを Cesium.ArcGisMapService.defaultAccessToken に設定 
      Cesium.ArcGisMapService.defaultAccessToken = apiKey;

      // 取得した Cesium ion のアクセス トークンを貼り付け
       const cesiumAccessToken = "YOUR_CESIUM_ACCESS_TOKEN";
      // Cesium ion へのアクセス トークンを cesiumAccessToken に設定
       Cesium.Ion.defaultAccessToken = cesiumAccessToken;
      // fromBasemapType メソッドを利用して ArcGIS のベースマップを呼び出し
      const arcGisImagery = Cesium.ArcGisMapServerImageryProvider.fromBasemapType(Cesium.ArcGisBaseMapType.SATELLITE);
      // CesiumContainer に接続された Cesium.Viewer クラスを作成
      const viewer = new Cesium.Viewer("cesiumContainer", {
        // Cesium のベースマップを SATELLITE に設定
        baseLayer: Cesium.ImageryLayer.fromProviderAsync(arcGisImagery),
        // Viewer のオプションを設定。
        terrain: Cesium.Terrain.fromWorldTerrain(),
        timeline: false,
        animation: false,
        geocoder:false

      });
    </script>

  </body>
</html>

viewer.camera.setView を使用して、シーンのカメラの位置は河口湖付近に設定し、少し上から見下ろしているような視点にします。

<!DOCTYPE html>
<html lang="ja">
  <head>

    <meta charset="utf-8" />
    <title>CesiumJS: Display a Scene</title>
    <!-- cesium js のライブラリと css ファイルを指定 -->
    <script src="https://cesium.com/downloads/cesiumjs/releases/1.118/Build/Cesium/Cesium.js"></script>
    <link href="https://cesium.com/downloads/cesiumjs/releases/1.118/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
    <style>
        html, body, #cesiumContainer {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
        }
    </style>
  </head>

  <body>

    <div id="cesiumContainer"></div>
    <!--script のタグを追加-->
    <script>
      // ArcGIS API キーの追加
      const apiKey = "YOUR_API_KEY";
      // ArcGIS API キーを Cesium.ArcGisMapService.defaultAccessToken に設定 
      Cesium.ArcGisMapService.defaultAccessToken = apiKey;

      // 取得した Cesium ion のアクセス トークンを貼り付け
       const cesiumAccessToken = "YOUR_CESIUM_ACCESS_TOKEN";
      // Cesium ion へのアクセス トークンを cesiumAccessToken に設定
       Cesium.Ion.defaultAccessToken = cesiumAccessToken;
      // fromBasemapType メソッドを利用して ArcGIS のベースマップを呼び出し
      const arcGisImagery = Cesium.ArcGisMapServerImageryProvider.fromBasemapType(Cesium.ArcGisBaseMapType.SATELLITE);
      // CesiumContainer に接続された Cesium.Viewer クラスを作成
      const viewer = new Cesium.Viewer("cesiumContainer", {
        // Cesium のベースマップを SATELLITE に設定
        baseLayer: Cesium.ImageryLayer.fromProviderAsync(arcGisImagery),
        // Viewer のオプションを設定。
        terrain: Cesium.Terrain.fromWorldTerrain(),
        timeline: false,
        animation: false,
        geocoder:false

      });
      // カメラの位置と角度を設定
      viewer.camera.setView({
        destination : Cesium.Cartesian3.fromDegrees(138.74482706645605,35.509217041554955, 3500),
        orientation : {
          heading : Cesium.Math.toRadians(180.0),
          pitch : Cesium.Math.toRadians(-10.0),
        }
      });
    </script>

  </body>
</html>

アプリの実行

CodePen で、作成したコードを実行してシーンを表示します。

表示されるシーンには、日本の富士山周辺の衛星画像が 3D で表示されています。

CesiumJS

シーンを表示する

前提条件

ステップ

新しい Pen の作成

HTML の追加

スクリプト参照の追加

Cesium ion アクセス トークンの取得

ArcGIS APIキーの取得

シーンの作成

アプリの実行

Cesium ion アクセストークンの取得