Openlayers 5 Select Vector

Question

I'm trying to follow this example

I've added this to a button's (click) handler

let selectClick = new Select({
condition: click
});

mapValues.map.addInteraction(selectClick);
selectClick.on('select', function(e) {
console.log("Features selected : " + e.target.getFeatures().getLength());
console.log("Features deselected : " + e.deselected.length);  
});

and I am seeing the selection work in the console as I write out what is selected and deselected. However the vector style does not change to show it is selected and I don't see a style in the example. So, I just assumed it was now part of ol/interaction/Select.js

Any help in getting the style applied to the selected vector is appreciated

A default editing style https://openlayers.org/en/v4.6.5/apidoc/ol.style.html will be applied to the interaction, just as a default style is applied to vector layers. However if you have set a style directly on your feature that will override both defaults. Also features imported from some sources as as KML have their own style. — Mike, Apr 15 '19 at 20:08
Great thanks!! Where should I define a style that will get shown when a vector is selected — Funn_Bobby, Apr 16 '19 at 03:05

score 1 · Answer 1 · answered Apr 16 '19 at 11:53

In most cases the preferred solution would be to style the features using the layer and interaction styles. If a single style or style array is sufficient for all features in each case simply specify that:

let vectorLayer = new VectorLayer({
  source: mySource,
  style: deselectedStyle
});

let selectClick = new Select({
  condition: click,
  style: selectedStyle
});

If the style may differ depending on properties of the feature use a style function to return an appropriate style:

let vectorLayer = new VectorLayer({
  source: mySource,
  style: function(feature) {
    ...  // choose appropriate deselected style for this feature
    return chosenStyle;
  }
});

let selectClick = new Select({
  condition: click,
  style: function(feature) {
    ...  // choose appropriate selected style for this feature
    return chosenStyle;
  }
});

If styling individual features is preferred styles would need to be set and reset when selected and deselected:

selectClick.on('select', function(e) {
  e.selected.forEach(function(feature) { feature.setStyle(selectedStyle); });
  e.deselected.forEach(function(feature) { feature.setStyle(deselectedStyle); });
});

Openlayers 5 Select Vector

1 Answers1