Openlayers 4.5 ImageVector points automatically clustering

Question

OL Version 4.5: https://jsfiddle.net/70kd51gh/1/ OL Version 4.0.1: https://jsfiddle.net/7zs5dqcm/2/

The code in both jfiddles is exactly the same, the only difference is the OL version being used. For some reason, Version 4.5 is not allowing features to overlap each other, you can zoom in and out and watch them disappear. Version 4.0.1 everything works as expected. However, I cannot downgrade to 4.0.1 because of an unrelated bug that was fixed.

The issue is specific to ol.layer.Image, as ol.layer.Vector allows overlapping. However, I need to use ol.source.ImageVector for performance reasons.

Is there a workaround to allow the features to overlap each other?

var pointstyle = new ol.style.Style({
    image: new ol.style.Circle({
        radius: 7,
        fill: new ol.style.Fill({
            color: '#00ff00'
        }),
        stroke: new ol.style.Stroke({
            color: '#000',
            width: 1
        })
    })
});


var styleKeys = ['x', 'cross', 'star', 'triangle', 'square'];
var count = 250;
var features = new Array(count);
var e = 4500000;
for (var i = 0; i < count; ++i) {
  var coordinates = [2 * e * Math.random() - e, 2 * e * Math.random() - e];
  features[i] = new ol.Feature(new ol.geom.Point(coordinates));
}

var source = new ol.source.Vector({
  features: features
});

var vectorLayer = new ol.layer.Image({
  source: new ol.source.ImageVector({source: source, style: pointstyle})
});

var map = new ol.Map({
  layers: [
    vectorLayer
  ],
  target: 'map',
  view: new ol.View({
    center: [0, 0],
    zoom: 2
  })
});

Answer 1

ol.source.ImageVector is deprecated from v4.5.0
check upgrade note

fix your code to:

var vectorLayer = new ol.layer.Vector({
  renderMode: 'image',
  source: source,
  style: pointstyle
});