What is "document.getElementByID" for Cesium Entities?

CesiumJS
1

How can I find the label id and change its background color? This is same to HTML concept of “document.getElementById”. What is the “document.getElementByID” for cesium entity-label? I would like to use it function two in this example.

placemark.push(viewer.entities.add({
                          id: "1234",
                          orientation: new Cesium.HeadingPitchRoll(0, 0, 0),
                          position: Cesium.Cartesian3.fromDegrees(parseFloat(lon), parseFloat(lat), 30),
                          label: {
                              text: "hello",
                              verticalOrigin: Cesium.VerticalOrigin.TOP,
                              font: '20px sans-serif',
                              fillColor: Cesium.Color.BLACK,
                              backgroundColor: Cesium.Color.WHITE,
                              backgroundPadding : new Cesium.Cartesian2(30, 15),
                              style : Cesium.LabelStyle.FILL_AND_OUTLINE,
                              showBackground: true
                          }

 var onevalue="";

function one(){
    viewer.screenSpaceEventHandler.setInputAction(function(mouse) {
                      var pickedObject = viewer.scene.pick(mouse.position);

                      if (Cesium.defined(pickedObject)) {
                          onevalue = pickedObject.id.id;

                         two(onevalue);
                          }
                      }
                    }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
    }


function two(){
//how can change the label properties in this function. i.e. I want to change the background color.

entity = viewer.entities.getById(onevalue);  // is this the document.getElementById?
    entity.label.backgroundColor = Cesium.Color.SKYBLUE;
}
2

Hi @lawyongwei

Try this to find the label id:
https://sandcastle.cesium.com/#c=lVRtb9owEP4rVr40SNS8dZqUUrRCNxUtKmhl3ZdIlUkucOphI9vhZVP/++xAS7sxop2iKPf2+DnfXVZCsxXCGjS7YhLWbAAGiwV/KG1hEqSlPlDSCpSgk6DOfiWSMQMEqUUlhzLDVFilI5YLMlD3XpS56qvNwfRcu/T2lTtuLmRGoJ3uNZOCBHf2jgQv1b1rsSUxBTo4QVq0CIaLLAtLFv8SzCKWBK1258IRPhWoNDpU4QuJ3tZ/CyJDORujTeffFFHYrDP/1E6iLZXBHdQeZiC0dV9Cdniu1eIGZhrAhOet5kfu4C6a/t1peuEV2OVdROxk2V4sbKwvfg5EqqJ6LyvQ1jWQRhpneGD+8M7MJ6NxJVLuhiRiZ+3mcsOMkObcgMb8rDoPiQaK/AS9XJvXeD++HnytzJ6K9GmmVSGzYxg/boeTz/+BMXaj5frO3g3DaxfbYcf1q/WhVolo7JaAvZKJffPuvY1/Gcbx4/XdzePo+yQe3lWTM3O17r8SjJjVBZzKed5vWyJTJY1yR5Kahftl4pjVLoN60C0J9l5wPuFiqbRlhaaQ84aFxZKEq7kxLdInsDw1ZrfAjHUbb1O7Ga7ctl0d+VGwlIQxzpMXRPf4E5Kg1224+L9SSZXLNnKjSGLrw+atXrwzcs67Dacez7RK0VToP5B/Aw

Thanks,
Kulvinder

3

You can also refer to Pick Entity logic at:

4

Hi @lawyongwei

Please refer section Managing Entity section at the following link to learn more on Cesium entity
https://www.cesium.com/docs/tutorials/creating-entities/

5

In case it isn’t clear from the other replies, Cesium Entities are not added to the DOM. You probably knew that, but I wanted to make sure.

The Viewer has a DataSource called entities that you can add an Entity to, or you can make your own DataSource and add it to viewer.dataSources. When you call viewer.entities.getById(id), you’re getting back an instance of Entity. You will notice in that second link that someEntity.label is an instance of LabelGraphics which has a backgroundColor property.

1 Like