Richard Greenwood Richard Greenwood - 1 month ago 11
Javascript Question

Select interaction style not used when feature has its own style

My question follows on this question:
OpenLayers 3 select style

When a feature has its own style (rather than using its layer's style) the ol.interaction.Select "style" property is not used, or if the "style" property is a function, the function is not called.

This http://jsfiddle.net/y13xLmx6/13/ is the same as the jfiddle provided in the answer to the OpenLayers 3 select style question but with the addition of a style being applied to the line feature:

featureLine.setStyle(new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'rgba(24, 24, 24, 0.8)',
width: 8
})
}))


When the line feature is selected the yellow select interaction style is not applied, nor is the
console.log()
statement executed.The featurePoint, which does not have a style assigned to it, does get the interaction style and the
console.log()
statement is executed.

So how do you apply the interaction style to a feature that has its own style defined?

Answer

Not sure why select interaction doesn't log when line is selected but you can set a different style on select event:

select.on('select', function(evt){
  evt.selected.forEach(function(each) {
    each.setStyle(styles[each.get('type')]);
  });
  evt.deselected.forEach(function(each) {
    each.setStyle(null); // more likely you want to restore the original style
  });
});