Need to be make a billboard entity have selectable call back function and maybe pop up info

742 views Asked by At

I have a Cesium map with a billboard entity which contains an icon. We periodically update the location of the icon.

I need to make the icon selectable on the map, and be able call a callback function, and also maybe pop up some information about the entity. Is there a clean way of doing this?

        updateMover: function (aoMover, aoPosition, aoHeading, aoYaw, aoPitch, aoRoll, aoView) {
            aoMover.point = undefined;
            aoMover.label.pixelOffset =  new Cesium.Cartesian2(0, -50);

            if (aoMover.billboard === undefined) {
                // If it moves, its not a fixed radar
                aoMover.billboard = {
                // image: '../images/Green.png', // default: undefined
//...
1

There are 1 answers

0
emackey On

An entity's name and description fields can be used to pop-up information about the entity.

aoMover.name = 'Plaintext human-readable short name';
aoMover.description = 'Full <strong>HTML</strong> description...';

The HTML can contain any styling or markup, but by default will be placed in a sandboxed iframe to offer some XSS protection from user-supplied data. By default it is shown in a Cesium InfoBox owned by the viewer, which owns the sandboxed iframe. Here's a screenshot, showing the default InfoBox on the right-hand side:

Sample InfoBox screenshot

Getting notified when the selection changes is a little trickier, currently this is considered "private" behavior and may change without notice in a future version of Cesium (for example by introducing an official Event to fire). But until an official path exists, you can use something like this:

Cesium.knockout.getObservable(viewer, '_selectedEntity').subscribe(function (entity) {
    if (Cesium.defined(entity)) {
        console.log('Selected ' + (entity.name || entity.id));
    } else {
        console.log('De-selected.');
    }
});