5

Esri recently released version 4.0 of the ArcGIS Server JavaScript API, which represents a substantial re-write compared to version 3.x

Using version 3.x, a feature layer supported a long list of events, including click and mouse-over. For example, it was easy to highlight the boundary of a polygon by listening to the feature layer's mouse-over event and accessing its geometry, as in this sample.

Using version 4.0, the functionality matrix says that Mouse Events are "not planned" and that we should use View Events instead.

How can you highlight the clicked feature on a feature layer, from a view's click or hover?

3

This was answered on the Esri forums at https://geonet.esri.com/message/609517#comment-609517

view.on("click", function(event) {  
  view.hitTest(event.screenPoint).then(function(response) {  
    var graphics = response.results;  
    graphics.forEach(function(graphic) {  
      console.log(graphic);  
    });  
  });  
}); 

The benefit here over how you would have done it in 3.x is that in 3.x you would only get the top-most graphic that was clicked. Now you'll get any graphics under the location where you clicked by using the hitTest.

| improve this answer | |
2

The code mentioned by Stephen can be used to get the coordinates of the clicked feature, then we can use graphic class(example: https://developers.arcgis.com/javascript/latest/sample-code/get-started-graphics/index.html) to draw and highlight the feature.

| improve this answer | |
1

Expanding on the previous answers to this question, here is a snippet to highlight the first (top) clicked feature using the 4.x version of the API:

view.on("click", function(event) {  
  view.hitTest(event).then(function(response) {
      var firstLayer = response.results[0];
      var geometry = firstLayer.graphic.geometry;
      if (geometry.type === "polygon") {
        var symbol = new SimpleFillSymbol(
          "solid",
          new SimpleLineSymbol("solid", new Color([232,104,80]), 2),
          new Color([232,104,80,0.25])
        );
        var graphic = new Graphic(geometry, symbol);
        view.graphics.removeAll(); // make sure to remmove previous highlighted feature
        view.graphics.add(graphic);
      }
    });
  });
});

This example should be easy to adapt to highlight other kind of geometries (just have to adjust the symbol that is applied to the graphic) or highlight other features than just the top one (iterate over each item in response.results).

Note that the following Esri classes should be imported with require:

require([
  "esri/Color",
  "esri/Graphic",
  "esri/symbols/SimpleLineSymbol",
  "esri/symbols/SimpleFillSymbol"
],
  function(
      Color,
      Graphic,
      SimpleLineSymbol,
      SimpleFillSymbol
  ) {
    // code goes here
})
| improve this answer | |
0

For 3d View model of a point click highlight with circle symbol, you can use below code.

view.on("click", function(event){
   view.hitTest(event.screenPoint).then(function(response) {
         var firstLayer = response.results[0];
         if(firstLayer){
         var geometry = firstLayer.graphic.geometry;
         if(geometry.type =="point"){
          var graphic = new Graphic(geometry, circleSymb);
             // make sure to remmove previous highlighted feature
             view.graphics.add(graphic);
            }
         }else{
          view.graphics.removeAll();
        }
           
    })
 });

**And The Style for this is:-** 

var circleSymb = new PointSymbol3D({
symbolLayers: [
     //wide semi-transparent icon
     new IconSymbol3DLayer({
       material: { color: [219,53,53, 0.5] },
       resource: { primitive: "circle" },
       size: 20
     }),
    //smaller opaque icon centered in transparent icon
    new IconSymbol3DLayer({
      material: { color: [219,53,53, 1] },
      resource: { primitive: "circle" },
      size: 8,
      outline: {
        color: "white",
        size: 0.5
      }
    }),
    //places an outer ring around the red icons
    new IconSymbol3DLayer({
      material: { color: [0,0,0, 0] },
      resource: { primitive: "circle" },
      size: 10,
      outline: {
        color: "black",
        size: 0.5
      }
    })
  ]    
});
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.