Cesium JS が ArcGIS ロケーションサービスのサポートを発表

1 Kudo

はじめに

CesiumJS が ArcGISのロケーションサービスを利用したアプリケーションを構築するためのオープンソースライブラリとして全面的にサポートされました。これにより、CesiumJS の 3D レンダリングエンジンと ArcGIS のロケーションサービスを使用して、ベースマップへのアクセス、ホストデータの表示、ジオコーディング、ルート検索、人口統計データ（ジオエンリッチメント）、空間解析などを行うアプリケーションを構築することができます。

本内容のアナウンスは Cesiumのブログ「Cesium and Esri Announce Support for ArcGIS Location Services in CesiumJS」でも紹介されています。

本記事では、米国 Esri 社が ArcGIS Blog にて投稿した「Announcing support for CesiumJS and ArcGIS location services」の記事を翻訳して紹介します。

CesiumJS で ArcGIS ロケーションサービスを利用したアプリケーション開発のガイドとして ArcGIS Developersのサイトで CesiumJS の開発者ガイドが公開されています。

CesiumJS に関する新しい ArcGIS Developers ガイドのチュートリアル

新しい ArcGIS Developers のガイドには、CesiumJS とロケーションサービスをインテグレーションする方法を説明する 20 のチュートリアルが含まれています。以下のサービスが対象となります。

構築できるアプリケーションの種類については、以下をお読みください。

はじめましょう

Cesium JS と ArcGIS ロケーションサービスを使用して開発を始めるには、ArcGIS Developer アカウントか ArcGIS Online アカウントのどちらかが必要です。お持ちでない場合は、サービスに限定的にアクセスできる無料アカウントで始めることができます。

無料アカウントの作成については、ArcGIS 開発リソース集の「開発者アカウントの作成」も参考としてください。

また、アプリケーションの開発およびデプロイには、Cesium ion のアカウントも必要です。アカウントを作成するには、ion.cesium.com にアクセスします。

CesiumJS で ArcGIS のベースマップスタイルを表示

CesiumJSで使用できる他のサービスへのアクセス

CesiumJS で表示される ArcGIS のイメージと標高レイヤー

CesiumJS ライブラリに、World Imagery、World Oceans、World Hillshade スタイルを含む ArcGIS ベースレイヤーにアクセスする新しいクラスが追加されました。ArcGisMapServerImageryProvider クラスを使用すると、アプリケーションでこれらのレイヤーをイメージタイルとしてアクセスできます。これらのレイヤーにアクセスするには、API キーなどの ArcGIS アクセストークンが必要です。

ArcGIS ベースレイヤーを CesiumJS アプリケーションに追加する方法の例を次に示します。

const cesiumAccessToken = "YOUR_CESIUM_ACCESS_TOKEN";
Cesium.Ion.defaultAccessToken = cesiumAccessToken;

const apiKey = "YOUR_ARCGIS_API_KEY";
Cesium.ArcGisMapService.defaultAccessToken = apiKey;

const arcgisImagery = Cesium.ArcGisMapServerImageryProvider.fromBasemapType(Cesium.ArcGisBaseMapType.SATELLITE);

const viewer = new Cesium.Viewer("cesiumContainer", {
    baseLayer: Cesium.ImageryLayer.fromProviderAsync(arcGisImagery)
});

また、デフォルトの BaseLayerPicker を使用して、アプリケーションに ArcGIS ベースレイヤーを直接読み込むこともできます。この方法でレイヤーを読み込むには、CesiumJS に含まれるデフォルトのアクセストークンをオーバーライドする必要があります。

Cesium.ArcGisMapService.defaultAccessToken = "YOUR_ARCGIS_API_KEY";

CesiumJS で ArcGIS ベースレイヤーを使用する方法の詳細については、新しい CesiumJS ガイドのチュートリアル「Display a scene」を参照してください。

CesiumJS で ArcGIS のホストデータを表示

