SceneView - visibleArea

Explore in the sandboxView live

This sample shows how to use the visibleArea property in a 3D SceneView. The visibleArea is the visible portion of a map within the view as an instance of a Polygon, as shown in the top-right secondary SceneView. This Polygon is thus a 2D approximation of the 3D frustum projected onto the ground surface. The sample covers two scenarios:

Query a FeatureLayerView within the visibleArea
Visualize the visibleArea

Query a FeatureLayerView within the visibleArea

The following code snippet demonstrates how to use the visibleArea geometry to query a FeatureLayerView and retrieve features within the current SceneView using the queryFeatures method.

Use dark colors for code blocksCopy
                // Query the treeLayerView to get all the trees inside the visibleArea
                const featureSet = await treeLayerView.queryFeatures({
                  geometry: view.visibleArea,
                  returnGeometry: false,
                  outFields: ["commonname"]
                });

This ensures that only features currently in the visibleArea are considered and the results of the FeatureLayerView query are further processed to count the number of trees belonging to different categories within the visible area. This information is then used to update indicators at the bottom of the application, providing real-time feedback about the distribution of tree types in their current view.

Visualize the visibleArea

The sample provides also a visual representation of the visibleArea polygon by utilizing a secondary SceneView. In fact, it renders the visibleArea polygon on the ground, offering a clear visual indication of the area currently visible to the user. Additionally, when the 3D mode is toggled,the mini-view shows the lines connecting the camera position to the vertices of the visibleArea polygon, effectively outlining the 3D frustum.

Use dark colors for code blocksCopy
              let { visibleArea } = view;
              const visibleAreaGraphics = getVisibleAreaGraphics(visibleArea);
              visibleAreaGraphicsLayer.addMany(visibleAreaGraphics);

Use dark colors for code blocksCopy
            // Create the Polygon3D Symbol for the visibleArea polygon
            const visibleAreaSymbol = {
              type: "polygon-3d",
              symbolLayers: [
                {
                  type: "fill",
                  material: { color: "white" },
                  outline: { color: "white" },
                  pattern: {
                    type: "style",
                    style: "forward-diagonal"
                  }
                }
              ]
            };

            // Create the graphics for the visibleArea vertices
            function getVisibleAreaGraphics(visibleArea) {
              const parts = visibleArea.rings.map(
                (ring) => new Polygon({ rings: [ring], spatialReference: visibleArea.spatialReference })
              );

              return parts.map((part) => new Graphic({ geometry: part, symbol: visibleAreaSymbol }));
            }

Similar to the feature query above-mentioned, in response to changes in the main view's visibleArea, we use reactiveUtils when to dynamically update the visualization: we recreate the frustum with the new visibleArea polygon in the supportView and we also update the trees indicators at the bottom.

Use dark colors for code blocksCopy
            // Every time the visibleArea of the view change, we update both the supportView and the trees indicators
            reactiveUtils.when(
              () => view.visibleArea,
              () => {
                // Debounce the queries to the tree featureLayerView to avoid multiple requests
                debounceQueryTrees().catch((error) => {
                  if (error.name === "AbortError") {
                    return;
                  }
                  console.error(error);
                });
                // Update the supportView
                updateSceneView();
              },
              {
                initial: true
              }
            );

Highlight SceneLayer

FeatureLayerView - query statistics by geometry

Query features from a FeatureLayerView

Property Changes with ReactiveUtils

Create an app with composite views

4.31

SceneView