nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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

Vind meer berichten getagd met

Accepted answers

BoYan1

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.

All comments

khutchins

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

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.

Doe mee aan het gesprek

Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.

Snelle Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.