How to add ArcGIS base layers

Most CesiumJS applications contain an imagery base layer and a terrain base layer. The data for the imagery base layer can be provided by an ArcGIS image tile service, while the data for the terrain base layer can be provided by an ArcGIS elevation service.

You can use ArcGIS data providers as base layers in a Cesium application to:

• Display different types of geographic data in a scene.
• Display image tile (raster) basemap layers containing satellite imagery and hillshade.
• Display detailed 3D terrain based on digital elevation data.

Cesium does not currently support the rendering of vector tile basemaps.

Image tile base layers

You can add a ready-to-use ArcGIS base layer to your CesiumJS application to provide a visual context for your scene. CesiumJS supports image tile base layers, which currently consist of the World Imagery, World Hillshade, and World Ocean layers.

How to access the basemap styles service

1. Select an image tile base layer from the World Imagery, World Hillshade, and World Ocean enumerations. Copy the corresponding CesiumJS ArcGisBaseMapType.

2. In your CesiumJS application, set the ArcGisMapService.defaultAccessToken with your ArcGIS access token.

3. Create an ArcGisMapServerImageryProvider by calling fromBasemapType. Include your selected basemap type.

4. Create a Viewer or CesiumWidget and set the baseLayer property to an ImageryLayer created from your image provider.

5. Run the application to display a scene using your selected base layer.

Example

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
    <div id="cesiumContainer"></div>

    <script>

      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),

      });

    </script>

Elevation layers

You can add an ArcGIS elevation service to a CesiumJS application as a TerrainProvider to display detailed 3D terrain.

How to access an elevation service

1. Create a Viewer or CesiumWidget.

2. Create a new ArcGISTiledElevationTerrainProvider and set the url property to the URL of the World Elevation Service.

3. Add the terrain provider to the scene by setting the terrainProvider property of the viewer or widget.

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
    <div id="cesiumContainer"></div>
    <script>

      const apiKey = "YOUR_API_KEY";

      const cesiumAccessToken = "YOUR_CESIUM_ACCESS_TOKEN";

      Cesium.Ion.defaultAccessToken = cesiumAccessToken;

      const arcGISTerrainProvider = Cesium.ArcGISTiledElevationTerrainProvider.fromUrl('https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer', {
          token: apiKey
      });

      const viewer = new Cesium.Viewer("cesiumContainer", {
          terrainProvider: arcGISTerrainProvider,
      });

    </script>

Tutorials

Display a scene

Create and display a scene with the basemap styles service.

Change the base layer

Change the imagery and terrain layers in a scene.