How do I select a feature in a FeatureLayer?

[BoYan]

I have rendered some features(client-side graphics) on a feature layer, how do I select individual features? Essentially I want to change the color or opacity to highlight the selected feature in the layer. The only thing I can do is to show the popup when I click on a feature, but how does the popup show up (how does it know which feature to show popup) under the hood?

[RobertScheitlin__GISP]

Bo,

   The FeatureLayer object has a select function that takes a query class. You can see the JS api doc for the specifics and the api samples for code.

[BoYan]

thanks for the prompt reply, I found the function: FeatureLayer | API Reference | ArcGIS API for JavaScript 4.0

There are also some documentation about the query: Query | API Reference | ArcGIS API for JavaScript 4.0  

But what I want to do essentially is that I can select a feature with mouse click. I'm actually using SceneView, so the features are 3d features. 

I try to do the query based on geometry on mouse click event:

        view.on("click", function(evt){

          // evt is the event handle returned after the event fires.

          console.log(evt.mapPoint);

          var query = new Query();

          query.geometry = evt.mapPoint;

          lyr.queryFeatures(query).then(function(results){

            console.log(results.features);

          })

        });

but it gives me the error:'name: "QueryEngine", message: "Invalid query", details: undefined'.

It looks like the query function only supports ArcGIS Online hosted feature service(s) or ArcGIS Server service(s)?

My features are rendered by client-side graphics.

[RobertScheitlin__GISP]

Bo,

  No you should be able to query client side features:

If working with a FeatureLayer created from a FeatureCollection (via source), only the geometry, objectIds, and spatialRelationship properties should be specified. Adding any other properties will return an error. If specifying a spatialRelationship, note that intersects is the only supported operation.

[BoYan1]

Robert,

I saw that and tried it, but it still gave me the error "Object {name: "QueryEngine", message: "Unsupported query", details: undefined}".

I'm not sure where I did wrong. Here's part I used to do the query:

view.then(function(){

        console.log(lyr);

        view.on("click", function(e){

          console.log(e.mapPoint);

          var queryParams = lyr.createQueryParameters();

          queryParams.geometry = e.mapPoint;

          queryParams.spatialRelationship = "intersects";

          lyr.queryFeatures(queryParams).then(function(results){

            console.log(results.features);

      });

   });

});

[BoYan1]

I'm using SceneView btw. But I tried with the sample code here: ArcGIS API for JavaScript Sandbox

I used this sample code to do the query, it gave me the same error "name: "QueryEngine", message: "Unsupported query", details: undefined" and after this error, there was another error "bundle.js:2559 Uncaught TypeError: Cannot read property 'domain' of undefined", I'm not sure if this is relavant.

[RobertScheitlin__GISP]

Bo,

  So it looks like there is an issue with querying FeatureCollections that needs to be reported to esri tech support.

[UndralBatsukh · Accepted solution]

Hi there,

You can use MapView.hitTest or SceneView.hitTest​ to search for graphics that intersect where you clicked on the view.

Here is a simple snippet how you can highlight a graphic on the view.

view.on("click", function(evt){

          // Search for graphics at the clicked location

          view.hitTest(evt.screenPoint).then(function(response) {

            var result = response.results[0];

            // console.log(result);

            var symbol = new SimpleMarkerSymbol({

              style: "circle",

              size: 20,

              color: "green",

              outline: {

                width: 1,

                color: "neon",

                style: "solid"

              }

            });

            view.graphics.removeAll();

            if (result) {

              var selectionGraphic = result.graphic;

              selectionGraphic.symbol = symbol;

              view.graphics.add(selectionGraphic);

            }

          });

});

As for the FeatureLayer.QueryFeatures​, it executes query against feature services. So you should not use against client side graphics. Please take a look at FeatureLayerView.QueryFeatures​ instead.

This looks like a question asked by you and Kristian answered that there is a known problem querying features in sceneview.

Hope this helps

[BoYan]

Thanks for the reply. I eventually used hitTest() in SceneView | API Reference | ArcGIS API for JavaScript 4.0

for my purpose.

Just to add a comment, if I remove all the graphics from the view or layer and added the modified graphic, the "zoom to" function will raise an error (as described here: change the symbol (color, opacity, size, etc) when I click one feature in the layer ). I managed to fix it by cloning the graphics in the view/layer and modified them individually. Not sure if this is the correct way to do it since I manipulate the property values directly.