How to dynamically style Cluster layer without style function - openlayers-3

Question

How can I define the style of a cluster layer as an ol.style.Style object, and not as a function, in Openlayers 3?
I am using a library (ol3-google-maps) which only accepts ol.style.Style objects for styling. The official cluster example uses a style function to dynamically add the number of features in each cluster to it's icon:
style: function(feature, resolution) {
console.log(feature);
var size = feature.get('features').length;
var style = styleCache[size];
if (!style) {
style = [
new ol.style.Style({
image: new ol.style.Circle({
radius: 10,
stroke: new ol.style.Stroke({
color: '#fff'
}),
fill: new ol.style.Fill({
color: '#3399CC'
})
}),
text: new ol.style.Text({
text: size.toString(),
fill: new ol.style.Fill({
color: '#fff'
})
})
})
];
styleCache[size] = style;
}
return style;
}

Answer 1

ol3 style functions are great when the style depends on some property of the feature, such as the number of subfeatures in a cluster. There is no other way to use dynamic properties in the style.
You could use a common style for the cluster layer that does not depend on the cluster size (that does not show the number of features), such as this example.
However, you could also set a non-dynamic style for each feature, instead of each layer. That style could be calculated based on it's properties, giving you some of the possibilities of a style function.
This example is a modification of the official example that does not use a normal style function. Instead, it listens to the addfeature and changefeature events of the cluster source, and sets a style based on it's properties to the feature itself (see code below).
Not that this is not a general solution or replacement for style functions, although it should work fine for cluster sources. Notably, you lose the possibility to generate styles based on the resolution. Setting a style to a feature might not be desirable if the feature is used by other layers. You also have to consider performance issues.
var styleCache = {};
var styleFunctionIsChangingFeature = false
var styleFunction = function (evt) {
if (styleFunctionIsChangingFeature) {
return;
}
var feature = evt.feature;
var size = feature.get('features').length;
var style = styleCache[size];
if (!style) {
style = new ol.style.Style({
image: new ol.style.Circle({
radius: 10,
stroke: new ol.style.Stroke({
color: '#fff'
}),
fill: new ol.style.Fill({
color: '#3399CC'
})
}),
text: new ol.style.Text({
text: size.toString(),
fill: new ol.style.Fill({
color: '#fff'
})
})
});
styleCache[size] = style;
}
styleFunctionIsChangingFeature = true
feature.setStyle(style);
styleFunctionIsChangingFeature = false
};
clusterSource.on('addfeature', styleFunction);
clusterSource.on('changefeature', styleFunction);