フリーダムの日記

GIS（地理情報システム）を中心に技術的なことを書いています。

ArcGIS で 3D Tiles を試してみる。

ArcGIS Cesium

はじめに

本エントリーは ArcGIS活用法 Advent Calendar 2024 の 8 日目の記事です。

qiita.com

これまで 3D Tiles の配信基盤としては、Cesium ion でしたが、ArcGIS でも配信基盤として対応しています。ArcGIS プラットフォームとして、ArcGIS Pro や ArcGIS Online、ArcGIS Enterprise 等での表示や配信に加え、ArcGIS が提供している API や SDK でも対応しています。そのような連携が進んでいるため、Esri と Cesium のコラボレーションが進んでいます。2024 年 10 月 2 日に公開されている Cesium ブログ「Esri and Cesium Collaborations」の中でも紹介されています。

Cesium - ArcGIS

Collaboration enabled with OGC standards like 3D Tiles and I3S to support streaming, analyzing and creating 3D geospatial content and applications.

ArcGIS で 3D Tiles を使用する場合、デスクトップ製品の ArcGIS Pro は、直接ファイルを参照することができます。詳細は、Pro のガイドの 3D Tiles レイヤー操作をご参照ください。 SaaS の ArcGIS Online や PaaS の ArcGIS Location Platform の場合は、3D Tiles 形式のファイルを 3D Tiles レイヤー パッケージ ファイル (.3tz) に変換し、その変換したファイル（.3tz）をアップロードし、それからホスト 3D Tiles レイヤーを公開するか、ArcGIS Pro のデータから公開することができます。詳細は、Online のガイドのホスト 3D Tiles レイヤーの公開をご参照ください。

今回、ArcGIS で 3D Tiles を確認するまでのステップは、すべて無償で使用できるサービスで行っていきたいと思います。具体的には、3D Tiles を 3D Tiles レイヤー パッケージ ファイル (.3tz) に変換し、変換したファイルをホスト 3D Tiles レイヤーを ArcGIS Location Platform に公開し、公開したレイヤーを Cesium JS で確認してみました。

Cesium - ArcGISCesium - ArcGIS

3D Tiles を ArcGIS に公開する流れ

ArcGIS にサービス公開するため、3D Tiles を 3D Tiles レイヤー パッケージ ファイル (.3tz) に変換して、ArcGIS Location Platform へサービス公開します。

① 3D Tiles レイヤー パッケージ ファイル (.3tz) へ変換

3D Tiles のデータとして、今回は PLATEAU の 3D 都市モデル（Project PLATEAU）中央区（2023年度）のデータを使用しました。

www.geospatial.jp

3D都市モデル（Project PLATEAU）中央区（2023年度）の 3D Tiles, MVT（v3）からダウンロードして、ファイルを解凍すると幾つかのフォルダーで構成されています。ここでは、「13102_chuo-ku_pref_2023_citygml_1_op_bldg_3dtiles_13102_chuo-ku_lod2」という名前で解凍されたフォルダーを使用します。

3D Tiles は、ArcGIS で公開するにあたり、上記で説明したように .3tz というファイルに変換する必要があります。ArcGIS Pro からも変換はできますが、GitHub 上に変換ツールが公開されています。具体的な変換手順については、3tz_packager_ReadMe.md に、3tz_packager.exe を使用した方法が記載されています。

github.com

実行方法は、3D Tiles のデータセットを含むフォルダーの場所の名前と変換先を指定する 3tz ファイルの名前を指定します。

C:\3D-tiles-layer\3tz_packager\3tz_packager.exe C:\3DTiles\13102_chuo-ku_city_2023_3dtiles_mvt_1_op\13102_chuo-ku_pref_2023_citygml_1_op_bldg_3dtiles_13102_chuo-ku_lod1 C:\3DTiles\13102_chuo-ku_pref_2023_3DTiles.3tz

13102_chuo-ku_pref_2023_3DTiles.3tz というファイルができあがります。

② 3D Tiles レイヤー パッケージ ファイル (.3tz) を ArcGIS Location Platform へサービス公開

作成した 13102_chuo-ku_pref_2023_3DTiles.3tz を ArcGIS Location Platform へサービス公開していきます。ArcGIS Location Platform は無償から使用できるサービスで、高品質なマップとロケーションサービスを使用することができます。ArcGIS Location Platform は、開発者アカウントを作成することで、無償から使用できます。開発者アカウントの作成や ArcGIS Location Platform の使い方などについては、ESRIジャパンが運用している ArcGIS 開発リソース集の開発者アカウントの作成などが参考になるかと思います。

ArcGIS Location Platform にログインしてサイトから My portal をクリックしてポータルのコンテンツ画面を表示します。 ArcGIS Location Platform

コンテンツ画面のアイテムから新しいアイテムとして、作成した　13102_chuo-ku_pref_2023_3DTiles.3tz を追加します。 ArcGIS Location Platform

13102_chuo-ku_pref_2023_3DTiles.3tz を追加してホスト 3 D Tiles レイヤーを作成を選択し、レイヤー タイプは、3D メッシュを選択します。 ArcGIS Location Platform

タイトルなど任意の名前を指定して、保存をクリックします。 ArcGIS Location Platform

保存後、アイテムとして 13102_chuo-ku_pref_2023_3DTiles レイヤーが作成されます。 ArcGIS Location Platform

同様な手順については、Portal and data services guide の Add a file as an item からも確認することができます。

developers.arcgis.com

サービス公開した 3D Tiles は、ArcGIS Location Platform 内のシーン ビューアでも確認することができます。 ArcGIS Location Platform

また、REST エンドサービスとしても確認できます。 ArcGIS Location Platform

