Tutorial: Add an integrated mesh

Learn how to display an integrated mesh in a scene.

An integrated mesh is a type of I3S data that is used to model an entire area. Typically created through aerial imagery, an integrated mesh consists of a single continuous surface that contains everything within a certain extent. For example, an integrated mesh depicting a city will depict buildings as well as trees, bridges, cars on the road, and any other object within the extent. Integrated meshes are an OGC community standard.

This tutorial explains how to add an integrated mesh to your CesiumJS application using the I3SDataProvider class. The integrated mesh you will use is hosted in the Buildings Frankfurt 2021 scene layer.

Prerequisites

Steps

Create a new pen

1. To get started, either complete the Display a scene tutorial or use this pen.

Set the API key

To access location services, you need an API key or OAuth 2.0 access token. To learn how to create and scope your key, visit the Create an API key tutorial.

1. Go to your dashboard to get an API key. The API key must be scoped to access the services used in this tutorial.

2. In CodePen, update apiKey to use your key. Update cesiumAccessToken to use your Cesium ion access token.

   Use dark colors for code blocks

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26
   27
   28
   29
   30
   31
   32
   33
   34
   35
   36
   37
   38
   39
   40
   41
   42
   43
   44
   45
   46
   47
   48
   49
   50
   51
   52
   53
   54
   55
   56
   57
   58
   59
         const apiKey = "YOUR_API_KEY";
   
         Cesium.ArcGisMapService.defaultAccessToken = apiKey;
   
         const cesiumAccessToken = "YOUR_CESIUM_ACCESS_TOKEN";
   
         Cesium.Ion.defaultAccessToken = cesiumAccessToken;
   
         const arcGisImagery = Cesium.ArcGisMapServerImageryProvider.fromBasemapType(Cesium.ArcGisBaseMapType.SATELLITE);
   
         const viewer = new Cesium.Viewer("cesiumContainer", {
   
           baseLayer: Cesium.ImageryLayer.fromProviderAsync(arcGisImagery),
   
         });
   

Update the camera position

1. This tutorial uses an integrated mesh centered on the city of Frankfurt. Update the camera to focus on the coordinates [8.691, 50.104] with a height of 300. Change the orientation heading to Cesium.Math.toRadians(-55) and orientation pitch to Cesium.Math.toRadians(-10.0).

   Expand

   Use dark colors for code blocks

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26
   27
   28
   29
   30
   31
   32
   33
   34
   35
   36
   37
   38
   39
   40
   41
   42
   43
   44
   45
   46
   47
   48
   49
   50
   51
   52
   53
   54
   55
   56
   57
   58
   59
   60
   61
   62
   63
   64
   65
   66
   67
   68
   69
         const viewer = new Cesium.Viewer("cesiumContainer", {
   
             baseLayer: Cesium.ImageryLayer.fromProviderAsync(arcGisImagery),
   
             terrain: Cesium.Terrain.fromWorldTerrain(),
             timeline: false,
             animation: false,
             geocoder:false
   
         });
   
         viewer.camera.setView({
             destination: Cesium.Cartesian3.fromDegrees(8.691,50.104,300),
             orientation: {
               heading: Cesium.Math.toRadians(-55),
               pitch: Cesium.Math.toRadians(-10.0)
             }
         });
   
   

   Expand

Add a terrain provider

To create accurate and realistic terrain in your CesiumJS scene, you need to use a geoid service. This service will allow the elevation of your integrated mesh to align with the elevation values of Cesium World Terrain.

