How do I remove a subset of previously highlighted graphics?

628
2
Jump to solution
04-16-2019 03:04 PM
XongVang
New Contributor

I'm using a SketchViewModel to draw a polygon around features.  The resulting geometry is then used in a query to query the FeatureLayerView.  More than 1 feature can be returned in the query results.  Currently, I add highlights to all of the resulting graphics.  

featureLayerView.queryFeatures(query).then(function (results) {
graphics = results.features;

if (graphics.length > 0) {

highlight = featureLayerView.highlight(graphics);
});

I now need additional functionality to remove previously selected graphics.  Scenario, first sketch I highlight 5 graphics.  Second sketch I draw a polygon around 3 of the 5 previously highlighted graphics.  I'd like the 3 previously highlights removed.  How would I go about doing that?

My other thought is instead of using a highlight, I would use a client side feature layer in place of a highlight.  That way I create the features and on subsequent selections, I can query the feature layer and remove the feature if it is pre-existing.

Thanks.

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

Xong,

   The only way to do this that I know of is to maintain an array of previously highlighted graphics as a global variable.

featureLayerView.queryFeatures(query).then(function (results) {
  //Remove the previous highlighted features
  if(highlight){
    highlight.remove();
  }
  graphics = results.features;
  //loop through the selected graphics to see if there are any in the previous
  //highlighted features. If there are then remove them from the previous array
  graphics.map(function(gra){
    var index = prevGraphics.indexOf(gra);
    if(index > 0){
      prevGraphics.splice(index, 1); //delete from previous array
    }
  });
  
  //If there are any graphics in the previous array then use them 
  //else using the new selection
  if (prevGraphics.length > 0) {
    highlight = featureLayerView.highlight(graphics);
    prevGraphics = graphics;
  }else{
    highlight = featureLayerView.highlight(prevGraphics);
  }
});

View solution in original post

0 Kudos
2 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

Xong,

   The only way to do this that I know of is to maintain an array of previously highlighted graphics as a global variable.

featureLayerView.queryFeatures(query).then(function (results) {
  //Remove the previous highlighted features
  if(highlight){
    highlight.remove();
  }
  graphics = results.features;
  //loop through the selected graphics to see if there are any in the previous
  //highlighted features. If there are then remove them from the previous array
  graphics.map(function(gra){
    var index = prevGraphics.indexOf(gra);
    if(index > 0){
      prevGraphics.splice(index, 1); //delete from previous array
    }
  });
  
  //If there are any graphics in the previous array then use them 
  //else using the new selection
  if (prevGraphics.length > 0) {
    highlight = featureLayerView.highlight(graphics);
    prevGraphics = graphics;
  }else{
    highlight = featureLayerView.highlight(prevGraphics);
  }
});
0 Kudos
XongVang
New Contributor

Great idea.  Simply rebuild the highlight from scratch each time using the global graphic array after adding/removing.  I was thinking I could do it with the highlight itself, but the handle removal is all or nothing.  Everything appears to be working.

Thanks Robert!

0 Kudos