Proper Way to Remove All Billboards and Add New Ones

CesiumJS
1

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 CesiumJS – Cesium) 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!

2

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

3

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