This sample shows how to use the visibleArea property in a 3D Scene component. The visible 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
The following code snippet demonstrates how to use the visible geometry to query a FeatureLayerView and retrieve features within the main Scene
using the queryFeatures method.
// 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 visible are considered and the results of the Feature 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 visible 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 visible polygon are visualized, effectively outlining the 3D frustum.
let { visibleArea } = mainScene;
if (!visibleArea) {
return;
}
const visibleAreaGraphics = getVisibleAreaGraphics(visibleArea);
visibleAreaGraphicsLayer.addMany(visibleAreaGraphics);
// 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.
// 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,
},
);
