based on this example addInteraction
adds opacity, so I am setting a new style for each selected feature, however the clicked features remain red.
I only want to style with the red border only one feature at a time.
var style_simple = new ol.style.Style({
fill: new ol.style.Fill({
color: 'khaki'
}),
stroke: new ol.style.Stroke({
color: '#880000',
width: 2,
opacity:1
})
});
var style_noBG = new ol.style.Style({
fill: new ol.style.Fill({
color: '#5755d900'
}),
stroke: new ol.style.Stroke({
color: 'yellow',
width: 2,
opacity:1
})
});
var style_selected = new ol.style.Style({ //style to be added on selected layer
fill: new ol.style.Fill({
color: '#5fba6a38'
}),
stroke: new ol.style.Stroke({
color: 'red',
width: 3,
opacity:1
})
});
var getStyle = style_simple;
$("#layerbg").change(function () { //fires when checkbox is changed
if ($(this).is(':checked')){
getStyle = style_simple;
}
else{
getStyle = style_noBG;
}
vector.setStyle(getStyle);
});
var vector = new ol.layer.Vector({
style:style_simple,//set default style when page is loaded
source: new ol.source.Vector({
//url: 'https://openlayers.org/en/latest/examples/data/geojson/countries.geojson',
url: 'JS/getjson.json',
format: new ol.format.GeoJSON()
//,serverType: 'geoserver'
}),opacity: 1
});
var selectClick = new ol.interaction.Select({
condition: ol.events.condition.click
});
if (select !== null) {
map.addInteraction(select);
select.on('select', function(e) {
var extent = e.target.getFeatures().getArray()[0].getGeometry().getExtent();
e.target.getFeatures().getArray()[0].setStyle(style_selected); //commenting out this line works but adds opacity to the layer
map.getView().fit(extent,{duration: 590},map.getSize());
});
}
style_selected
would help pinpointing the problem.style_simple
. I have a checkbox which by default is checked when is unchecked it switches the style of the vector tostyle_noBG
. Now clicking selected feature, will zoom and style the selected feature with thestyle_selected
style.