CesiumGS / CesiumGS/cesium

cesium cannot clustering CustomDataSource immediately when rendering?

Open
#7,767 3 comments 0 reactions 0 assignees View on GitHub
category - billboards category - clustering type - bug
Dominant language
JavaScript
Stars
15.7k
Forks
3.9k
Avg merge
4d 6h
Merged PRs (30d)
34

Description

When i replace the Sandcastle clustering data, using 1000 random points in CustomDataSource, the cesium cannot clustering CustomDataSource immediately, ONLY AFTER i move the earth a little bit. The Sandcastle clustering using the KmlDataSource. Is there any difference between CustomDataSource and KmlDataSource when rendering?
The code is as below.

var dataSourceForCluster = new Cesium.CustomDataSource('cluster');
var count = 1000;
for(var i = 0; i < count; ++i){
dataSourceForCluster.entities.add({
id: ""+i,
position : Cesium.Cartesian3.fromDegrees(Math.random()*360-180,Math.random()*180-90),
billboard :{
image : './img/junying.png',
scale : 0.25,
}
});
}
var options = {
camera : viewer.scene.camera,
canvas : viewer.scene.canvas
};

var dataSourcePromise = viewer.dataSources.add(dataSourceForCluster);

dataSourcePromise.then(function(dataSource){
var pixelRange = 15;
var minimumClusterSize = 3;
var enabled = true;

dataSource.clustering.enabled = enabled;
dataSource.clustering.pixelRange = pixelRange;
dataSource.clustering.minimumClusterSize = minimumClusterSize;

var removeListener;

var pinBuilder = new Cesium.PinBuilder();
var pin50 = pinBuilder.fromText('50+', Cesium.Color.RED, 48).toDataURL();
var pin40 = pinBuilder.fromText('40+', Cesium.Color.ORANGE, 48).toDataURL();
var pin30 = pinBuilder.fromText('30+', Cesium.Color.YELLOW, 48).toDataURL();
var pin20 = pinBuilder.fromText('20+', Cesium.Color.GREEN, 48).toDataURL();
var pin10 = pinBuilder.fromText('10+', Cesium.Color.BLUE, 48).toDataURL();

var singleDigitPins = new Array(8);
for (var i = 0; i < singleDigitPins.length; ++i) {
singleDigitPins[i] = pinBuilder.fromText('' + (i + 2), Cesium.Color.VIOLET, 48).toDataURL();
}

function customStyle(){
if (Cesium.defined(removeListener)){
removeListener();
removeListener = undefined;
} else {
removeListener = dataSource.clustering.clusterEvent.addEventListener(function(clusteredEntities, cluster) {
cluster.label.show = false;
cluster.billboard.show = true;
cluster.billboard.id = cluster.label.id;
cluster.billboard.verticalOrigin = Cesium.VerticalOrigin.BOTTOM;

if (clusteredEntities.length >= 50) {
cluster.billboard.image = pin50;
} else if (clusteredEntities.length >= 40) {
cluster.billboard.image = pin40;
} else if (clusteredEntities.length >= 30) {
cluster.billboard.image = pin30;
} else if (clusteredEntities.length >= 20) {
cluster.billboard.image = pin20;
} else if (clusteredEntities.length >= 10) {
cluster.billboard.image = pin10;
} else {
cluster.billboard.image = singleDigitPins[clusteredEntities.length - 2];
}
});
}

// force a re-cluster with the new styling
var pixelRange = dataSource.clustering.pixelRange;
dataSource.clustering.pixelRange = 0;
dataSource.clustering.pixelRange = pixelRange;
}

// start with custom style
customStyle();

var viewModel = {
pixelRange: pixelRange,
minimumClusterSize: minimumClusterSize
};
Cesium.knockout.track(viewModel);

var toolbar = document.getElementById('toolbar');
Cesium.knockout.applyBindings(viewModel, toolbar);

function subscribeParameter(name) {
Cesium.knockout.getObservable(viewModel, name).subscribe(
function(newValue) {
dataSource.clustering[name] = newValue;
}
);
}

subscribeParameter('pixelRange');
subscribeParameter('minimumClusterSize');

/*Sandcastle.addToggleButton('Enabled', true, function(checked) {
dataSource.clustering.enabled = checked;
});

Sandcastle.addToggleButton('Custom Styling', true, function(checked) {
customStyle();
});*/

var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(function(movement) {
var pickedLabel = viewer.scene.pick(movement.position);
if (Cesium.defined(pickedLabel)) {
var ids = pickedLabel.id;
if (Cesium.isArray(ids)) {
for (var i = 0; i < ids.length; ++i) {
ids[i].billboard.color = Cesium.Color.RED;
}
}
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
});

Contributor guide

Open the contributing guide

Research direction

Start with the provided Sandcastle reproduction using 1,000 entities in a CustomDataSource, then compare its clustering behavior with the KmlDataSource example. Investigate why clustering appears only after camera movement; done means the CustomDataSource clusters immediately without requiring the earth to move.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.