Openlayers 6 : How to change PointStyle when selected? - select

Question

I use Openlayers 6 try to change Point style when click on a point previously created but this code select the Point but no new style is applied. What Am i missing ?
I send the function to create the new Style, and the code to insert a Select Interaction
const styleClick = function(feature, resolution) {
return [
new Style({
image: new Circle({
fill: Fill({ color: [245, 121, 0, 0.8] }),
stroke: Stroke({ color: [0,0,0,1] }),
radius: 7
}),
text: new Text({
font: '24px Verdana',
text: feature.get('name'),
offsetY: 20,
fill: Fill({
color: [255, 0, 0, 0.8]
})
})
})
];
};
let selectSingleClick = new Select({style: styleClick});
map.addInteraction(selectSingleClick);
selectSingleClick.on('select', function (e) {
if( e.target.getFeatures().getLength() > 0 )
{
document.getElementById('obj-select').innerHTML =
' ' +
e.target.getFeatures().item(0).getGeometry().getType() +
' color is ' +
e.target.getFeatures().item(0).getStyle() +
' and deselected ' +
e.deselected.length +
' features)'
if( e.target.getFeatures().item(0).getGeometry().getType() == "LineString" )
{
//do something
};
if( e.target.getFeatures().item(0).getGeometry().getType() == "Point" )
{
//do something
};
//getGeometry().getCoordinates();
}
map.removeInteraction(selectSingleClick);
}
);
}
}

Answer 1

First, add your custom style like this:
let selectStyle = function (feature) {
let fill = new ol.style.Fill({
color: '#326de5',
});
let stroke = new ol.style.Stroke({
color: '#a30f4f',
width: 1.5
});
let styles = [
new ol.style.Style({
image: new ol.style.Circle({
fill: fill,
stroke: stroke,
radius: 6
}),
fill: fill,
stroke: stroke
})
];
return styles;
}
Now add top style to Select like this:
let selectInteraction = new ol.interaction.Select({
style: selectStyle
});
map.addInteraction(selectInteraction);
This code works for me!