以下のような URL が作成されるため、 Cesium JS などからも参照して表示することができます。 https://tiles.arcgis.com/tiles/××××/arcgis/rest/services/13102_chuo_ku_pref_2023_3DTiles/3DTilesServer/tileset.json

Cesium JS で表示してみる

最後に ArcGIS Location Platform へサービス公開した 13102_chuo-ku_pref_2023_3DTiles レイヤーを Cesium JS から参照して表示します。

Cesium JS を使用するにあたり Cesium ion でアカウント登録して、Access Tokens を取得します。Cesium ion をアカウント登録することで、無償から使用できます。

Cesium JS をこれから触る方は、CesiumJS Quickstart も参考になるかと思います。 cesium.com

また、ArcGIS のサービスを使用するために API キーなどのアクセス トークンが必要となります。API キーの作成は、ArcGIS 開発リソース集の API キーの取得が参考になります。

今回は、3D Tiles の表示にフォーカスして説明します。3D Tiles のURLを参照して表示する場合、Cesium3DTileset というクラスを使用します。URL には、ArcGIS から配信している 3D Tiles の REST のエンドポイントを指定し、Cesium3DTileset コンストラクタの初期オプションを指定します。ここでは、enableCollision を true と指定しました。

const tileset = await Cesium.Cesium3DTileset.fromUrl(
    `https://tiles.arcgis.com/tiles/HzGpeRqGvs5TMkVr/arcgis/rest/services/13102_chuo_ku_pref_2023_3DTiles/3DTilesServer/tileset.json?token=${accessToken}`,
    { enableCollision: true }
);

補足ですが、建物を属性の施設情報に応じて色分け表示してみました。建物の色分けには、Cesium3DTileStyle クラスを使用しました。属性情報として、幾つかあり、ここでは、'bldg:usage' という属性情報を使用しました。

tileset.style = new Cesium.Cesium3DTileStyle ({
    color: {
        conditions: [
            [ "${feature['bldg:usage']} === '共同住宅'" , "color('cyan')" ],
            [ "${feature['bldg:usage']} === '業務施設'" , "color('blue')" ],
            [ "${feature['bldg:usage']} === '供給処理施設'" , "color('green')" ],
            [ "${feature['bldg:usage']} === '運輸倉庫施設'" , "color('yellow')" ],
            [ "${feature['bldg:usage']} === '商業施設'" , "color('red')" ],
            [ true, "color('white')" ],
        ],
    },
});

全体のソース コードは以下となります。

<!DOCTYPE html>
<html>
  <head>
    <!-- Include the CesiumJS JavaScript and CSS files -->
    <script src="https://cesium.com/downloads/cesiumjs/releases/1.124/Build/Cesium/Cesium.js"></script>
    <link href="https://cesium.com/downloads/cesiumjs/releases/1.124/Build/Cesium/Widgets/widgets.css" rel="stylesheet">

    <style>
        html,
        body {
            overflow: hidden;
            margin: 0px;
            padding: 0px;
            height: 100%;
        }
        #cesiumContainer {
            height: 100%;
        }
    </style>

  </head>
  <body>
    <div id="cesiumContainer"></div>
    <script type="module">
        
        // ArcGIS Location Platform API key
        const accessToken = "<accessToken >";
        
        // Get your token from https://cesium.com/ion/tokens
        Cesium.Ion.defaultAccessToken = "<accessToken >";
        
        // Initialize the Cesium Viewer in the HTML element with the `cesiumContainer` ID.
        const viewer = new Cesium.Viewer('cesiumContainer', {
            terrain: Cesium.Terrain.fromWorldTerrain(),
        });  
      
        // Turn on camera collisions with the tileset.
        const tileset = await Cesium.Cesium3DTileset.fromUrl(
            `https://tiles.arcgis.com/tiles/HzGpeRqGvs5TMkVr/arcgis/rest/services/13102_chuo_ku_pref_2023_3DTiles/3DTilesServer/tileset.json?token=${accessToken}`,
            { enableCollision: true }
        );

        viewer.scene.primitives.add(tileset);

        // カメラのズーム
        viewer.flyTo(tileset);

        // 建物へのカラー設定
        highlightBuildingsByUsage ()
        
        function highlightBuildingsByUsage () {
            tileset.style = new Cesium.Cesium3DTileStyle ({
                color: {
                    conditions: [
                        [ "${feature['bldg:usage']} === '共同住宅'" , "color('cyan')" ],
                        [ "${feature['bldg:usage']} === '業務施設'" , "color('blue')" ],
                        [ "${feature['bldg:usage']} === '供給処理施設'" , "color('green')" ],
                        [ "${feature['bldg:usage']} === '運輸倉庫施設'" , "color('yellow')" ],
                        [ "${feature['bldg:usage']} === '商業施設'" , "color('red')" ],
                        [ true, "color('white')" ],
                    ],
                },
            });
        }
        
    </script>
  </body>
</html>

Cesium - ArcGISCesium - ArcGIS

まとめ

今回は、ArcGIS で 3D Tiles を使用することにフォーカスして紹介しました。無償でここまで使用できるのは驚きです。さすがは ArcGIS といったところでしょうか。ただ、3DTiles でサポートされるフィーチャ でもあるように、まだ、すべての 3D Tiles には対応していなく、例えば、点群などのポイントクラウドもまだのようです。また、テクスチャなどの対応も Cesium ion と違い対応していない部分もあるようです。今後に期待したいところですが、その場合は、同じ OGC として、i3s を使用すると言ったところでしょうか。3D Tiles と i3s で相互に変換なども対応しているとのことなので、次回はこちらにフォーカスして紹介できればと思います。

以上、参考となれば幸いです。