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?
Solved! Go to 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
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.
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.
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.
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);
});
});
});
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.
Bo,
So it looks like there is an issue with querying FeatureCollections that needs to be reported to esri tech support.
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
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.