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
This tutorial requires an ArcGIS Location Platform or ArcGIS Online account.
Steps
Create a new pen
- To get started, you can complete the Display a scene tutorial or use the .
Get an access token
You need an access token with the correct privileges to access the resources used in this tutorial.
-
Go to the Create an API key tutorial and create an API key with the following privilege(s):
- Privileges
- Location services > Basemaps
- Item access
- Note: If you are using your own custom data layer for this tutorial, you need to grant the API key credentials access to the layer item. Learn more in Item access privileges.
- Privileges
-
Copy the API key access token to your clipboard when prompted.
-
In CodePen, update the
access
variable to use your access token.Token Use dark colors for code blocks const accessToken = "YOUR_ACCESS_TOKEN"; Cesium.ArcGisMapService.defaultAccessToken = accessToken; 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), });
-
Run the code to ensure the base layer is displayed in the scene.
To learn about the other types of authentication available, go to Types of authentication.
Update the camera position
-
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 of300
. Change the orientation heading toCesium.
and orientation pitch toMath.to Radians(-55) Cesium.
.Math.to Radians(-10.0) Use dark colors for code blocks const viewer = new Cesium.Viewer("cesiumContainer", { baseLayer: Cesium.ImageryLayer.fromProviderAsync(arcGisImagery), terrain: Cesium.Terrain.fromWorldTerrain(), timeline: false, animation: false, geocoder:false }); // Add Esri attribution // Learn more in https://esriurl.com/attribution const poweredByEsri = new Cesium.Credit("Powered by <a href='https://www.esri.com/en-us/home' target='_blank'>Esri</a>", true) viewer.creditDisplay.addStaticCredit(poweredByEsri); viewer.camera.setView({ destination: Cesium.Cartesian3.fromDegrees(8.691,50.104,300), orientation: { heading: Cesium.Math.toRadians(-55), pitch: Cesium.Math.toRadians(-10.0) } });
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.
-
Initialize a terrain provider called
geoid
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.Service Use dark colors for code blocks // Add Esri attribution // Learn more in https://esriurl.com/attribution const poweredByEsri = new Cesium.Credit("Powered by <a href='https://www.esri.com/en-us/home' target='_blank'>Esri</a>", true) viewer.creditDisplay.addStaticCredit(poweredByEsri); 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/GVgbJbqm8hXASVYi/arcgis/rest/services/EGM2008/ImageServer"); const i3sLayer = "https://tiles.arcgis.com/tiles/cFEFS0EWrhfDeVw9/arcgis/rest/services/Buildings_Frankfurt_2021/SceneServer";
-
Add the data attribution for the elevation layer source.
- Go to the EGM2008 item.
- Scroll down to the Credits (Attribution) section and copy its value.
- Create an
attribution
property and paste the attribution value from the item.Use dark colors for code blocks // Add Esri attribution // Learn more in https://esriurl.com/attribution const poweredByEsri = new Cesium.Credit("Powered by <a href='https://www.esri.com/en-us/home' target='_blank'>Esri</a>", true) viewer.creditDisplay.addStaticCredit(poweredByEsri); 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/GVgbJbqm8hXASVYi/arcgis/rest/services/EGM2008/ImageServer"); // Attribution text retrieved from https://arcgis.com/home/item.html?id=d798c71512404bbb9c1551b827bf5467 viewer.creditDisplay.addStaticCredit(new Cesium.Credit("National Geospatial-Intelligence Agency (NGA)", false)); const i3sLayer = "https://tiles.arcgis.com/tiles/cFEFS0EWrhfDeVw9/arcgis/rest/services/Buildings_Frankfurt_2021/SceneServer";
Add an integrated mesh
-
Reference the service URL of the Buildings Frankfurt 2021 scene layer.
Use dark colors for code blocks const geoidService = await Cesium.ArcGISTiledElevationTerrainProvider.fromUrl("https://tiles.arcgis.com/tiles/GVgbJbqm8hXASVYi/arcgis/rest/services/EGM2008/ImageServer"); // Attribution text retrieved from https://arcgis.com/home/item.html?id=d798c71512404bbb9c1551b827bf5467 viewer.creditDisplay.addStaticCredit(new Cesium.Credit("National Geospatial-Intelligence Agency (NGA)", false)); const i3sLayer = "https://tiles.arcgis.com/tiles/cFEFS0EWrhfDeVw9/arcgis/rest/services/Buildings_Frankfurt_2021/SceneServer";
-
Create an
I3
by calling theS Data Provider from
method. Pass theUrl geoid
you created as well as your access token to provide authentication.Service Use dark colors for code blocks const geoidService = await Cesium.ArcGISTiledElevationTerrainProvider.fromUrl("https://tiles.arcgis.com/tiles/GVgbJbqm8hXASVYi/arcgis/rest/services/EGM2008/ImageServer"); // Attribution text retrieved from https://arcgis.com/home/item.html?id=d798c71512404bbb9c1551b827bf5467 viewer.creditDisplay.addStaticCredit(new Cesium.Credit("National Geospatial-Intelligence Agency (NGA)", false)); 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: accessToken, })
-
Add the data attribution for the scene layer source.
- Go to the Buildings Frankfurt 2021 item.
- Scroll down to the Credits (Attribution) section and copy its value.
- Create an
attribution
property and paste the attribution value from the item.Use dark colors for code blocks const geoidService = await Cesium.ArcGISTiledElevationTerrainProvider.fromUrl("https://tiles.arcgis.com/tiles/GVgbJbqm8hXASVYi/arcgis/rest/services/EGM2008/ImageServer"); // Attribution text retrieved from https://arcgis.com/home/item.html?id=d798c71512404bbb9c1551b827bf5467 viewer.creditDisplay.addStaticCredit(new Cesium.Credit("National Geospatial-Intelligence Agency (NGA)", false)); 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: accessToken, }) // Attribution text retrieved from https://www.arcgis.com/home/item.html?id=79c3563e42ee40ddb1b8c688eaf0dd2a viewer.creditDisplay.addStaticCredit(new Cesium.Credit("Aerowest GmbH / Esri", false)); viewer.scene.primitives.add(i3sProvider);
-
Add the I3S provider to your viewer as a
Primitive
.Use dark colors for code blocks const geoidService = await Cesium.ArcGISTiledElevationTerrainProvider.fromUrl("https://tiles.arcgis.com/tiles/GVgbJbqm8hXASVYi/arcgis/rest/services/EGM2008/ImageServer"); // Attribution text retrieved from https://arcgis.com/home/item.html?id=d798c71512404bbb9c1551b827bf5467 viewer.creditDisplay.addStaticCredit(new Cesium.Credit("National Geospatial-Intelligence Agency (NGA)", false)); 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: accessToken, }) // Attribution text retrieved from https://www.arcgis.com/home/item.html?id=79c3563e42ee40ddb1b8c688eaf0dd2a viewer.creditDisplay.addStaticCredit(new Cesium.Credit("Aerowest GmbH / Esri", false)); viewer.scene.primitives.add(i3sProvider);
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: