Learn how to add image tiles from an image tile service to a scene .
Image tiles are a type of tile data that are stored in an image tile service . They typically display imagery, such as aerial photography, but can also be used to display other data. You can create an image tile service by publishing a feature service hosted in ArcGIS.
In this tutorial, you use CesiumJS to display the Kilauea Volcano Shortwave Infrared image tile layer.
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
<!DOCTYPE html >
< html lang = "en" >
< head >
< meta charset = "utf-8" />
< title > CesiumJS: Add an image tile layer </ title >
<!-- CesiumJS -->
< 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(),
timeline : false ,
animation : false ,
geocoder : false
});
viewer.camera.setView({
destination : Cesium.Cartesian3.fromDegrees(- 154.9051879 , 19.451828 , 22000 ),
})
const santaMonicaParcels = Cesium.ArcGisMapServerImageryProvider.fromUrl( "https://tiles.arcgis.com/tiles/P3ePLMYs2RVChkJx/arcgis/rest/services/WV03_Kilauea_20180519_ShortwaveInfrared/MapServer" , {
token :apiKey
});
viewer.scene.imageryLayers.add(
Cesium.ImageryLayer.fromProviderAsync(santaMonicaParcels)
);
</ script >
</ body >
</ html >
What's next? Learn how to use additional ArcGIS location services in these tutorials:
