OpenLayers 3 select style

Question

In OL2 I was able to specify a \"select\" style in the style definition. In OL3 this doesn\'t seem to exist. If I understand it correctly, I can set a style for the select inter

Answer 1

I know this a very old thread, but since I haven't been able to find a clear solution to this particular problem yet, I still deem it fit to post mine. Not sure how it holds up with a large number of layers and features, but this is the most elegant and concise solution I could come up with. BTW: I'm using the latest version of OpenLayers, which at the moment is 6.3.1.

var map = new ol.Map({
    ...
    layers: [
        new ol.layer.Vector({
            ...
            // Default style for layer1
            style: default1,
            // Hover style for layer1 (custom property)
            hoverStyle: hover1,
            // Selected style for layer1 (custom property)
            selectedStyle: selected1
        }),
        new ol.layer.Vector({
            ...
            // Default style for layer2
            style: default2,
            // Hover style for layer2 (custom property)
            hoverStyle: hover2,
            // Selected style for layer2 (custom property)
            selectedStyle: selected2
        })
    ],
    ...
});

var hoverInteraction = new ol.interaction.Select({
    condition: ol.events.condition.pointerMove,
    style: function(feature) {
        var layer = hoverInteraction.getLayer(feature);
        return layer.values_.hoverStyle;
    }
});
map.addInteraction(hoverInteraction);

var selectInteraction = new ol.interaction.Select({
    condition: ol.events.condition.click,
    style: function(feature) {
        var layer = selectInteraction.getLayer(feature);
        return layer.values_.selectedStyle;
    }
});

Answer 2

Let's assume that you have a style parameter stored in each ol.Feature, you can add a ol.style.StyleFunction to your ol.interaction.Select and return a style based on this parameter. Like so:

var styles = {
  'route': new ol.style.Style({
    stroke: new ol.style.Stroke({
      width: 6,
      color: [237, 212, 0, 0.8]
    })
  }),
  'icon': new ol.style.Style({
    image: new ol.style.Icon({
      anchor: [0.5, 1],
      src: 'pin.png'
    })
  }),
  'geoMarker': new ol.style.Style({
    image: new ol.style.Circle({
      radius: 7,
      snapToPixel: false,
      fill: new ol.style.Fill({color: 'black'}),
      stroke: new ol.style.Stroke({
        color: 'white',
        width: 2
      })
    })
  })
};

var select = new ol.interaction.Select({
  style: function(feature, resolution) {
    return [styles[feature.get('style_parameter')]];
  }
});

And your feature would be like:

var geoMarker = new ol.Feature({
  style_parameter: 'geoMarker',
  geometry: new ol.geom.Point([0,0])
});