1. Initialize a terrain provider called geoidService that references the Earth Gravitational Model EGM2008. This provider will allow for geoid conversion between the gravity-based integrated mesh and the ellipsoidal-based Cesium World Terrain.

   Expand

   Use dark colors for code blocks

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26
   27
   28
   29
   30
   31
   32
   33
   34
   35
   36
   37
   38
   39
   40
   41
   42
   43
   44
   45
   46
   47
   48
   49
   50
   51
   52
   53
   54
   55
   56
   57
   58
   59
   60
   61
   62
   63
   64
   65
   66
   67
   68
   69
         viewer.camera.setView({
             destination: Cesium.Cartesian3.fromDegrees(8.691,50.104,300),
             orientation: {
               heading: Cesium.Math.toRadians(-55),
               pitch: Cesium.Math.toRadians(-10.0)
             }
         });
   
         const geoidService = await Cesium.ArcGISTiledElevationTerrainProvider.fromUrl("https://tiles.arcgis.com/tiles/z2tnIkrLQ2BRzr6P/arcgis/rest/services/EGM2008/ImageServer");
   
         const i3sLayer = "https://tiles.arcgis.com/tiles/cFEFS0EWrhfDeVw9/arcgis/rest/services/Buildings_Frankfurt_2021/SceneServer";
   
   

   Expand

Add an integrated mesh

1. Reference the service URL of the Buildings Frankfurt 2021 scene layer.

   Expand

   Use dark colors for code blocks

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26
   27
   28
   29
   30
   31
   32
   33
   34
   35
   36
   37
   38
   39
   40
   41
   42
   43
   44
   45
   46
   47
   48
   49
   50
   51
   52
   53
   54
   55
   56
   57
   58
   59
   60
   61
   62
   63
   64
   65
   66
   67
   68
   69
         const geoidService = await Cesium.ArcGISTiledElevationTerrainProvider.fromUrl("https://tiles.arcgis.com/tiles/z2tnIkrLQ2BRzr6P/arcgis/rest/services/EGM2008/ImageServer");
   
         const i3sLayer = "https://tiles.arcgis.com/tiles/cFEFS0EWrhfDeVw9/arcgis/rest/services/Buildings_Frankfurt_2021/SceneServer";
   
   

   Expand

2. Create an I3SDataProvider by calling the fromUrl method. Pass the geoidService you created as well as your API key to provide authentication.

   Expand

   Use dark colors for code blocks

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26
   27
   28
   29
   30
   31
   32
   33
   34
   35
   36
   37
   38
   39
   40
   41
   42
   43
   44
   45
   46
   47
   48
   49
   50
   51
   52
   53
   54
   55
   56
   57
   58
   59
   60
   61
   62
   63
   64
   65
   66
   67
   68
   69
         const geoidService = await Cesium.ArcGISTiledElevationTerrainProvider.fromUrl("https://tiles.arcgis.com/tiles/z2tnIkrLQ2BRzr6P/arcgis/rest/services/EGM2008/ImageServer");
   
         const i3sLayer = "https://tiles.arcgis.com/tiles/cFEFS0EWrhfDeVw9/arcgis/rest/services/Buildings_Frankfurt_2021/SceneServer";
   
         const i3sProvider = await Cesium.I3SDataProvider.fromUrl(i3sLayer, {
             geoidTiledTerrainProvider: geoidService,
             token: apiKey
         })
   
   

   Expand

3. Add the I3S provider to your viewer as a Primitive.

   Expand

   Use dark colors for code blocks

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26
   27
   28
   29
   30
   31
   32
   33
   34
   35
   36
   37
   38
   39
   40
   41
   42
   43
   44
   45
   46
   47
   48
   49
   50
   51
   52
   53
   54
   55
   56
   57
   58
   59
   60
   61
   62
   63
   64
   65
   66
   67
   68
   69
         const geoidService = await Cesium.ArcGISTiledElevationTerrainProvider.fromUrl("https://tiles.arcgis.com/tiles/z2tnIkrLQ2BRzr6P/arcgis/rest/services/EGM2008/ImageServer");
   
         const i3sLayer = "https://tiles.arcgis.com/tiles/cFEFS0EWrhfDeVw9/arcgis/rest/services/Buildings_Frankfurt_2021/SceneServer";
   
         const i3sProvider = await Cesium.I3SDataProvider.fromUrl(i3sLayer, {
             geoidTiledTerrainProvider: geoidService,
             token: apiKey
         })
   
         viewer.scene.primitives.add(i3sProvider);
   

   Expand

Run the app

In CodePen, run your code to display the map. The map should display the city of Frankfurt with an integrated mesh.

What's next?

Learn how to use additional ArcGIS location services in these tutorials: