Below is a scenario setup modified from one of the CZML examples…
The application can have as much as 40 datasources and streamed CZML is coming in tagged and grouped by an identifier that tells the application which datasource needs to process the data. The application takes each group of CZML packets and sequentially process them via czmlDataSource.process (vs. the snippet below that uses czmlDataSource.load).
-
Where the snippet prints out 'is display ready after loading czml1? ’ - In version Cesium 1.19, viewer.dataSourceDisplay.ready is false in some update cycles in the application although the promise resolved with the list of add/removed/changed entities. Just wanted to confirm that ready=false indicates that not all entities are rendered. So, the promise is just saying “the EntityCollection is updated” not necessarily promising that the display is updated/ready.
-
The default Cesium.CzmlDataSource.updaters array – Is this where the asynchronous action takes place?
-
Is there a way to hook up a callback that gets raised when viewer.dataSourceDisplay.ready is true?
var czml1 = [
{
“id” : “document”,
“name” : “CZML Geometries 1: Circles and Ellipses”,
“version” : “1.0”
},
{
“id” : “shape1”,
“name” : “Green circle at height”,
“position” : {
“cartographicDegrees” : [-111.0, 40.0, 150000.0]
},
“ellipse” : {
“semiMinorAxis” : 300000.0,
“semiMajorAxis” : 300000.0,
“height” : 200000.0,
“material” : {
“solidColor” : {
“color” : {
“rgba” : [0, 255, 0, 255]
}
}
}
}
}
];
var czml2 = [
{
“id” : “document”,
“name” : “CZML Geometries 2: Circles and Ellipses”,
“version” : “1.0”
},
{
“id” : “shape2”,
“name” : “Red ellipse on surface”,
“position” : {
“cartographicDegrees” : [-103.0, 40.0, 0]
},
“ellipse” : {
“semiMinorAxis” : 250000.0,
“semiMajorAxis” : 400000.0,
“height” : 0,
“material” : {
“solidColor” : {
“color” : {
“rgba” : [255, 0, 0, 127]
}
}
},
“outline” : true,
“outlineColor” : {
“rgba” : [255, 0, 0, 255]
}
}
},
{
“id” : “shape3”,
“name” : “Blue translucent, rotated, and extruded ellipse with outline”,
“position” : {
“cartographicDegrees” : [-95.0, 40.0, 100000.0]
},
“ellipse” : {
“semiMinorAxis” : 150000.0,
“semiMajorAxis” : 300000.0,
“extrudedHeight” : {
“number” : 200000.0
},
“rotation” : {
“number” : 0.78539
},
“material” : {
“solidColor” : {
“color” : {
“rgba” : [0, 0, 255, 127]
}
}
},
“outline” : true
}
}
];
var viewer = new Cesium.Viewer(‘cesiumContainer’);
var ds1 = new Cesium.CzmlDataSource(‘czml1/ds’);
var ds2 = new Cesium.CzmlDataSource(‘czml2/ds’);
ds1.entities.collectionChanged.addEventListener(function(collection,added,removed,changed) {
console.log(‘added:’ + added.length + ‘, ready:’ + viewer.dataSourceDisplay.ready);
});
//
viewer.dataSources.add(ds1).then(function(ds) {
console.log(‘datasource ’ + ds.name + ’ added’);
});
viewer.dataSources.add(ds2).then(function(ds) {
console.log(‘datasource ’ + ds.name + ’ added and attaching callback to collection changed’);
ds.entities.collectionChanged.addEventListener(function(collection,added,removed,changed) {
console.log(‘added:’ + added.length
-
‘, total:’ + collection.values.length
-
‘, ready:’ + viewer.dataSourceDisplay.ready);
});
});
console.log(‘ready:’ + viewer.dataSourceDisplay.ready);
console.log(‘please wait…’);
// process later
setTimeout(function() {
ds1.load(czml1).then(function(result) {
console.log('is display ready after loading czml1? ’ + viewer.dataSourceDisplay.ready);
});
ds2.load(czml2).then(function(result) {
console.log('is display ready after loading czml2? ’ + viewer.dataSourceDisplay.ready);
});
// can be up to 40 datasources
}, 5000);
``
Thank you.