is there a way to change the symbol (color, opacity, size, etc) when I click one feature in the layer? I just want to highlight the selected feature. I'm using javascript api 4.0 in scene view
Solved! Go to Solution.
I fixed it by cloning the original graphics. Here is my code:
view.on("click", function(e){ // console.log(graphicCollection); view.hitTest(e.screenPoint).then(function(response){ response.results.forEach(function(g){ var graphic = g.graphic; // console.log(graphic); if (graphic) { var newGraphics = view.graphics.clone(); view.graphics.removeAll(); newGraphics.forEach(function(g){ g.symbol.symbolLayers.items[0].material.color.a = 0.3; }); var gpcIndex = newGraphics.findIndex(function(item){ return item.id === graphic.id; }); newGraphics.getItemAt(gpcIndex).symbol.symbolLayers.items[0].material.color.a = 1; view.graphics = newGraphics; }; }); }); });
Here I'm changing the opacity of the graphics, I fade all the unselected graphics.
The "zoom to" function of the popup works fine with the above code.
One option might be to apply a new symbol to the clicked feature and add to the graphics layer. Then remove it when they click another feature.
view.on("click", function(e){ view.hitTest(e.screenPoint).then(function(response){ selectionLayer.graphics.removeAll(); response.results.forEach(function(g){ if(g.graphic){ var graphic = g.graphic; graphic.symbol = symbol; selectionLayer.graphics.add(graphic); } }); }); });
thanks for the reply. This works pretty well.
However, this raises another problem. after adding the new graphic on the layer, when I click on the "zoom to" on the popup of the graphic, there is an error 'Object {name: "internal:graphic-not-part-of-view", message: "Graphic is not part of this view", details: undefined}'
do you have any idea?
I tried using view.graphics.add(graphic) to add the graphics onto the view directly instead of adding the graphic onto a GraphicsLayer and then adding the layer onto the map. It still gives me the above error.
I fixed it by cloning the original graphics. Here is my code:
view.on("click", function(e){ // console.log(graphicCollection); view.hitTest(e.screenPoint).then(function(response){ response.results.forEach(function(g){ var graphic = g.graphic; // console.log(graphic); if (graphic) { var newGraphics = view.graphics.clone(); view.graphics.removeAll(); newGraphics.forEach(function(g){ g.symbol.symbolLayers.items[0].material.color.a = 0.3; }); var gpcIndex = newGraphics.findIndex(function(item){ return item.id === graphic.id; }); newGraphics.getItemAt(gpcIndex).symbol.symbolLayers.items[0].material.color.a = 1; view.graphics = newGraphics; }; }); }); });
Here I'm changing the opacity of the graphics, I fade all the unselected graphics.
The "zoom to" function of the popup works fine with the above code.