[cesium-dev] Click event on an entity?

CesiumJS
1

Hello,

I don’t know correct way to do so (I’ve also asked same question in this ML before),

but I solved it by my own way.

How I do so is like below:

var billboards = widget.scene.primitives.add(new Cesium.BillboardCollection());
var pinBuilder = new Cesium.PinBuilder();

for (var i = 0; i < constant.points.length; i++) {
    var point = constant.points[i];
    billboards.add({
        id: "label_" + i,
        image : pinBuilder.fromText(point.label, Cesium.Color.fromCssColorString(point.color),48),//Cesium.Color.BLACK, 48),
        verticalOrigin : Cesium.VerticalOrigin.BOTTOM,
        position: Cesium.Cartesian3.fromDegrees(point.latlng[0], point.latlng[1], point.latlng[2])
    });
}
var handler = new Cesium.ScreenSpaceEventHandler(widget.scene.canvas);
handler.setInputAction(function (movement) {
    var pick = widget.scene.pick(movement.position);
    if (Cesium.defined(pick) && (pick.id.match(/label_([0-9]+)/))) {
        var id = parseInt(RegExp.$1);
        var point = constant.points[id];
        widget.infoBox.viewModel.titleText = point.label;
        widget.infoBox.viewModel.descriptionRawHtml = point.description;
        widget.infoBox.viewModel.showInfo = true;
        widget.infoBox.viewModel.closeClicked.addEventListener(function() {widget.infoBox.viewModel.showInfo = false;});
    }
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);

Regards,

Ko-hei

2

You can use the HTML standard mouse click events and then use scene.pick to do the pick. For details see the Visualizing Spatial Data tutorial: http://cesiumjs.org/2015/02/02/Visualizing-Spatial-Data/ (Search for picking).

1 Like
3

Thank you!
Picking info is now moved to https://cesium.com/docs/tutorials/creating-entities/#picking
Here is a nice intro to HTML events: https://javascript.info/introduction-browser-events

1 Like