show or hide entity

CesiumJS
1

Hi all!

I'd like to add show/hide feature for entity in my application. I'd also like to control this action with checkbox. Below is my experiment.

if (checkbox_nn.checked){
.
.
.
  var redLine = viewer.entities.add({
    name : 'Red line on the surface',
    polyline : {
    positions : Cesium.Cartesian3.fromDegreesArray(array_of_coordinates),
    width : 3,
    material : Cesium.Color.RED
    }
  });
}
else {
  viewer.entities.remove(redLine); //this is not working
}

Help please. Thank you in front!

2

Hello,

Instead of adding and removing your entities, you can simply change the value of the show property for the entity. Here is an example:

var viewer = new Cesium.Viewer(‘cesiumContainer’);

var redLine = viewer.entities.add({
polyline : {
positions : Cesium.Cartesian3.fromDegreesArray([-75, 35,
-125, 35]),
width : 5,
material : Cesium.Color.RED
}
});

Sandcastle.addToolbarButton(‘Toggle Show’, function() {
redLine.show = !redLine.show;
});

viewer.zoomTo(viewer.entities);

``

Best,

Hannah

3

I've tried and i got error:

"Sandcastle-header.js:40 Uncaught TypeError: Cannot read property 'appendChild' of null"

in my web browser.

Do I have to change sandcastle-header.js?

4

That might be happening because I used Sandcastle.addToolbarButton to add a button to the example. This code runs in our Sandcastle app: http://cesiumjs.org/Cesium/Apps/Sandcastle/index.html?src=Hello%20World.html&label=Showcases
The code will work in your app if you remove the sandcastle specific function and call redLine.show = !redLine.show; from somewhere in your app.

Best,

Hannah

5

It's not working. It says: "redLine is not defined"

Here's the part of code. I'm using jquery.ajax to fetch data from database using jsonp

if (checkbox_nn.checked){
  jQuery.ajax({
    type: 'GET',
    url: url2,
    dataType: 'jsonp',
    jsonp: "cb",
    jsonpCallback: "jQ2",
    data:{x:x,
    y:y
    },
    crossDomain:true,
    cache:false,
    beforeSend : function(jqXHR, settings){
      var url2 = settings.url;
      var url2 = url2.replace("&_=","&ts=");
      console.log(url2);
      jqXHR.url= url2;
      settings.url = url2;
      //console.log(settings.url);
      },
    success: function(data){
      //drawing of low voltage layer
      for (var i=0; i < data.length; i++){
        for (var l=0; l<data[i].POINT.length; l++){
    array_of_coordinates.push(data[i].POINT[l].p_x);
    array_of_coordinates.push(data[i].POINT[l].p_y);
  }
  var redLine = viewer.entities.add({
    name : 'Red line',
    polyline : {
            positions:
            Cesium.Cartesian3.fromDegreesArray(array_of_coordinates),
            width : 2,
            material : Cesium.Color.RED
    }
        });
        array_of_coordinates=;
      }
   },
   error: function (jqXHR, status, error) {
     console.log(status, error);
   }
  });
  }
else{
  redLine.show = !redLine.show;
};

6

Until i find better solution, i'll use

else {

    viewer.entities.removeAll(); //THIS

7

Hi!

The problem remains. I still want to remove polyline according to checkbox state.

I have my code

if(something.checked){
var yellowLine = viewer.entities.add...
}else{
viewer.entities.remove(yellowLine);
}

and in my browser i got error:
yellowLine is not defined Uncaught reference error

Any one any idea?!

8

I'm on the half way to get this done. The problem is in the scope of variable

If(checkbox.checked){
// jquery sets variable 'yellowLine'
}

If(!checkbox.checked){
viewer.entities.remove(yellowLine) //doesn't see the 'yellowLine'
}

Does anyone hava an idea?

9

Thanks, Hannah for your solution. I tried your method and I was able to either completely remove the redline or hide it.

Best!