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

2024/3/11
ヒント／テクニック Esri Community Blog

【Esri Community Blog】

はじめに

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 の開発者ガイドが公開されています。

TakahiroKAMIYA_0-1687761936662.pngCesiumJS に関する新しい ArcGIS Developers ガイドのチュートリアル

 

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

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

 

はじめましょう

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

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

 

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

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

TakahiroKAMIYA_1-1687762240894.pngCesiumJS で表示される 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 でホストされているフィーチャ サービスをクエリすることで、ポイント、ポリライン、ポリゴンを表示することができます。

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

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

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

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

 

TakahiroKAMIYA_3-1687762976882.pngCesiumJS で表示される 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 で使用できる他のサービスへのアクセス

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

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

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

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

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

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

 

■関連リンク

類似の記事がありません