If you have an exisiting CesiumJS application, it is easy to update your application to use ArcGIS location services.
Base layers
You can replace Cesium's default Bing Maps Imagery and Cesium World Terrain layers with an ArcGIS map tile service and ArcGIS elevation layer, respectively.
Examples
Bing Maps Imagery to ArcGIS image service
This example shows how to replace Cesium's Bing Maps Imagery with the ArcGIS:Imagery map tile service.
-
Get an access token using API key credentials or implement another type of authentication in your application.
-
Select a map tile service from the basemap layers page and copy the service URL.
Use dark colors for code blocks const imageTileURL = "https://basemaps-api.arcgis.com/arcgis/rest/services/styles/ArcGIS:Imagery:Standard?type=style";
-
Create an
ArcGIS
that references the copied service URL. Set theMap Server Imagery Provider token
parameter to your API key or OAuth2 access token.Use dark colors for code blocks const imageTileURL = "https://basemaps-api.arcgis.com/arcgis/rest/services/styles/ArcGIS:Imagery:Standard?type=style"; const arcGISImageTileProvider = new Cesium.ArcGisMapServerImageryProvider({ url : imageTileURL, token: accessToken });
-
Set the
imagery
of theProvider Viewer
to the new ArcGIS imagery provider.Use dark colors for code blocks const imageTileURL = "https://basemaps-api.arcgis.com/arcgis/rest/services/styles/ArcGIS:Imagery:Standard?type=style"; const arcGISImageTileProvider = new Cesium.ArcGisMapServerImageryProvider({ url : imageTileURL, token: accessToken }); const elevationURL = "https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer" const viewer = new Cesium.Viewer("cesiumContainer", { imageryProvider: arcGISImageTileProvider, });
Cesium World Terrain to ArcGIS elevation service
This example shows how to replace Cesium World Terrain with an ArcGIS elevation service.
-
Remove the Cesium terrain provider from the
Viewer
.Use dark colors for code blocks const viewer = new Cesium.Viewer("cesiumContainer", { terrainProvider: Cesium.createWorldTerrain(), });
-
Copy the URL of the ArcGIS World Elevation service.
Use dark colors for code blocks const elevationURL = "https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer"
-
Create a new
ArcGIS
that references the copied service URL. Set theTiled Elevation Terrain Provider token
parameter to your ArcGIS API key or OAuth2 access token.Use dark colors for code blocks const elevationURL = "https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer" const terrainProvider = new Cesium.ArcGISTiledElevationTerrainProvider({ url : elevationURL, token : accessToken });
-
Set the
terrain
of theProvider Viewer
to the new ArcGIS terrain provider.Use dark colors for code blocks const elevationURL = "https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer" const terrainProvider = new Cesium.ArcGISTiledElevationTerrainProvider({ url : elevationURL, token : accessToken }); const viewer = new Cesium.Viewer("cesiumContainer", { terrainProvider: arcGISTerrainProvider, });
Data services
You can securely publish your data in ArcGIS to create hosted layers. Supported file formats include GeoJSON, CSV, scene layer package (.slpk), and tile package (.tpk).
You can display hosted layers in CesiumJS with the following classes:
- Feature layers:
Geo
.Json Data Source - Scene layers:
I3
.S Data Provider - Map tile layers:
ArcGis
Map Server Imagery Provider
Example
GeoJSON to hosted feature layer
This example shows how to convert GeoJSON stored in Cesium ion to a hosted feature layer stored in ArcGIS.
-
Remove the existing
Geo
from your code.Json Data Source Use dark colors for code blocks Cesium.IonResource.fromAssetId(1556114).then((asset) => { const layer = Cesium.GeoJsonDataSource.load(asset); viewer.dataSources.add(layer); })
-
Go to the Cesium ion dashboard > Assets. Select the GeoJSON asset that you want to re-host as a feature layer. In the right panel, click Source Files > Download.
-
Upload your GeoJSON file to your portal and convert it to a hosted feature layer. To learn how to do this, go to the Import data as a feature layer tutorial.
-
Use ArcGIS REST JS to query the new feature service in your CesiumJS application. Format the response as GeoJSON.
Use dark colors for code blocks const authentication = arcgisRest.ApiKeyManager.fromKey(accessToken); const layerURL = "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trailheads/FeatureServer/0"; arcgisRest.queryFeatures({ url: layerURL, authentication, f:"geojson" })
-
Add the response from the ArcGIS REST JS request to the viewer as a new
Geo
.Json Data Source Use dark colors for code blocks const authentication = arcgisRest.ApiKeyManager.fromKey(accessToken); const layerURL = "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trailheads/FeatureServer/0"; arcgisRest.queryFeatures({ url: layerURL, authentication, f:"geojson" }) .then(response => { const layer = Cesium.GeoJsonDataSource.load(response) viewer.dataSources.add(layer); })
Geocoding
The ArcGIS geocoding service provides the ability to find addresses, businesses, and places around the world.
Example
Cesium Geocoding to ArcGIS Geocoding
This example shows how to disable the Cesium Geocoder and add ArcGIS geocoding to your application.
-
Disable the Cesium
geocoder
in the viewer. -
Create a function that uses the ArcGIS REST JS
geocode
function to make a request to the geocoding service. -
Create an HTML input and add an event listener to call the REST JS function when the user clicks a button.
-
Display the results from the geocoding service as a Cesium
Entity
.