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.
Prerequisites You need an ArcGIS Developer or ArcGIS Online account to access the developer dashboard and create an API key .
Code
Use dark colors for code blocks Copy
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
70
71
72
73
<!DOCTYPE html >
< html lang = "en" >
< head >
< meta charset = "utf-8" />
< title > CesiumJS: Add an integrated mesh layer (I3S) </ title >
<!-- Include the CesiumJS JavaScript and CSS files -->
< script src = "https://cesium.com/downloads/cesiumjs/releases/1.105/Build/Cesium/Cesium.js" > </ script >
< link href = "https://cesium.com/downloads/cesiumjs/releases/1.105/Build/Cesium/Widgets/widgets.css" rel = "stylesheet" >
< style >
html ,
body {
margin : 0px ;
padding : 0px ;
height : 100% ;
}
#cesiumContainer {
height : 100% ;
}
</ style >
</ head >
< body >
< div id = "cesiumContainer" > </ div >
< script type = "module" >
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, {
enablePickFeatures : false
});
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.69131 , 50.10483 , 300 ),
orientation : {
heading : Cesium.Math.toRadians(- 55 ),
pitch : Cesium.Math.toRadians(- 10.0 )
}
});
// 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 = 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);
</ script >
</ body >
</ html >
What's next? Learn how to use additional ArcGIS location services in these tutorials:
