Proper Way to Remove All Billboards and Add New Ones

I have two data sources (geoJSON) that I want to be created into billboards. The original one is loaded when Cesium starts using a promise (code taken from https://cesium.com/docs/tutorials/cesium-workshop/) and is fully working. When the user presses a button, I want to be able to delete all of the existing billboards, and replace them with the second data source. I have attempted to do this through a second promise, but the promise never hits, so I am wondering if I am going about this in the incorrect manner.

I have a function called dataToGeoJSON that returns a geoJSON file stored as a variable called geoJSON. I then add the promise, just as I did for the original data-

var updatedMetersPromise = viewer.dataSources.add(
        Cesium.GeoJsonDataSource.load(geoJSON, geojsonOptions));

Here is the promise function-

updatedMetersPromise.then(function(dataSource) {

console.log("in updatedMetersPromise");

// Add the new data as entities to the viewer
viewer.dataSources.add(dataSource);
meters = dataSource.entities;

// Get the array of entities
var metersEntities = dataSource.entities.values;

for (var i = 0; i < metersEntities.length; i++) {

    var entity = metersEntities[i];

    if (Cesium.defined(entity.billboard)) {
           [set billboard properties]
    }

}

}).catch(function(err) {

console.log('in .catch promise from updated promise');

console.log('error: ' + err);

});

As I said, this promise function never runs, nor does it print an error. When adding subsequent data sources do you have to use a different method?

Also, from reading the forum, it seems that deleting existing billboards is a slow process. From this sandcastle it says to remove all of the billboards you can call viewer.entities.removeAll();. I have tried this, as well as a loop such as this, but neither have worked. Am I missing something?

for (var i=0; i<viewer.dataSources.length; i++) {

    console.log("remove entity")

    var entity = viewer.dataSources[i];

    viewer.dataSources.remove(entity)

}

I am sorry this is kinda two topics in one question. Thanks in advance!

If you’re adding the billboards through a GeoJSON data source, not directly through the Entity API, I think you’ll need to remove them through viewer.dataSources.removeAll(); like in this example: https://sandcastle.cesium.com/?src=GeoJSON%20and%20TopoJSON.html

You’re calling dataSources.add(...) twice. Have you tried adding the promise listener directly to GeoJsonDataSource.load(...) instead? That way, you can tweak the contents of the source first, before adding it.

const src = await GeoJsonDataSource.load(...);
src.entities.values.forEach(ent => {
  // Modify billboard properties here
});
viewer.dataSources.removeAll();
viewer.dataSources.add(src);
1 Like