How to remove an entity from dataSources

CesiumJS
1

Hello all,
I created an entity by way of CZML. Now I would like to remove it.

A simple example for Sandcastle:
HTML
<style>
    @import url(../templates/bucket.css);
</style>
<div id="cesiumContainer" class="fullSize"></div>
<div id="loadingOverlay"><h1>Loading...</h1></div>
<div id="toolbar"></div>

JAVASCRIPT
var czml1 = [{
    "id" : "document",
    "name" : "CZML Geometries: Rectangle",
    "version" : "1.0"
}, {
    "id":"1",
    "rectangle" : {
        "coordinates" : {
            "wsenDegrees" : [-120, 40, -110, 50]
        },
        "fill" : true,
        "material" : {
            "solidColor" : {
                "color": {
                    "rgba" : [255, 0, 0, 255]
                }
            }
        }
    }
}, {
    "id":"2",
    "rectangle" : {
        "coordinates" : {
            "wsenDegrees" : [-110, 40, -100, 50]
        },
        "fill" : true,
        "material" : {
            "solidColor" : {
                "color": {
                    "rgba" : [0, 0, 255, 255]
                }
            }
        }
    }
}];

var viewer = new Cesium.Viewer('cesiumContainer');
var promise1 = Cesium.CzmlDataSource.load(czml1);
viewer.dataSources.add(promise1);

Sandcastle.addToolbarButton('remove entity 1', function() {
    viewer.entities.removeById("1");
});

I have hundreds of CZML entities and I would like to change (add,remove,update) the entity's positions, transformations, etc.. To accomplish this, I believe I must delete the entity entirely and recreate it from the database.

Many thanks as usual, erik

2

Hi Erik,

Calling CzmlDataSource.load with your new data will remove the old data and update the map with the new data.

Thanks,

Gabby

3

Thanks Gabby.

I added to the Sandcastle code posted earlier as you suggested and am having success loading a new entity. However the old entity's rectangle is still visible on screen. I would like this older rectangle to disappear.

This is a challenge I have had with the animated models in my project as well. When I replace the old entity by loading the new entity from CZML as you recommend, the new model shows up and performs as expected. At the same time, the old entity's model is left on screen frozen in its last position, even when everything around it is animating. This suggests that the old entity's data has been removed, but the viewer has not received instructions to remove the now orphaned old entity model.

Any thoughts?

Thanks again, Erik

var czml1 = [{
    "id" : "document",
    "name" : "CZML Geometries: Rectangle",
    "version" : "1.0"
}, {
    "id":"1",
    "rectangle" : {
        "coordinates" : {
            "wsenDegrees" : [-120, 40, -110, 50]
        },
        "fill" : true,
        "material" : {
            "solidColor" : {
                "color": {
                    "rgba" : [255, 0, 0, 255]
                }
            }
        }
    }
}, {
    "id":"2",
    "rectangle" : {
        "coordinates" : {
            "wsenDegrees" : [-110, 40, -100, 50]
        },
        "fill" : true,
        "material" : {
            "solidColor" : {
                "color": {
                    "rgba" : [0, 0, 255, 255]
                }
            }
        }
    }
}];

var viewer = new Cesium.Viewer('cesiumContainer');
var promise1 = Cesium.CzmlDataSource.load(czml1);
viewer.dataSources.add(promise1);

Sandcastle.addToolbarButton('re-load entity 1', function() {
    var czml2 = [
        {
            "id" : "document",
            "version" : "1.0"
        },{
            "id":"1",
            "rectangle" : {
                "coordinates" : {
                    "wsenDegrees" : [-130, 50, -100, 60]
                },
                "fill" : true,
                "material" : {
                    "solidColor" : {
                        "color": {
                            "rgba" : [255, 0, 0, 255]
                        }
                    }
                }
            }
        }
    ];
    var promise2 = new Cesium.CzmlDataSource.load(czml2);
    viewer.dataSources.add(promise2);
});

4

Hi Erik,

Here’s a modified Sandcastle example from your original code. Just make sure you keep track of your loaded dataSource object and perform the entity operations on that.

Thanks!

Gabby