Scene.pick Picking problems (undefined) for rectangles and billboards

[Andy Whelan]

Hello,

I am having a problem using the Scene.pick functionality of Cesium.

I have an application where I draw a bounding box form a series of mouse clicks. I then display a bunch of billboard pins for each coordinate of my data that falls within that bounding box. I am having trouble trying to pick (with a left mouse click) any of these entities.

The following could be important: For a handler like the following I can pick the rectangle ONLY if it is zoomed in enough to fill the whole window!

I would like to know:

A)Why picking only returns a defined entity when It’s a the rectangle, but only when it is zoomed enough to fill the whole window

B)Why picking any of the pins/billboards described below will always return undefined

Any help would be appreciated!

 

Below are the specifics:

I have a viewer:

var viewer = new Cesium.Viewer('cesiumContainer', {

    sceneModePicker : false,

    animation : false,

    timeline : true,

    navigationHelpButton : false,

    baseLayerPicker : false,

    geocoder : true,

    homeButton : true,

    infoBox : true,

    fullscreenButton : false,

    scene3DOnly : true,

    showRenderLoopErrors : true

    });

var scene = viewer;

A handler:

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

    var pick = scene.pick(movement.position);

    if (Cesium.defined(pick)) {

      console.log('Mouse clicked rectangle.');

    }

  }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

A rectangle:

var coordinates array = <some coordinates>;

this.boundingBox =

 {

     name: "Bounding Box",

     id: 'BoundBox',

     rectangle: {

        coordinates:  Cesium.Rectangle.fromCartographicArray(coordinates),

        height: -100,

        material: Cesium.Color.RED.withAlpha(0.1),

        outline: true,

        outlineColor: Cesium.Color.LIME

       }

  };

  this.boundingBoxReference = entities.add(this.boundingBox);

The billboards are created as follows:

var pinBuilder = new Cesium.PinBuilder();

var report =

    {

        name : 'Report: ' + sr.id,

        id: 'pin' + sr.id + 'Report',

        description : <some html string>,

        position : Cesium.Cartesian3.fromRadians(sr.longitude, sr.latitude),

        billboard : {

            image : pinBuilder.fromText("Report", pinColor, 50).toDataURL(),

            verticalOrigin : Cesium.VerticalOrigin.BOTTOM

        }

    }

viewer.entities.add(report);

[Hannah Pinkos]

Hello,

It looks like you have one error in the code you pasted.  

var scene = viewer;

should be 

var scene = viewer.scene;

Beyond that, why are you setting your rectangle height = -100?  I think that's what's causing you to not be able to pick that.  Pick is hitting the globe surface before it hits the rectangle.

From the code you posted though, billboard picking works for me.  If you're still having problems, can you post a more specific code example?

Thanks,

Hannah

[Andy Whelan]

Hi Hannah,

Actually the

var scene = viewer;

issue was a typo in the message. My real issue was a bit more complicated. I wasn't doing exactly what I said I was doing above upon second glance. I was passing the Scene.pick method a Cartographic object rather than the "movement.position" that I stated above.

After a double left click I start drawing a bounding box. In the following code. I calculate the new mouse position to get the ending corner of the bounding box (newMousePosition):

        var cartesian = camera.pickEllipsoid(movement.endPosition, scene.globe.ellipsoid);

        if (cartesian)

        {

            var newMousePosition = llipsoid.cartesianToCartographic(cartesian);

        }  

So the newMousePosition variable above is a Cartographic(https://cesiumjs.org/Cesium/Build/Documentation/Cartographic.html) object. I was passing that to Scene.pick rather than the "movement.position" that I had advertised in my original code. After looking over my forum question, I realized this and…Scene.Pick works if I pass it the right object (movement.position). I can pick  billboards and the rectanbles at any zoom level.

Thanks for your help! Sorry about the confusion.