Change CZML entity properties on mouse_move event

CesiumJS
1

Hi,
I've tried to apply the picking billboard example to billboards and polylines I've defined in a czml datasource unsuccessfully. Basically, I'm trying to change the width/color of a polyline or scale of a billboard, when I mouse_over them, then change it back after mouse has passed over the entity. In this example, the "picked" var is global scope. Oddly, this example actually works for the first few mouse_over tries, then it starts to do strange things like intermittently apply red over the cyan color, then eventually it stops working altogether.

function movementHandler() {
        var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);

        handler.setInputAction(function (movement) {
                var pickedObject = scene.pick(movement.endPosition);
               
                if (picked != null && Cesium.defined(picked.billboard)) {
                    picked.billboard.scale.setValue(1.0); //= new Cesium.ConstantProperty(1.0);
                    picked = null;
                } else if (picked != null && Cesium.defined(picked.polyline)) {
                    picked.polyline.width.setValue(2);
                    picked.polyline.material.color.setValue(Cesium.Color.CYAN);
                    picked = null;
                }

                if (Cesium.defined(pickedObject)) {

                    if (Cesium.defined(pickedObject.id.billboard)) {
                        pickedObject.id.billboard.scale.setValue(1.3);
                        picked = pickedObject.id;
                    } else if (Cesium.defined(pickedObject.id.polyline)) {
                       pickedObject.id.polyline.width.setValue(4);
                       pickedObject.id.polyline.material.color.setValue(Cesium.Color.RED);
                       picked = pickedObject.id;
                    }
                }
            },
            Cesium.ScreenSpaceEventType.MOUSE_MOVE
        );
}

Maybe I need to recurse through a collection of entities and check to see if my pickedObject is equal to it and manipulate it that way? I haven't figured out where the czml entities are stored though. I know you can manually add things to i.e. PolylineCollection or BillboardCollection, but what "Collection" are items created from czml stored? Thanks in advance!

2

Would anyone at least know where Cesium stores all the entities (billboards, polylines, etc) that are loaded through CZML?

3

You can find entities loaded through czml from the CzmlDataSource used to load the file. CzmlDataSource.entities gives an entity collection, and calling entities again on this gives an array of all the entities within this data source.

So to get the array the complete call would be:
var entityArray = CzmlDataSource.entities.entities;

``

4

Thanks Chris for the prompt reply! Can I also manipulate entities through this collection? Such as changing polyline color, or would I need to reload the czml somehow?

5

You should be able to directly manipulate individual entities from here. I haven’t done this myself, but with the entity collection you can call getById(id) to retrieve a czml object with the given id. This returns an entity and from here you’ll just have to dig into the different ways to manipulate each object.

It seems like you should know exactly what is going to be returned, since my understanding is you’re only working with billboards and polylines. Once you get your entity, you should only have to call something (for a billboard) like
billboardEntity.scale = 2;

``

Same idea should hold for changing colors, just instead of a number you’d reference a color. I think this should automatically update in the viewer without needing to reload anything, but I’m not as sure about that.

6

Thanks Chris, that's exactly what I needed!