The web scene is the core element of 3D mapping across the ArcGIS platform. It defines the content, style, environment, and slides of your scene and it can be shared across multiple ArcGIS web and desktop applications. Web scenes can be created, published, and consumed in ArcGIS Pro and ArcGIS Online with the Scene Viewer. The web scene is saved as a JSON document that can be consumed by the ArcGIS API for JavaScript via the WebScene class to easily create compelling 3D applications. The JSON document is written according to the web scene specification.
Although you can easily create your own scenes, there are thousands of publically available web scenes in ArcGIS Online that you can use to get started with the API. You may modify or add new content to these scenes.
To load a WebScene into a SceneView, you need to simply reference the ID of the web scene item in ArcGIS Online via the portalItem property of this class.
var scene = new WebScene({
// autocasts as esri/portal/PortalItem
portalItem: {
id: "affa021c51944b5694132b2d61fe1057" // ID of the WebScene on arcgis.com
}
});
Then you must reference the WebScene instance in the map property of a SceneView.
var view = new SceneView({
map: scene, // The WebScene instance created above
container: "viewDiv"
});
This will start loading all layers and scene options into the 3D SceneView. The WebScene is loaded when the WebScene Promise gets resolved, while all Layer and Basemap resources are done loading once the SceneView promise is resolved.
scene.then(function() {
// All layers and the basemap have been created
});
view.then(function() {
// All layer and basemap resources have been loaded and are ready to be displayed
});
The WebScene defines the content of your scene and how the scene looks when it is loaded in your application. There are several common properties of a web scene that you will likely interact with when using this class:
- Layers: defines the content and styling of the web scene, as well as popups, labels, legend and other settings.
- Basemap: defines the basemap layers of the web scene.
- Ground: defines the elevation layers of the web scene.
- Presentation: contains the web scene slides.
- InitialViewProperties
- Environment: configures lighting, shadows and atmosphere of the scene.
- Viewpoint: configures the initial viewpoint.
- ViewingMode: defines if the web scene is global or local.
For more information on properties of a web scene, please consult the web scene specification.
There are two types of web scenes: global
or local
. Global scenes render the earth as a sphere while Local scenes render the earth on a flat plane. Global web scenes can be created with a WebMercator or GCS WGS84 spatial reference, while local web scenes can be created with any projected coordinate system. Read the ArcGIS Online help to learn more about choosing global or local scenes.
Slides store a snapshot of a visualization state of the scene that can be re-applied to the scene at a later time. Slides contain properties for viewpoint, layer visibilities, basemap and environment (as well as a title and thumbnail) so that users of a 3D application can easily navigate the scene and accurately recreate a stored view of that scene.
Web scenes can be saved to ArcGIS Online or Portal using saveAs() or save(). Define the portal and once it is loaded, save the web scene.
var portal = new Portal({
url: "http://myportal.arcgis.com/", // the url of the portal
authMode: "immediate" // user authenticates by signing in when the Portal is loaded
});
// once the portal is loaded save the web scene to the portal as a new web scene
portal.load().then(function() {
webscene.saveAs({
title: "My Scene",
portal: portal
})
.then(function() {
console.log("Scene was saved");
})
.otherwise(function(err) {
console.log(err);
});
})
It's important to note that GraphicsLayer, ImageryLayer and StreamLayer can't be saved to a web scene. A cached image service can be saved to a web scene, by declaring it as a TileLayer. An OpenStreetMapLayer can be saved as a baseLayer. For more information on types of layers that can be saved in a web scene, see the web scene specification.
Constructors
new WebScene(properties)
properties Object See the properties for a list of all the properties that may be passed into the constructor. |
// Typical usage
var map = new WebScene({
portalItem: {
id: "affa021c51944b5694132b2d61fe1057"
}
});
Property Overview
Name | Type | Summary | |
---|---|---|---|
Collection | A flat collection of all the layers in the map. more details | more details | |
Basemap | Specifies a basemap for the map. more details | more details | |
Extent | This property only applies to local scenes. more details | more details | |
Boolean | This property only applies to local scenes. more details | more details | |
String | The name of the class. more details | more details | |
Ground | Specifies the surface properties for the map. more details | more details | |
InitialViewProperties | The initial view of the WebScene. more details | more details | |
Collection | A collection of operational layers. more details | more details | |
Boolean | Indicates whether the instance has loaded. more details | more details | |
Error | The Error object returned if an error occurred while loading. more details | more details | |
String | Represents the status of a load operation. more details | more details | |
PortalItem | The portal item from which the WebScene is loaded. more details | more details | |
Presentation | Provides a Collection of slides that act as bookmarks for saving predefined viewpoints and visible layers. more details | more details | |
Object | The version of the source document from which the WebScene was read. more details | more details |
Property Details
allLayersCollectionreadonly
A flat collection of all the layers in the map. This collection contains basemap layers, operational layers and ground layers. Group Layers and their children layers are also part of this collection. Reference layers in the basemap will always be included at the end of the collection.
Layers should not be added directly to this collection. They must only be added via the layers, basemap or ground properties.
Example:// Find a layer with title "US Counties" var foundLayer = map.allLayers.find(function(layer) { return layer.title === "US Counties"; }); // Create a filtered collection of the non-group layers var nonGroupLayers = map.allLayers.filter(function(layer) { return !foundLayer.layers; }); // Listen for any layer being added or removed in the Map map.allLayers.on("change", function(event) { console.log("Layer added: ", event.added); console.log("Layer removed: ", event.removed); console.log("Layer moved: ", event.moved); });
Specifies a basemap for the map. The basemap is a set of tile layers that give geographic context to the MapView or SceneView and the other operational layers in the map.
This value can be an instance of Basemap or one of the strings listed in the table below.
Value Description streets satellite hybrid topo gray dark-gray oceans national-geographic terrain osm dark-gray-vector gray-vector streets-vector topo-vector streets-night-vector streets-relief-vector streets-navigation-vector Example:// Set the basemap in the constructor var map = new Map({ basemap: "streets" }); // Set the basemap after the map instance is created map.basemap = "topo";
This property only applies to local scenes. Represents an optional clipping area used to define the bounds or Extent of a local scene. If defined, only data (including the basemap) within the area will be displayed.
Set the clippingEnabled property to
true
to apply the specified clippingArea to the view.- See also:
clippingEnabledBoolean
This property only applies to local scenes. Determines whether clipping using the clippingArea is enabled.
- See also:
Default Value: falsedeclaredClassStringreadonly
The name of the class. The declared class name is formatted as
esri.folder.className
.Specifies the surface properties for the map. This property is only relevant when adding the map to a 3D SceneView. It renders the terrain or topographical variations in the real world on the map's surface with a collection of ElevationLayer.
This value can be an instance of Ground, or the string
world-elevation
for a default instance of ground using the World Elevation Service.- See also:
Examples:// Use the world elevation service var map = new Map({ basemap: "topo", ground: "world-elevation" });
// Create a map with the world elevation layer overlaid by a custom elevation layer var worldElevation = ElevationLayer({ url: "//elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer" }); var customElevation = ElevationLayer({ url: "http://my.server.com/arcgis/rest/service/MyElevationService/ImageServer" }); var map = new Map({ basemap: "topo", ground: new Ground({ layers: [ worldElevation, customElevation ] }) });
initialViewPropertiesInitialViewProperties autocast
The initial view of the WebScene. This object contains properties such as viewpoint, spatialReference, viewingMode, and environment that should be applied to the SceneView when the scene loads.
layersCollection autocast
A collection of operational layers. This property only contains interactive operational layers, such as FeatureLayers, WebTileLayers and GraphicsLayers that may be queried, assigned different renderers, analyzed, etc. It does not include basemaps.
A layer is a collection of one or more features, or graphics, that represent real-world phenomena. Each feature contains a symbol and geographic data that allows it to be rendered on the map as a graphic with spatial context. Features within the layer may also contain data attributes that provide additional information that may be viewed in popup windows and used for rendering the layer.
Layers may be added in the constructor, with the add() or addMany() methods, or directly to the layers collection using add() or addMany().
A layer may only be added to one parent. Adding the same layer to multiple Maps or GroupLayers is not possible. If you attempt to do so, the layer will automatically be removed from its current parent and placed in the new parent.
var layer = new GraphicsLayer(); // The layer belongs to map1 map1.layers.add(layer); // The layer now belongs to map2 // and implicitly does: map1.layers.remove(layer) map2.layers.add(layer);
Example:// Add layers in the constructor of Map using an array var fl = new FeatureLayer(url); var gl = new GraphicsLayer(); var map = new Map({ layers: [fl, gl] }); // Add layers using add() map.addMany([fl, gl]); // Add layers using layers collection map.layers.addMany([fl, gl]);
loadedBooleanreadonly
Indicates whether the instance has loaded. When
true
, the properties of the object can be accessed. A WebScene is considered loaded when its layers and basemap are fully created, but not yet loaded.Default Value: falseloadErrorErrorreadonly
The Error object returned if an error occurred while loading.
Default Value: nullloadStatusStringreadonly
Represents the status of a load operation.
Value Description not-loaded The object's resources have not loaded. loading The object's resources are currently loading. loaded The object's resources have loaded without errors. failed The object's resources failed to load. See loadError for more details. Default Value: not-loadedportalItemPortalItem autocast
The portal item from which the WebScene is loaded.
presentationPresentation autocast
Provides a Collection of slides that act as bookmarks for saving predefined viewpoints and visible layers.
- See also:
sourceVersionObjectreadonly
Since: ArcGIS API for JavaScript 4.1The version of the source document from which the WebScene was read. The WebScene must be version 1.x to load into an app.
Method Overview
Name | Return Type | Summary | |
---|---|---|---|
Adds a layer to the layers collection. more details | more details | ||
Adds a layer or an array of layers to the layers collection. more details | more details | ||
Promise | An instance of this class is a Promise. more details | more details | |
Layer | Returns a layer based on the given layer id. more details | more details | |
* | Creates a new instance of this class and initializes it with values from a JSON object generated from a product in the ArcGIS platform. more details | more details | |
Boolean | An instance of this class is a Promise. more details | more details | |
Boolean | An instance of this class is a Promise. more details | more details | |
Boolean | An instance of this class is a Promise. more details | more details | |
Promise | Triggers the loading of the WebScene instance. more details | more details | |
Promise | An instance of this class is a Promise. more details | more details | |
Layer | Removes the specified layer from the layers collection. more details | more details | |
Layer[] | Removes all layers. more details | more details | |
Layer[] | Removes the specified layers. more details | more details | |
Layer | Changes the layer order. more details | more details | |
Promise | Saves the webscene to its associated portal item. more details | more details | |
Promise | Saves the webscene to a new portal item. more details | more details | |
Promise | An instance of this class is a Promise. more details | more details | |
Object | Converts an instance of this class to its ArcGIS Portal JSON representation. more details | more details | |
Update properties of the WebScene related to the view. more details | more details |
Method Details
add(layers, index)inherited
Adds a layer to the layers collection.
Parameters:layers LayerLayer to be added to the layers collection.
optionalindex NumberA layer can be added at a specified index in the layers collection. If no index is specified or the index specified is greater than the current number of layers, the layer is automatically appended to the list of layers in the layers collection and the index is normalized.
addMany(layers, index)inherited
Adds a layer or an array of layers to the layers collection.
Parameters:layers Layer[]Layer(s) to be added to the layers collection.
optionalindex NumberA layer can be added at a specified index in the layers collection. If no index is specified or the index specified is greater than the current number of layers, the layer is automatically appended to the list of layers in the layers collection and the index is normalized.
always(callbackOrErrback){Promise}
An instance of this class is a Promise. Therefore
always()
may be used to execute a function if the promise is rejected or resolved. The input function will always execute no matter the response. For more information about promises, see the Working with Promises guide page.Parameter:optionalcallbackOrErrback FunctionThe function to execute when the promise is rejected or resolved.
Returns:Type Description Promise Returns a new promise for the result of callbackOrErrback
.Example:// Although this example uses MapView, any class instance that is a promise may use always() in the same way var view = new MapView(); view.always(function(){ // This function will always execute whether or not the promise is resolved or rejected });
Returns a layer based on the given layer id.
Parameter:layerId StringThe ID assigned to the layer.
Returns:Type Description Layer Returns the requested layer object. fromJSON(json){*}static
Creates a new instance of this class and initializes it with values from a JSON object generated from a product in the ArcGIS platform. The object passed into the input
json
parameter often comes from a response to a query operation in the REST API or a toJSON() method from another ArcGIS product. See the Using fromJSON() topic in the Guide for details and examples of when and how to use this function.Parameter:json ObjectA JSON representation of the instance in the ArcGIS format. See the web scene specification for more detailed information on serializing web scenes to JSON.
Returns:Type Description * Returns a new instance of this class. Example:// Retrieve a WebScene JSON by url and deserialize it into a WebScene API instance require(["esri/request", "esri/WebScene"], function(esriRequest, WebScene) { esriRequest("http://domain/url/to/webscene.json").then(function(json) { var scene = WebScene.fromJSON(json); var view = new SceneView({ map: scene, container: "viewDiv" }); }); });
isFulfilled(){Boolean}
An instance of this class is a Promise. Therefore
isFulfilled()
may be used to verify if the promise is fulfilled (either resolved or rejected). If it is fulfilled,true
will be returned. See the Working with Promises guide page for more information about promises.Returns:Type Description Boolean Indicates whether the promise has been fulfilled (either resolved or rejected). isRejected(){Boolean}
An instance of this class is a Promise. Therefore
isRejected()
may be used to verify if the promise is rejected. If it is rejected,true
will be returned. See the Working with Promises guide page for more information about promises.Returns:Type Description Boolean Indicates whether the promise has been rejected. isResolved(){Boolean}
An instance of this class is a Promise. Therefore
isResolved()
may be used to verify if the promise is resolved. If it is resolved,true
will be returned. See the Working with Promises guide page for more information about promises.Returns:Type Description Boolean Indicates whether the promise has been resolved. load(){Promise}
Triggers the loading of the WebScene instance.
A WebScene is considered loaded when its operational layers, basemap and ground are fully created. When created with a portalItem,
load()
will first fetch its data to create the content, otherwise it resolves immediately.The SceneView automatically calls the
load()
method when a WebScene instance is added to its map property so it can display in the view and load each individual layer. If the WebScene is used outside of a view, for example to preload it, you must callload()
explicitly to interact with its resources.Returns:Type Description Promise Resolves when the WebScene is loaded. - See also:
Example:// programmatically load all the layers require([ "esri/WebScene", "dojo/promise/all" ], function( WebScene, all ) { var scene = new WebScene({ portalItem: { id: "affa021c51944b5694132b2d61fe1057" } }); scene.load() .then(function() { // load the basemap to get its layers created return scene.basemap.load(); }) .then(function() { // grab all the layers and load them var allLayers = scene.allLayers; var promises = allLayers.map(function(layer) { return layer.load(); }); return all(promises.toArray()); }) .then(function(layers) { // each layer load promise resolves with the layer console.log("all " + layers.length + " layers loaded"); }) .otherwise(function(error) { console.error(error); }); });
otherwise(errback){Promise}
An instance of this class is a Promise. Use
otherwise()
to call a function once the promise is rejected.Parameter:optionalerrback FunctionThe function to execute when the promise fails.
Returns:Type Description Promise Returns a new promise for the result of errback
.Example:// Although this example uses MapView, any class instance that is a promise may use otherwise() in the same way var view = new MapView(); view.otherwise(function(error){ // This function will execute if the promise is rejected due to an error });
Removes the specified layer from the layers collection.
Parameter:layer LayerLayer to remove from the layers collection.
Returns:Type Description Layer Returns the layer removed from the layers collection. Removes all layers.
Returns:Type Description Layer[] Returns the layers removed from the layers collection. Removes the specified layers.
Parameter:layers Layer[]Array of layers to remove from the layers collection.
Returns:Type Description Layer[] Returns the layers removed from the layers collection. Changes the layer order. The first layer added is always the base layer, even if its order is changed.
Parameters:layer LayerThe layer to be moved.
index NumberThe index location for placing the layer. The bottom-most layer has an index of
0
.Returns:Type Description Layer Returns the layer that was moved. save(options){Promise}
Since: ArcGIS API for JavaScript 4.1Saves the webscene to its associated portal item. The portal item to save to must already exist and be valid. This is a convenience method that will use PortalItem to store the webscene in the item. The web scene is saved according to web scene specification standards.
Use updateFrom to store the current view properties in the webscene before saving it.
Note that this saves the webscene to its existing item. Depending on how the scene is shared, users that do not own the scene may modify it. To save an existing scene as a new item owned by the user signed into the portal instance, use saveAs().
The webscene will be automatically loaded if it is not already before saving.
Parameters:optionaloptions ObjectAdditional options.
Specification:optionalignoreUnsupported BooleanWhen
true
, the scene will save even if it contains unsupported content (layers, renderers, symbols). Any content that is not supported will not be saved and the scene may appear different when reloaded from its portal item.Returns:Type Description Promise A promise that resolves with the PortalItem instance when the item has successfully been saved, or rejects otherwise. - See also:
saveAs(portalItem, options){Promise}
Since: ArcGIS API for JavaScript 4.1Saves the webscene to a new portal item. If saving has completed successfully, then the saved portal item will be set in the portalItem property of the WebScene. This is a convenience method that will create a new PortalItem and use PortalUser.addItem() to store the webscene in a Portal.
Use updateFrom to store the current view properties in the webscene before saving it.
Note that this always saves the webscene as a new portal item owned by the user performing the edits and executing the
saveAs()
method. If you want to modify the existing item without changing its ownership use save().The webscene will be automatically loaded if it is not already before saving.
Parameters:portalItem PortalItemdesired properties of the portal item (autocasted) to save the scene to.
var scene = new Webscene(); scene.saveAs({ // autocasts as esri/portal/PortalItem title: "New WebScene" });
optionaloptions Objectadditional save options.
Specification:optionalfolder PortalFolderthe folder in which to save the item.
optionalignoreUnsupported Booleanallow the scene to be saved even in the case it contains unsupported content (layers, renderers, symbols). Any content that is not supported will not be saved and the scene may appear different when reloaded from its portal item.
Returns:Type Description Promise a promise which resolves with the PortalItem instance when the item has successfully been saved, or rejects otherwise. - See also:
then(callback, errback, progback){Promise}
An instance of this class is a Promise. Therefore
then()
may be leveraged once an instance of the class is created. This method takes two input parameters: acallback
function and anerrback
function. Thecallback
executes when the promise resolves (when the instance of the class loads). Theerrback
executes if the promise fails. See the Working with Promises guide page for additional details.Parameters:optionalcallback FunctionThe function to call when the promise resolves.
optionalerrback FunctionThe function to execute when the promise fails.
optionalprogback FunctionThe function to invoke when the promise emits a progress update.
Returns:Type Description Promise Returns a new promise for the result of callback
that may be used to chain additional functions.Example:// Although this example uses MapView, any class instance that is a promise may use then() in the same way var view = new MapView(); view.then(function(){ // This function will execute once the promise is resolved }, function(error){ // This function will execute if the promise is rejected due to an error });
toJSON(){Object}
Converts an instance of this class to its ArcGIS Portal JSON representation. See the Using fromJSON() topic in the Guide and the web scene specification for more information.
Returns:Type Description Object The ArcGIS Portal JSON representation of an instance of this class. updateFrom(view, options)
Update properties of the WebScene related to the view. This should usually be called just before saving a scene. The following properties are updated from the view:
initialViewProperties.spatialReference
initialViewProperties.viewingMode
clippingArea
Depending on the provided options, the following properties are also updated:
initialViewProperties.environment
initialViewProperties.viewpoint
Parameters:view SceneViewthe view to update from.
optionaloptions Objectupdate options.
Specification:optionalenvironmentExcluded Booleanupdate the initial environment from the view, defaults to false.
optionalviewpointExcluded Booleanupdate the initial viewpoint from the view, defaults to false.