SceneView

Allows the view to be partially or fully transparent when composited with the webpage elements behind it.

This property can only be set once at construction time. When alpha compositing is enabled, web scenes are less performant. It is important to set this property to true only when you need to apply transparency on the view.

Allows for adding analyses directly to the default analyses in the View.

Represents an ongoing view animation initialized by goTo(). You may watch this property to be notified of animation state changes.

A convenience property used for defining the breakpoints on the height and width of the view. The sizes specified here determine the values of the widthBreakpoint and heightBreakpoint properties depending on the view's size.

Setting up breakpoints can aid in responsive app design. It does this by watching width and height breakpoints. This is helpful as it removes the need for multiple @media calls. Instead of listening for the view's size and/or resizes property, you can set up a watch handler for either the widthBreakpoint or heightBreakpoint properties of the view.

The observation point from which the visible portion (or perspective) of the SceneView is determined. Contains properties including the elevation, tilt, and heading (in degrees) of the current view. Setting the camera immediately changes the current view. For animating the view, see goTo().

When set in the constructor, this property overrides the viewpoint, extent, center, scale, and zoom properties.

The camera property contains an internal reference which may be modified in the future. To persist or modify the camera, create a clone using camera.clone().

Represents the view's center point; when setting the center you may pass a Point instance or an array of numbers representing at longitude/latitude pair ([-100.4593, 36.9014]). Setting the center immediately changes the current view. For animating the view, see goTo().

If set in the constructor, this property will be ignored if the viewpoint, camera, or extent properties are also set in the constructor.

The center property contains an internal reference which may be modified in the future. To persist or modify the center, create a clone using center.clone().

Represents an optional clipping area used to define the visible extent of a local scene. The clipping area cannot have z-values.

If defined, only features that intersect the area will be displayed. The clipping area applies to all layers types, including the ground and the basemap. The clipping area will not increase the area beyond the union of the extents of all layers, including the ground and the basemap. To do so, add a GraphicsLayer with a custom fullExtent to the scene.

The clippingArea property only applies to local scenes.

The clippingArea property contains an internal reference which may be modified in the future. To persist or modify the clippingArea, create a clone using clippingArea.clone().

Specifies constraints for Camera tilt and altitude that may be applied to the SceneView. See the object specification table below for details.

Specifies various properties of the environment's visualization in the view. The SceneView will redraw automatically when any property of environment changes.

Modifying the lighting:

let view = new SceneView({
  map: map,
  container: "viewDiv"
});

// Set the light source position to reflect the current sun position at that time
view.environment.lighting = {
  type: "sun",
  date: new Date("January 1, 2022 12:00:00 UTC")
};

// Change the lighting to virtual, so that everything in the scene is nicely lit:
view.environment.lighting = {
  type: "virtual"
};

// Enable displaying shadows cast by the light source
view.environment.lighting.directShadowsEnabled = true;

Setting the background:

// Set a background color
let view = new SceneView({
  container: "viewDiv",
  map: map,
  environment: {
    background: {
      type: "color",
      color: [255, 252, 244, 1]
    },
    starsEnabled: false,
    atmosphereEnabled: false
  }
});

Changing the weather in the scene:

let view = new SceneView({
  container: "viewDiv",

  map: new Map({
    basemap: "satellite",
    ground: "world-elevation"
  }),
  environment: {
    weather: {
      type: "cloudy"   // autocasts as new CloudyWeather()
    }
  }
});

The extent represents the visible portion of a map within the view as an instance of Extent. Setting the extent immediately changes the view without animation. To animate the view, see goTo().

Rather than using extent to change the visible portion of the map in a SceneView, you should use camera since it easily allows you to define the heading, elevation and tilt of the observation point from which the view's perspective is created.

When set in the constructor, this property overrides the center, scale, and zoom properties. This property will be ignored if the viewpoint or camera are also set in the constructor.

The extent property contains an internal reference which may be modified in the future. To persist or modify the extent, create a clone using extent.clone().

Applies a display filter on the view for a specific set of floor levels. It can filter the scene display on floor-aware layers by zero or more level IDs.

The view for the ground of the map.

A convenience property indicating the general size of the view's height. This value is determined based on where the view's height falls in the ranges defined in the breakpoints property. See the table below for a list of possible values. Use the breakpoints property to override the default thresholds.

Options for configuring the highlight. Use the highlight method on the appropriate LayerView to highlight a feature. With version 4.19, highlighting a feature influences the shadow of the feature as well. By default, the shadow of the highlighted feature is displayed in a darker shade.

A convenience property indicating the view's orientation. See the table below for a list of possible values.

This property contains performance information in a SceneView like global memory usage and additional details for layers about memory consumption and number of features.

A Popup object that displays general content or attributes from layers in the map.

By default, the popup property is an empty object that allows you to set the popup options. A Popup instance is automatically created and assigned to the view's popup when the user clicks on the view and popupEnabled is true, when the view.openPopup() method is called, or when some widgets need the popup, such as Search. If popup is null, the popup instance will not be created.

Controls whether the popup opens when users click on the view.

