3D Scene - visibleArea

Explore in the sandbox

View live

This sample shows how to use the visibleArea property in a 3D scene. The visibleArea is the visible portion of a map within the view as an instance of a Polygon, as shown in the top-right support scene. In other words, it is 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 main scene 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: mainScene.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 the view of the main scene.

Visualize the visibleArea

In a separate support scene, the sample also shows a preview of the visibleArea polygon. It renders the projected frustum on the ground, offering a clear visual indication of the area currently visible to the user. Additionally, when the 3D mode is toggled, the lines connecting the camera position to the vertices of the visibleArea polygon are visualized, effectively outlining the 3D frustum.

Use dark colors for code blocksCopy
        let { visibleArea } = mainScene;
        if (!visibleArea) {
          return;
        }
        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 }));
      }

Updating the support scene and the trees count

Both scenarios use reactiveUtils when to watch whenever the user's viewpoint changes. This allows to dynamically recreate the frustum visualization in the support scene and update the trees count at the bottom.

Use dark colors for code blocksCopy
      // Every time the visibleArea of the main scene change, we update both the support scene and the trees indicators
      reactiveUtils.when(
        () => mainScene.visibleArea,
        () => {
          debounceQueryTrees().catch((error) => {
            if (error.name === "AbortError") {
              return;
            }
            console.error(error);
          });
          updateScene();
        },
        {
          initial: true,
        },
      );

Highlight SceneLayer

FeatureLayerView - query statistics by geometry

Query features from a FeatureLayerView

Property changes with reactiveUtils

Create an app with composite views

arcgis-navigation-toggle