Learn how to add map tiles from a map tile service to a scene.
Map tiles are a type of tile data that are stored in an map tile service. They typically display raster imagery, such as aerial photography, but can also be used to display other data. You can create an map tile service by publishing a feature service hosted in ArcGIS.
In this tutorial, you use CesiumJS to display the Kilauea Volcano Shortwave Infrared map tile layer.
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: Add a map 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:
