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

CesiumJS
1

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 = ;

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 : ,

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

billboard : {

        image : pinBuilder.fromText("Report", pinColor,

50).toDataURL(),

        verticalOrigin : Cesium.VerticalOrigin.BOTTOM

}

}

viewer.entities.add(report);

``

2

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

3

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.