Scenes

Most CesiumJS scenes include a base layer and a terrain layer. The base layer provides the visual backdrop of your scene, while the terrain layer adds elevation data for realistic ground surfaces.

Base layers

Base layers provide the visual foundation for a scene. ArcGIS supports two types of base layers you can add to a CesiumJS scene: styled basemap tiles and satellite basemap tiles.

Styled basemap tiles

Styled basemap tiles are provided by the ArcGIS Static Basemap Tiles service. This service offers pre-rendered, pre-styled raster tiles of ArcGIS basemap styles such as streets, navigation, and outdoor. These tiles show geographic features using cartographic styling rather than real-world satellite imagery.

Steps

Select a basemap style from the list of available styles.
Set the location of the scene.
Display the style by accessing the Static Basemap Tiles service.

Display styled basemap tiles

Learn how to display styled basemap tiles from the Static Basemap Tiles service. This example displays the arcgis/navigation style as pre-rendered raster tiles.

Use dark colors for code blocksCopy
<!doctype html>
<html lang="en">
  <head>

    <meta charset="utf-8">
    <title>CesiumJS: Display a Scene</title>

    <script src="https://cesium.com/downloads/cesiumjs/releases/1.134/Build/Cesium/Cesium.js"></script>
    <link href="https://cesium.com/downloads/cesiumjs/releases/1.134/Build/Cesium/Widgets/widgets.css" rel="stylesheet">

    <style>
      html,
      body,
      #cesiumContainer {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
      }
    </style>
  </head>

  <body>

    <div id="cesiumContainer"></div>

    <script>

      /* Use for API key authentication */
      const accessToken = "YOUR_ACCESS_TOKEN";

      // or

      /* Use for user authentication */
      // const session = await arcgisRest.ArcGISIdentityManager.beginOAuth2({
      //   clientId: "YOUR_CLIENT_ID", // Your client ID from OAuth credentials
      //   redirectUri: "YOUR_REDIRECT_URI", // The redirect URL registered in your OAuth credentials
      //   portal: "YOUR_PORTAL_URL" // Your portal URL
      // })

      // const accessToken = session.token;

      Cesium.ArcGisMapService.defaultAccessToken = accessToken;

      const cesiumAccessToken = "YOUR_CESIUM_ACCESS_TOKEN";

      Cesium.Ion.defaultAccessToken = cesiumAccessToken;

      const basemapEnum = "arcgis/navigation";
      const baseUrl = `https://static-map-tiles-api.arcgis.com/arcgis/rest/services/static-basemap-tiles-service/v1/${basemapEnum}/static`;

      const imageryProvider = new Cesium.UrlTemplateImageryProvider({
        url: `${baseUrl}/tile/{z}/{y}/{x}?token=${accessToken}`,
        tileWidth: 512,
        tileHeight: 512
      });

      const viewer = new Cesium.Viewer("cesiumContainer", {
        baseLayerPicker: false,
        timeline: false,
        animation: false,
        geocoder: false
      });

      viewer.camera.setView({
        destination: Cesium.Cartesian3.fromDegrees(-91.2996, 37.1174, 12000000)
      });

      viewer.imageryLayers.addImageryProvider(imageryProvider);

      fetch(`${baseUrl}?token=${accessToken}`)
        .then((response) => response.json())
        .then((data) => {
          const basemapAttribution = new Cesium.Credit(data.copyrightText, false);
          viewer.creditDisplay.addStaticCredit(basemapAttribution);
        });

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

    </script>

  </body>
</html>

Go to tutorial

Tutorials

Display a scene

Create and display a scene with ArcGIS styled basemap tiles.

Change the base layer

Change the styled basemap tile in a scene.

Change language labels

Switch the language labels on static basemap tiles.

Display multiple basemap layers

Add multiple basemap layers from different services to your scene.

Satellite basemap tiles

Satellite basemap tiles are provided through a direct integration with CesiumJS. Cesium's ArcGisMapServerImageryProvider class can be used to load satellite basemap tiles from ArcGIS. The class provides access to real-world satellite imagery, as well as imagery-based styles such as hillshade and ocean.

Steps

Select a basemap style from the styles supported by CesiumJS.
Set the location of the scene.
Display the style with CesiumJS.

Display satellite basemap tiles

Learn how to display satellite basemap tiles with Cesium.ArcGisMapServerImageryProvider. This example displays the ArcGIS World Imagery style.

Expand
Use dark colors for code blocksCopy
    const arcGisImagery = Cesium.ArcGisMapServerImageryProvider.fromBasemapType(Cesium.ArcGisBaseMapType.SATELLITE);

    const viewer = new Cesium.Viewer("cesiumContainer", {

      baseLayer: Cesium.ImageryLayer.fromProviderAsync(arcGisImagery),

      terrain: Cesium.Terrain.fromWorldTerrain(),

      timeline: false,
      animation: false,
      geocoder: false

    });
Expand

Go to tutorial

Tutorials

Display a scene

Create and display a scene with ArcGIS satellite basemap tiles.

Display a scene (basemap session)

Display a scene with a basemap session that lasts for 12 hours.

Change the base layer

Change the imagery and terrain layers in a scene.

Elevation layers

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

Steps

Create a Viewer or CesiumWidget.
Create a new ArcGISTiledElevationTerrainProvider and set the url property to the URL of the World Elevation service.
Add the terrain provider to the scene by setting the terrainProvider property of the viewer or widget.

Display an ArcGIS elevation layer

This example creates a CesiumJS viewer with an ArcGISTiledElevationTerrainProvider that references the World Elevation service.

Expand
Use dark colors for code blocksCopy
    const arcGisTerrain = new Cesium.ProviderViewModel({
      name: "ArcGIS World Terrain",
      iconUrl: "https://www.arcgis.com/sharing/rest/content/items/58a541efc59545e6b7137f961d7de883/info/thumbnail/thumbnail1585609861151.png",
      creationFunction: () => {
        return Cesium.ArcGISTiledElevationTerrainProvider.fromUrl("https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer");
      }
    });
    viewModel.terrainProviderViewModels = [arcGisTerrain];

    // Attribution text retrieved from https://www.arcgis.com/home/item.html?id=7029fb60158543ad845c7e1527af11e4
    viewer.creditDisplay.addStaticCredit(new Cesium.Credit("Sources: Maxar, Airbus DS, USGS, NGA, NASA, CGIAR, GEBCO, N Robinson, NCEAS, NLS, OS, NMA, Geodatastyrelsen and the GIS User Community", false));
Expand

Go to tutorial

Scenes

Base layers

Styled basemap tiles

Steps

Display styled basemap tiles

Tutorials

Display a scene

Change the base layer

Change language labels

Display multiple basemap layers

Satellite basemap tiles

Steps

Display satellite basemap tiles

Tutorials

Display a scene

Display a scene (basemap session)

Change the base layer

Elevation layers

Steps

Display an ArcGIS elevation layer

More resources