So basically I have several hundred of features containing a geom. I want the map to cluster different color of points.
This is the features and color:
//so both features and color contain several hundred of value
features.push(new ol.Feature(new ol.geom.Point([random_x, random_y])));
color.push(random_color)
Then with each feature[i], it should display in the map with color[i]. This is the code that is currently working now which display with one color only, how should I change to let each point display its own color and it can still remain the clustering function? Please help.
var source = new ol.source.Vector({
features: features
});
var clusterSource = new ol.source.Cluster({
distance: 40,
source: source
});
var styleCache = {};
var clusters = new ol.layer.Vector({
name: 'clusterlayer',
source: clusterSource,
style: function(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,
fill: new ol.style.Fill({
color: '#000000'
})
}),
text: new ol.style.Text({
font: 'bolder',
text: size.toString(),
fill: new ol.style.Fill({
color: '#000000',
})
})
})];
styleCache[size] = style;
}
return style;
}
});
this.state.map.addLayer(clusters);
For more advance work, how should I do to say like a red and blue circle point, when clustering, it will show up a thing like green circle, something like that.
