change the symbol (color, opacity, size, etc) when I click one feature in the layer

[BoYan]

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

[KellyHutchins]

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);
            }
          });
        });
      });

[BoYan1]

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?

[BoYan1]

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.

[BoYan1 · Accepted 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.