Learn how to customize the CesiumJS base layer picker to display ArcGIS data provider options.
ArcGIS provides base layers for both imagery and terrain that you can use in your CesiumJS applications. You can use map tiles from the basemap styles service to create an Imagery, and you can use elevation data from the elevation service to create a Terrain.
In this tutorial, you customize the Base widget to display the different ArcGIS base layers available for imagery and terrain.
Prerequisites
You need an ArcGIS Developer or ArcGIS Online account to access the developer dashboard and create an API key.
Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>CesiumJS: Change the basemap layer</title>
<!-- Include the CesiumJS JavaScript and CSS files -->
<script src="https://cesium.com/downloads/cesiumjs/releases/1.107/Build/Cesium/Cesium.js"></script>
<link href="https://cesium.com/downloads/cesiumjs/releases/1.107/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>
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(),
baseLayerPicker:true,
timeline: false,
animation: false,
geocoder:false
});
viewer.camera.flyTo({
destination : Cesium.Cartesian3.fromDegrees(-122.4106, 37.7908, 200000),
});
const viewModel = viewer.baseLayerPicker.viewModel;
const imageryProviders = [];
const imageryProviderNames = ["ArcGIS World Imagery", "ArcGIS World Hillshade", "Esri World Ocean"];
for (imageryProvider of viewModel.imageryProviderViewModels) {
if (imageryProviderNames.includes(imageryProvider.name)) {
imageryProviders.push(imageryProvider);
}
}
viewModel.imageryProviderViewModels = imageryProviders;
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];
</script>
</body>
</html>What's next?
Learn how to use additional ArcGIS location services in these tutorials:
