ArcGIS JS SDK - Scene Layer Custom Popup and Attribute Retrieval

[jacobgqc]

Hello,

My environment is the following:

• Windows 11
• Node 20.14.x
  
  • arcgis/core 4.30.9
  • react 18.3.1

I've created several SLPK files with ArcGIS Pro and uploaded them to ArcGIS Online as hosted layers. I'm rendering these layers with "@arcgis/core/layers/SceneLayer". Everything works great out of the box, however I'm trying to create a custom onclick event and having trouble retrieving layer feature attributes.

In my custom entity click callback, I can see a single value: OBJECTID. From what I've been able to gather thus far, this is the only attribute available from a scene layer to improve performance. The default Esri popup template has a process that queries an endpoint to then retrieve extra attributes to populate the displayed table. In my case, the features have 18 attributes (plus one for the OBJECTID) and default popup template makes 18 authenticated requests to fetch all 18 attributes. These requests look like "https://tiles.arcgis.com/tiles/xyzxyzxyzxyz/arcgis/rest/services/xyzxyzxyzx/SceneServer/layers/0/nod...where the "f_1" is incremented for each attribute, up to f_18.

I can't quite find the list of attributes, or the count of attributes, for a selected feature in the scene layer. Everything is obviously available since the default popup template can fetch and display the attributes, but I don't know if trying to replicate the behavior myself is the best way forward.

Is there a more proper way to achieve this feature attribute fetching in the context of a custom onclick event?

Thanks,
Jake

[GreteSoosalu · Accepted solution]

Hi @jacobgqc 

Are you using sceneLayer.outFields = ["*"]; to be sure that you get all the attributes? 

This example app console logs all the attribute fields of a clicked building: https://codepen.io/gsoosalu/pen/vEONoQm

(and if you need to do more queries on the clicked building, see also this sample: Query client-side 3D extents )

Let me know if this helps you further. If not, could you share (either here or in a direct message) similar CodePen app that shows your onclick event implementation?

[jacobgqc]

Thank you!

The Query client-side 3D extents eventually led me to the right answer.

My issue was that I was using "hitTest" callback only, but I needed to do a queryFeatures with outFields after the hitTest.

Here's the critical snippet:

```

await sceneView.when(() => {

            sceneView.on("click", async (event) => {

              const response = await sceneView.hitTest(event);

              if (response.results.length > 0) {

                const result = response.results[0];

                const feature = result.graphic;

                const layer = result.graphic.layer;

                try {

                  // Get the SceneLayerView for the layer

                  const layerView = await sceneView.whenLayerView(layer);

                  // Create a query to get all attributes

                  const query = {

                    objectIds: [feature.attributes.OBJECTID],

                    outFields: ["*"]

                  };

                  // Query the features using SceneLayerView

                  const queryResult = await layerView.queryFeatures(query);

                  if (queryResult.features.length > 0) {

                    const fullFeature = queryResult.features[0];

```

Thank you for your help!