CesiumJS は、フィーチャデータや I3S データなど、ArcGIS でホストされているデータを表示することもできます。アプリケーションでフィーチャにアクセスするには、GeoJsonDataSource クラスを使用して、ArcGIS でホストされているフィーチャサービスをクエリすることで、ポイント、ポリライン、ポリゴンを表示することができます。

スタイル設定されたホストフィーチャサービスのフィーチャを CesiumJS で表示。サンタモニカ山脈の公園、トレイル、登山口を表現しています。

次にホストフィーチャサービスからフィーチャを追加する方法の例を示します。

arcgisRest.queryFeatures({
    url: featureServiceURL,
    authentication,
    f:"geojson"
}).then((response) => {
    const data = Cesium.GeoJsonDataSource.load(response)
    viewer.dataSources.add(data);
})

フィーチャを追加する方法の詳細については、チュートリアルの「Add features as GeoJSON」を参照してください。

CesiumJS で表示される 3D メッシュレイヤーです。メッシュにはフランクフルトの街並みが描かれており、建物や道路、樹木などが描かれています。

I3SDataProvider クラスを使用して、ホストされた I3S データを CesiumJS アプリで表示することができます。CesiumJS は現在、OGC I3S 標準に準拠した 3D オブジェクトレイヤーと 3D メッシュレイヤーをサポートしています。

次にホストされた I3S データを CesiumJS アプリケーションに追加する方法の例を示します。

const frankfurtMesh = "https://tiles.arcgis.com/tiles/cFEFS0EWrhfDeVw9/arcgis/rest/services/Buildings_Frankfurt_2021/SceneServer";

const i3sProvider = await Cesium.I3SDataProvider.fromUrl(frankfurtMesh, {
    geoidTiledTerrainProvider: geoidService,
    token: apiKey
})
viewer.scene.primitives.add(i3sProvider);

I3S データを追加する方法の詳細については、チュートリアルの「Add an integrated mesh」を参照ください。

CesiumJS で使用できる他のサービスへのアクセス

CesiumJS で視覚化した運転ルートと道順です。ルートと道順は ArcGIS のルート検索サービスを使用して計算されています。

また、CesiumJS を使用して、すぐに使用できる他の ArcGIS ロケーションサービスからの結果を表示することもできます。これらのサービスには、ジオコーディングサービス、ルート検索サービス、ジオエンリッチメントサービス、空間解析サービスなどがあります。

CesiumJS の 3D 機能により、サービスの結果をユニークな方法で簡単に視覚化することができます。例えば、次の画像は、空間解析操作の結果を CesiumJS で視覚化したものです。

ホットスポットの解析結果を CesiumJS で視覚化したものです。ホットスポットは背の高い赤いクラスター、コールドスポットは背の低い青いクラスターで視覚化されています。

このホットスポット解析は空間解析サービスを使用して、その結果を CesiumJS で視覚化しています。CesiumJSのモデリング機能により、3D データへの強力なレンダリングが可能になり、データ内のホットスポットやコールドスポットがどこにあるのかを即座に伝えることができます。新しい「Perform a feature analysis」のチュートリアルには、この分析を実行するための詳細な手順が記載されています。

この記事では、ArcGIS と CesiumJS を使って構築できる一例を紹介しています。もっと詳しく知りたい方は、ArcGIS Developers の Web サイトにある「CesiumJS guide」のガイドを参照してください。

■関連リンク

ArcGIS Platform
- ESRIジャパン製品ページ
ArcGIS Developers
- ESRIジャパン製品ページ
- ArcGIS Developers 開発リソース集
ArcGIS (米国) ブログ
- Announcing support for CesiumJS and ArcGIS location services
Esri 社（米国）Web サイト
- ArcGIS Developers （CesiumJS）
Cesium (米国) ブログ
- Cesium and Esri Announce Support for ArcGIS Location Services in CesiumJS

Cesium JS が ArcGIS ロケーションサービスのサポートを発表

Cesium JS が ArcGIS ロケーションサービスのサポートを発表

Web 開発

コミュニティ