OpenLayers – How to De-highlight Highlighted Features with Button Click

Question

.html

  button type="button" value="Click" id="chiru">chiru</button

.ts
this.map.on('singleclick', event => {
  const feature = this.map.forEachFeatureAtPixel(event.pixel, (feature) => {
    return feature;
  })
  if(feature instanceof Feature){
    alert(feature.getProperties().ITEM_ID);
    this.map.getView().fit(feature.getGeometry(),{"maxZoom":17} );
    if (!selectedFeatures.hasFeature(feature)) {
      feature.setStyle(styleNew);
      selectedFeatures.addFeature(feature);
    }
  }
});

let btn = document.getElementById("chiru");
 btn.addEventListener("click", (event) =>{
event.preventDefault();

  const feature = this.map.forEachFeatureAtPixel(this.map.getEventPixel(event),
      
(feature) => {
                   
return feature;
   })
   
  if(feature instanceof Feature){

    if (selectedFeatures.hasFeature(feature)) {
      feature.setStyle();
      selectedFeatures.removeFeature(feature);
      var selectedList = '';
      selectedFeatures.forEachFeature(feature => {
        selectedList += feature.getProperties().ITEM_ID + ' ';
      });
      alert('Still selected: ' + selectedList);
    }

  }
})

From above code when I perform click operation on some features they will be get highlighted. Now I perform the button click operation I de-highlighted the feature. But button click doesn't work. How can I do this?

Answer 1

Your code will only de-highlight a feature if it is under the button when clicked. To de-highlight all features you would need

 btn.addEventListener("click", (event) => {
   event.preventDefault();
   selectedFeatures.forEachFeature((feature) => { feature.setStyle(); });
   selectedFeatures.clear();
 });