Billboards in custom data source are not initially clustered

[rutsky]

Custom data source with set of billboards and with enabled clustering is not clustered initially.

Take a look at the following example in Sandcastle:

var viewer = new Cesium.Viewer('cesiumContainer');

var image = new Image();
image.onload = function() {
    var dataSource = new Cesium.CustomDataSource('points');

    for (var i = 0; i !== 5000; i++) {
      dataSource.entities.add({
          position: Cesium.Cartesian3.fromDegrees(Math.random() * 360 - 180, Math.random() * 180 - 90, 0),
          billboard: {
            image: image
          }
        }
      );
    }

    dataSource.clustering.pixelRange = 20;
    dataSource.clustering.minimumClusterSize = 3;
    dataSource.clustering.enabled = true;

    viewer.dataSources.add(dataSource);
};
image.src = '../images/facility.gif';

Here is how it looks like after running:

This stays for indefinite time, and only if I navigate (zoom or rotate) Earth for a few seconds billboards are being clustered:

Datasource with only labels is being clustered initially normally.

[mramato]

Thanks for the bug report and isolated test case @rutsky. I can confirm this problem and it definitely only happens with billboards. Hopefully @bagnell will have time to look into it soon.

[billwritescode]

Changing the pixel range in a timeout seems to help until a fix is in:

var viewer = new Cesium.Viewer('cesiumContainer');
var image = new Image();

var dataSource = new Cesium.CustomDataSource('points');

dataSource.clustering.pixelRange = 20;
dataSource.clustering.minimumClusterSize = 3;
dataSource.clustering.enabled = true;

viewer.dataSources.add(dataSource);

var forceCluster = function() {
dataSource.clustering.pixelRange = 0;
dataSource.clustering.pixelRange = 20;
};

image.onload = function() {

for (var i = 0; i !== 5000; i++) {
    dataSource.entities.add({
        position: Cesium.Cartesian3.fromDegrees(Math.random() * 360 - 180, Math.random() * 180 - 90, 0),
        billboard: {
            image: image
           }
     });

}

setTimeout(forceCluster, 200);

};
image.src = '../images/facility.gif';

http://cesiumjs.org/Cesium/Apps/Sandcastle/?src=Hello%20World.html&label=Showcases&gist=6a09e40ba8f38fca1e29f97d07441679

[billwritescode]

@bagnell and @mramato, thanks for looking into this.

I've seen similar issues where the _clusterDirty flag is not getting set appropriately, and this can lead to issues such as this. One hack is the above one with changing the pixelrange. But one thing that would be cleaner is exposing _cluster to the API, perhaps via a wrapper like this:

/**
 * Forces a recluster
 * @memberof EntityCluster.prototype
 * @type {Function}
 */
cluster : {
    get : function() {
        return this.enabled ? this._clusterDirty = true && this._cluster : function() {};
    }
}

Are there any plans to support this or a similar "force to cluster" function on the API?

[pjcozzi]

Thanks again for the report and code example, @rutsky.

This was fixed in #5208.

[rutsky]

@bagnell @pjcozzi Thanks!