require(["esri/webscene/Slide"], (Slide) => { /* code goes here */ });
import Slide from "@arcgis/core/webscene/Slide.js";
esri/webscene/Slide
A slide stores a snapshot of several pre-set properties of the WebScene and SceneView, such as the basemap, viewpoint and visible layers. The visible layers may contain references (by Layer) to both operational layers from the scene as well as elevation layers from the ground, which affect the surface elevation.
Slides contain additional metadata such as a title, description and thumbnail which may be used to present the slide to the user in a user interface. Slides can be created, updated and applied to a SceneView. Additionally, slides can be stored as part of the WebScene.presentation.
- See also
// Create a slide from a view and apply it at a later time
Slide.createFrom(view).then(function(slide) {
// Add slide to the scene presentation
scene.presentation.slides.add(slide);
});
// At a later time
let firstSlide = scene.presentation.slides.at(0);
firstSlide.applyTo(view).then(function() {
// Slide has been successfully applied to the view
});Constructors
-
Create a new slide instance. Usually Slide.createFrom is used instead to create a new slide which stores a snapshot of the view.
Parameterproperties ObjectoptionalSee the properties for a list of all the properties that may be passed into the constructor.
Property Overview
| Name | Type | Summary | Class |
|---|---|---|---|
The basemap of the scene. | Slide | ||
The name of the class. | Accessor | ||
The description of the slide. | Slide | ||
Represents settings that affect the environment in which the WebScene is displayed (such as lighting). | Slide | ||
Ground properties for this slide. | Slide | ||
The visibility of a slide in a presentation. | Slide | ||
The unique id of a slide within the slides property of a Presentation. | Slide | ||
A data URI encoded thumbnail. | Slide | ||
The time extent of the scene. | Slide | ||
The title of the slide. | Slide | ||
The viewpoint of the slide. | Slide | ||
The visible layers of the scene. | Slide |
Property Details
-
The basemap of the scene. Only the base and reference layers of the basemap are stored in a slide.
This value can be an instance of Basemap or a value listed in these basemap id tables.
-
The description of the slide.
-
Represents settings that affect the environment in which the WebScene is displayed (such as lighting).
- Property
-
optionallighting SunLighting|VirtualLighting
Settings for defining the lighting of the scene.
-
Ground properties for this slide.
- Property
-
optionalopacity Number
Ground opacity
-
hidden
Propertyhidden BooleanArcGIS Maps SDK for JavaScript 4.28Slide since 4.0, hidden added at 4.28. -
The visibility of a slide in a presentation. A hidden slide should not show up when an application goes into presentation mode.
- Default Value:false
-
id
Propertyid String -
The unique id of a slide within the slides property of a Presentation.
-
A data URI encoded thumbnail.
-
timeExtent
PropertytimeExtent TimeExtentautocastSince: ArcGIS Maps SDK for JavaScript 4.30Slide since 4.0, timeExtent added at 4.30. -
The time extent of the scene.
-
The title of the slide.
-
The viewpoint of the slide. This acts like a bookmark, saving a predefined location or point of view from which to view the scene.
-
visibleLayers
PropertyvisibleLayers Collection<Accessor>autocast -
The visible layers of the scene. This is a collection of objects that stores references (by ID) to the scene layers and ground layers that are set as
visiblewhen a slide is applied to a SceneView.When assigning visible layers, the following types of values will be automatically casted:
- Array (or Collection) of Layer instances:
[layerInstance, layerInstance] - Array (or Collection) of Layer IDs:
["layer-1", "layer-2"]
The specification for each object in the collection is outlined in the table below.
- Properties
-
id String
The ID of a layer in the WebScene or Ground that is made
visiblein the SceneView when the slide is applied to the view.The service ids of the visible sublayers on the layer specified by the layer id. If this is not present, the visibilities of the sublayers are not changed when applying the slide.
Example// Update the visible layers to the second layer in the scene, and the // first elevation layer in the ground. slide.visibleLayers = [ { id: scene.layers.at(1).id } { id: scene.ground.layers.at(0).id } ]; // Equivalent using convenience autocasting slide.visibleLayers = [scene.layers.at(0), scene.ground.layers.at(0)]; - Array (or Collection) of Layer instances:
Method Overview
| Name | Return Type | Summary | Class |
|---|---|---|---|
Adds one or more handles which are to be tied to the lifecycle of the object. | Accessor | ||
Applies a slide's settings to a SceneView. | Slide | ||
Creates a deep clone of this object. | Slide | ||
Creates a slide from a SceneView, which may be added to the slides in the WebScene's presentation. | Slide | ||
Returns true if a named group of handles exist. | Accessor | ||
Removes a group of handles owned by the object. | Accessor | ||
Updates a slide from a WebScene's slides. | Slide |
Method Details
-
Inherited from Accessor
Since: ArcGIS Maps SDK for JavaScript 4.25Accessor since 4.0, addHandles added at 4.25. -
Adds one or more handles which are to be tied to the lifecycle of the object. The handles will be removed when the object is destroyed.
// Manually manage handles const handle = reactiveUtils.when( () => !view.updating, () => { wkidSelect.disabled = false; }, { once: true } ); this.addHandles(handle); // Destroy the object this.destroy();ParametershandleOrHandles WatchHandle|WatchHandle[]Handles marked for removal once the object is destroyed.
groupKey *optionalKey identifying the group to which the handles should be added. All the handles in the group can later be removed with Accessor.removeHandles(). If no key is provided the handles are added to a default group.
-
Applies a slide's settings to a SceneView.
Parametersview SceneViewThe SceneView the slide should be applied to.
optionsWithDefaults ObjectoptionalAnimation options. See properties below for object specifications.
options.animate BooleanoptionalDefault Value: trueIndicates whether to animate the slide transition.
options.speedFactor NumberoptionalDefault Value: 1Increases or decreases the animation speed by the specified factor. A speedFactor of 2 will make the animation twice as fast, while a speedFactor of 0.5 will make the animation half as fast. Setting the speed factor will automatically adapt the default maxDuration accordingly.
options.duration NumberoptionalSet the exact duration (in milliseconds) of the animation. Note that by default, animation duration is calculated based on the time required to reach the target at a constant speed. Setting duration overrides the speedFactor option. Note that the resulting duration is still limited to the maxDuration.
options.maxDuration NumberoptionalDefault Value: 8000The maximum allowed duration (in milliseconds) of the animation. The default maxDuration value takes the specified speedFactor into account.
options.easing String|EasingFunctionoptionalThe easing function to use for the animation. This may either be a preset (named) function, or a user specified function. Supported named presets are:
linear,in-cubic,out-cubic,in-out-cubic,in-expo,out-expo,in-out-expoBy default, animations that are less than 1000 ms use an out easing function; longer animations use an in-out function.
options.signal AbortSignaloptionalSignal object that can be used to abort the asynchronous task. Aborting will cause the slide animation to stop. The returned promise will be rejected with an Error named
AbortErrorwhen an abort is signaled. See also AbortController for more information on how to construct a controller that can be used to deliver abort signals.ReturnsExamples// Applies the slide's settings to the view, but does // not use animation when updating the viewpoint slide.applyTo(view, { animate: false });// Applies the slide's settings to the view, animates with a maximum // duration of 2 seconds. slide.applyTo(view, { maxDuration: 2000 });slide.applyTo(view, { maxDuration: 2000 }).then(function(){ //do something after applying the slide's settings to the view });
-
clone
Methodclone(){Slide} -
Creates a deep clone of this object. Note that the basemap instance is cloned, but the layers within the basemap are copied.
Returns
-
Creates a slide from a SceneView, which may be added to the slides in the WebScene's presentation. Updating the slide is asynchronous and a snapshot of the view is only complete once the returned promise has resolved.
ParametersSpecificationReturnsExamples// Creates a slide from the view and // adds it to the webscene Slide.createFrom(view).then(function(slide){ webscene.presentation.slides.add(slide); });// Create multiple slides from multiple viewpoints. view.goTo({ heading: 0 }, { animate: false }) .then(function() { // Create first slide at heading 0 (looking north) return Slide.createFrom(view); }) .then(function(slide){ // Slide has been captured, add to presentation webscene.presentation.slides.add(slide); // Change viewpoint to look east return view.goTo({ heading: 90 }, { animate: false }); }) .then(function() { // Capture second slide return Slide.createFrom(view); }) .then(function(slide) { // Add second slide to presentation webscene.presentation.slides.add(slide); });
-
hasHandles
InheritedMethodhasHandles(groupKey){Boolean}Inherited from AccessorSince: ArcGIS Maps SDK for JavaScript 4.25Accessor since 4.0, hasHandles added at 4.25. -
Returns true if a named group of handles exist.
ParametergroupKey *optionalA group key.
ReturnsType Description Boolean Returns trueif a named group of handles exist.Example// Remove a named group of handles if they exist. if (obj.hasHandles("watch-view-updates")) { obj.removeHandles("watch-view-updates"); }
-
Inherited from Accessor
Since: ArcGIS Maps SDK for JavaScript 4.25Accessor since 4.0, removeHandles added at 4.25. -
Removes a group of handles owned by the object.
ParametergroupKey *optionalA group key or an array or collection of group keys to remove.
Exampleobj.removeHandles(); // removes handles from default group obj.removeHandles("handle-group"); obj.removeHandles("other-handle-group");
-
Updates a slide from a WebScene's slides. Updating the slide is asynchronous and a snapshot of the view is only complete once the returned promise has resolved.
ParametersSpecificationReturns