When true, a Popup instance is created and assigned to view.popup the first time the user clicks on the view, unless popup is null. The popup then processes the click event.

When false, the click event is ignored and popup is not created for features but will open for other scenarios that use a popup, such as displaying Search results.

SceneView can draw scenes in three different quality modes: high, medium and low.

The low quality profile significantly increases performance on slower browsers and devices by reducing the memory limit to 200MB. The memory limit impacts the SceneLayer's levels of detail and the number of features that are displayed in a FeatureLayer. Furthermore, low quality profile impacts visual quality by reducing map resolution, influencing atmospheric effects and disabling anti-aliasing (edge smoothing).

The high and medium quality profiles differ in the maximum amount of memory which the view is allowed to use (750MB for medium quality and 1.5GB for high quality). A higher memory limit improves quality in complex web scenes with many layers, but can have a negative impact on drawing performance and stability.

Physically based rendering (PBR) materials are enabled on all 3D objects in a SceneView in "high" quality mode. However, if a GLTF model or a 3D Object SceneLayer has PBR settings defined on the material, then these will be rendered in all quality modes.

In "high" quality mode, on a HiDPI display, graphics are rendered at a higher resolution depending on the browser's devicePixelRatio property.

SceneView performance depends on the amount of data being displayed, the quality profile and the device type. SceneView can be used to inspect the memory consumption and the number of features that are displayed for a specific scene. The SceneView memory resources sample shows how this property can be used.

The default value is based on the detected browser:

• low for mobile devices
• medium for any other browser

Represents an approximation of the map scale at the center of the view. Setting the scale immediately changes the current view. For animating the view, see goTo().

When set in the constructor, this property overrides the zoom property. This property will be ignored if the viewpoint, camera, or extent properties are also set in the constructor.

The spatial reference of the view.

This indicates the projected or geographic coordinate system used to locate geographic features in the map. In a SceneView the following coordinate systems are available.

The spatial reference can either be set explicitly or automatically derived from the following:

• If the map is a WebScene instance, the WebScene.initialViewProperties.spatialReference is used.
• Otherwise, the spatial reference is derived from the first layer that loads in this order:
  • map.basemap.baseLayer
  • map.layers
  • map.ground.layers

In case the spatial reference is determined from the map layers or the ground layers and they are in WGS84 or Web Mercator, the following rule also applies: the first layer that does not support server side reprojection (tiled layers) determines the spatial reference of the view and all the other layers are reprojected.

If no spatial reference can be derived, then the view does not resolve and the ready property is false.

The tiling scheme information of the view.

The type of the view.

The viewing mode (local or global). Global scenes render the earth as a sphere. Local scenes render the earth on a flat plane and allow for navigation and feature display in a localized or clipped area. Users may also navigate the camera of a local scene below the surface of a basemap.

Value	Example	Description
global		Global scenes allow the entire globe to render in the view, showing the curvature of the earth.
local		Local scenes render the earth on a flat surface. They can be constrained to only show a "local" area by setting the clippingArea property. Local scenes also allow for displaying and exploring data that would otherwise be hidden by the surface of the earth.

Depending on the viewing mode different supported coordinate systems are available.

Represents the current view as a Viewpoint or point of observation on the view. In SceneViews, camera should be used in favor of viewpoint for watching or changing the point of view. Setting the viewpoint immediately changes the current view. For animating the view, see goTo().

When set in the constructor, this property overrides the extent, center, scale, and zoom properties. This property will be ignored if camera is also set in the constructor.

The viewpoint property contains an internal reference which may be modified in the future. To persist or modify the viewpoint, create a clone using viewpoint.clone().

A convenience property indicating the general size of the view's width. This value is determined based on where the view's width falls in the ranges defined in the breakpoints property. See the table below for a list of possible values. Use the breakpoints property to override the default thresholds.

Represents the level of detail (LOD) at the center of the view. Setting the zoom immediately changes the current view. For animating the view, see goTo().

Setting this property in conjunction with center is a convenient way to set the initial extent of the view.

If set in the constructor, this property will be ignored if the viewpoint, camera, extent, or scale properties are also set in the constructor.

Animation options for the goTo() method. See properties below for parameter specifications.

The target location/viewpoint to animate to in the goTo() method. A two or three-element array of numbers represents the [x,y,z] coordinates to center the view on. When using an object for the target, use the properties in the table below.

Object specification for the graphic hit result returned in HitTestResult of the hitTest() method. If the graphics have non-draped IconSymbol3DLayer symbology, then only the first graphic will be returned from the hitTest. See the table below for the specification of each property in this object.

Object specification for the result of the hitTest() method.

A layer or graphic to be used in toMap and hitTest filter options.

Object specification for the media hit results returned from MediaLayer in HitTestResult of the hitTest() method. See the table below for the specification of each property in this object.

Object specification for the route hit results returned from RouteLayer in HitTestResult of the hitTest() method. See the table below for the specification of each property in this object.

An object representing a point on the screen.

Object returned when takeScreenshot() promise resolves:

Object specification for the result returned in HitTestResult of the hitTest() method.