How to dynamically change label.show in czml

CesiumJS
1

Hello,

I want to toggle on or off the label show field of the czml from a button press. I read the czml data into a JSON array and then load it into the czmlDataSource. This allows me to select and de-select different satellites to view by just adding or removing them from the JSON array and then loading it back into the czmlDataSource. This part works.

When I try to change the value of label.show and reload it, it doesn’t change what is being displayed. It changes the field in the JSON because I can console log it but it doesn’t effect the viewer. Any ideas of how to do this?

Thanks

Joel

2

It might be easier to get a direct reference to the entity itself and change its show property, as opposed to changing the CZML and reloading that.

Here’s an example doing that by getting the entity by its ID from CZML. Let me know if that helps.

3

Thanks for the reply Omar,

It still doesn’t work for me. I don’t know if it is because I am using react. When I update the label.show field, it doesn’t get changed on the viewer until I reload it.

This is what I am doing:

turnOffSatNames = (isSelected) => {

let newLabel = true;

if (this.state.satNameLabels == false){

console.log(“The label was false”);

newLabel = true;

this.setState((state) => {

return {satNameLabels: true};

});

} else if (this.state.satNameLabels == true) {

console.log(“The label was true”);

newLabel = false;

this.setState((state) => {

return {satNameLabels: false};

});

}

var i;

for(i = 1; i < this.displayArray.length; i++){

this.displayArray[i].label.show = newLabel;

}

this.viewer.dataSources.remove(this.czmlDataSource);

this.czmlDataSource.load(this.displayArray);

this.viewer.dataSources.add(this.czmlDataSource);

}

If I leave off the last three lines, nothing happens.

4

I figured out how to access the entities and it works. This is how I got it to work in javascript react:

turnOffSatNames = (isSelected) => {

var ds = this.czmlDataSource;

// displayArray is the JSON array of satellite data in czml format

var i;

for (i = 1; i < this.displayArray.length; i++){

let name = this.displayArray[i].id;

let sat = ds.entities.getById(name);

if(sat.label.show == false){

sat.label.show = true;

} else {

sat.label.show = false;

}

}

}

I was confused because this didn’t work:

sat.label.show = !sat.label.show

So, I had to add the if statements but it works now.