1. A concise explanation of the problem you're experiencing.
Once we have rendered entities on the globe we want to be able to filter based on certain properties. Specially, to change the label, change the color of each entity , and change visibility of entities that should be filtered out. Alternatively, we would like to clear the globe and re-render the relevant entities.
We have tried to call .removeAll on the entities and dataSource variables inside of the viewer, but this does nothing.
2. A minimal code example. If you've found a bug, this helps us reproduce and repair it.
addPointsToGlobe() {
let points = this.state.points;
for (var id in points) {
this.addGeoJsonToGlobe(this.state.pointsGeoJson, (dataSource) => {
this.state.viewer.dataSources.add(dataSource);
this.geocacheEntities = dataSource.entities.values;
console.log(this.geocacheEntities);
for (let i = 0; i < this.geocacheEntities.length; i++) {
let entity = this.geocacheEntities[i];
if (Cesium.defined(entity.billboard)) {
console.log(this.state.points[i].ids.map((story) => {return story.id}).length);
entity.billboard = undefined;
entity.ellipse = new Cesium.EllipseGraphics({
height: 10,
semiMajorAxis: this.state.dotSizes[this.state.level],
semiMinorAxis: this.state.dotSizes[this.state.level],
material: Cesium.Color.BLUE,
});
console.log(this.state.points[i].ids.length);
var eyeOffset = -9000;
if(this.state.level == 3){
eyeOffset = -9000
}
var label = {
text: ""+ this.state.points[i].ids.length,
eyeOffset: new Cesium.Cartesian3(0,0,eyeOffset),
};
entity.label = new Cesium.LabelGraphics(label);
var bottomHeight;
var topHeight;
if (this.state.level === 0) {
topHeight = this.state.levelHeights[this.state.level] + 10000;
} else if (this.state.level === 3) {
bottomHeight = this.state.levelHeights[this.state.level] - 10000;
}
if (bottomHeight === undefined) {
bottomHeight = (this.state.levelHeights[this.state.level] + this.state.levelHeights[this.state.level + 1]) / 2;
}
if (topHeight === undefined) {
topHeight = (this.state.levelHeights[this.state.level] + this.state.levelHeights[this.state.level - 1]) / 2;
}
entity.ellipse.distanceDisplayCondition = new Cesium.DistanceDisplayCondition(bottomHeight, topHeight);
entity.label.distanceDisplayCondition = new Cesium.DistanceDisplayCondition(bottomHeight, topHeight);
}
entity.addProperty(i);
}
});
}
}
addGeoJsonToGlobe(geoJson, callback){
this.geoJsonOptions = {
camera: this.state.viewer.scene.camera,
canvas: this.state.viewer.scene.canvas,
};
this.geocachePromise = Cesium.GeoJsonDataSource.load(geoJson, this.geoJsonOptions);
this.geocachePromise.then((dataSource) => {
this.state.viewer.dataSources.add(dataSource);
callback(dataSource);
});
}
componentWillReceiveProps(newProps) {
if (newProps.color) {
this.setState({
color: Cesium.Color.RED
}, ()=>{
//None of this actually clears the globe
this.state.viewer.entities.removeAll();
this.state.viewer._dataSourceDisplay._dataSourceCollection._dataSources = ;
this.state.viewer._dataSourceDisplay._dataSourceCollection._dataSources = ;
this.state.viewer._dataSourceCollection._dataSources =;
this.state.viewer.dataSources.removeAll(false);
this.state.viewer.render();
});
}
}
3. Context. Why do you need to do this? We might know a better way to accomplish your goal.
We want to be able to modify the globe with updated values based on content categories. For example if we have 80 total objects then click on a specific category with only 20 objects we want to change the label to 20 and change the color to correspond to that category. Also to remove it if there are 0 objects that fit the category at that entity.
4. The Cesium version you're using, your operating system and browser.
1.39, Mac OSX, chrome