[SOLVED] How to create any location 3D tile layers in Cesium map

How to create any location 3D tile layers in Cesium map

I want to create my location 3D tile layers for cesium map. but how to create i have no idea because i am beginner in cesium. So anyone know how to create 3D tile layers for any specific location give your response.

I have this location 3D tile map

https://sandcastle.cesium.com/?src=I3S%20IntegratedMesh%20Layer.html&label=DataSources

I want to create this location 3D tile data source. near San Francisco location

Solution

Here is San Francisco area 3d tile map with ArcGISTiledElevationTerrainProvider()

Example code copied from Cesium demo link And replace url of Indexed 3D Scene (I3S) layer

From

https://tiles.arcgis.com/tiles/z2tnIkrLQ2BRzr6P/arcgis/rest/services/SanFrancisco_3DObjects_1_7/SceneServer/layers/0

https://tiles.arcgis.com/tiles/z2tnIkrLQ2BRzr6P/arcgis/rest/services/SanFrancisco_Bldgs/SceneServer?cacheKey=90e21aeb68997279

I got from arcgis San Francisco 3D Buildings service in here

And arcgis map (Scene Service Viewer)

https://tiles.arcgis.com/tiles/z2tnIkrLQ2BRzr6P/arcgis/rest/services/SanFrancisco_Bldgs/SceneServer?view=sceneview&f=html&cacheKey=90e21aeb68997279

Demo Code

<!DOCTYPE html>
<html>

<head>
    <title>Cesium Example</title>
    <script src="https://cesium.com/downloads/cesiumjs/releases/1.103/Build/Cesium/Cesium.js"></script>
    <link href="https://cesium.com/downloads/cesiumjs/releases/1.103/Build/Cesium/Widgets/widgets.css"
        rel="stylesheet" />
    <style>
        #cesiumContainer {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <div id="cesiumContainer"></div>
    <script>
        Cesium.Ion.defaultAccessToken = "<your Cesium Ion Token>;
        const viewer = new Cesium.Viewer("cesiumContainer", {
            terrainProvider: new Cesium.createWorldTerrain(),
            animation: false,
            timeline: false,
        });
        // More datasets to tour can be added here...
        // The url passed to I3SDataProvider supports loading a single Indexed 3D Scene (I3S) layer (.<host>/SceneServer/layers/<id>) or a collection of scene layers (.<host>/SceneServer) from a SceneServer.
        const tours = {
            "San Francisco":
                "https://tiles.arcgis.com/tiles/z2tnIkrLQ2BRzr6P/arcgis/rest/services/SanFrancisco_Bldgs/SceneServer?cacheKey=90e21aeb68997279"
                // "https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer?f=json"
        };
        // Initialize a terrain provider which provides geoid conversion between gravity related (typically I3S datasets) and ellipsoidal based
        // height systems (Cesium World Terrain).
        // If this is not specified, or the URL is invalid no geoid conversion will be applied.
        // The source data used in this transcoding service was compiled from https://earth-info.nga.mil/#tab_wgs84-data and is based on EGM2008 Gravity Model
        const geoidService = new Cesium.ArcGISTiledElevationTerrainProvider({
            url:
                "https://tiles.arcgis.com/tiles/z2tnIkrLQ2BRzr6P/arcgis/rest/services/EGM2008/ImageServer",
        });
        // Create i3s and Cesium3DTileset options to pass optional parameters useful for debugging and visualizing
        const cesium3dTilesetOptions = {
            skipLevelOfDetail: false,
            debugShowBoundingVolume: false,
        };
        const i3sOptions = {
            url: tours["San Francisco"],
            traceFetches: false, // for tracing I3S fetches
            geoidTiledTerrainProvider: geoidService, // pass the geoid service
            cesium3dTilesetOptions: cesium3dTilesetOptions, // options for internal Cesium3dTileset
        };

        // Create I3S data provider
        const i3sProvider = new Cesium.I3SDataProvider(i3sOptions);

        // Center camera on I3S once it's loaded
        i3sProvider.readyPromise.then(function () {
            const center = Cesium.Rectangle.center(i3sProvider.extent);
            center.height = 10000.0;
            viewer.camera.setView({
                destination: Cesium.Ellipsoid.WGS84.cartographicToCartesian(center),
            });
        });

        // Add the i3s layer provider as a primitive data type
        viewer.scene.primitives.add(i3sProvider);

    </script>
</body>

</html>

Result

Note, It only the grayed area.