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 image tiles from the basemap styles service to create an Imageryelevation service to create a Terrain
In this tutorial, you customize the Base
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
Change line Change line
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
74
75
76
<!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.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 , #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 >
ye
What's next? Learn how to use additional ArcGIS location services in these tutorials:
