Cesium - using camera to scale a polygon to match Lat-Lon positions while zoom-in/zoom-out

Question

I am struggling with camera functionality that (I think) would provide a way to force my polygon to stick to the top of my house on zoom-out, zoom-in, and rotation (or camera move).

This question follows an earlier question that was resolved. Now I need a little help resolving my next issue.

The sample code I am trying to follow is located in the gold standard that appears to be baked into the existing camera controller here.

pickGlobe is executed with the parameters of the viewer, the correct mousePosition in world coordinates and a result parameter, which I don't care about right now. scene.pickPosition takes the c2position (Cartesian2) and should return the scratchDepthIntersection (Cartesian3). Instead, the returned value is undefined.

Here is my code:

function clickAction(click) {
    var cartesian = scene.camera.pickEllipsoid(click.position, ellipsoid);
    if (cartesian) {
        var setCartographic = ellipsoid.cartesianToCartographic(cartesian);
        collection.latlonalt.push(
            Cesium.Math.toDegrees(setCartographic.latitude).toFixed(15),
            Cesium.Math.toDegrees(setCartographic.longitude).toFixed(15),
            Cesium.Math.toDegrees(setCartographic.height).toFixed(15)
        );
        lla.push(Cesium.Math.toDegrees(setCartographic.longitude), Cesium.Math.toDegrees(setCartographic.latitude));
        if (lla.length >= 4) {
            console.log((lla.length / 2) + ' Points Added');
        }
        enableDoubleClick();
        enableDraw();

        testMe(click.position);  <--------------------- straight from the mouse click
    }
}

var pickedPosition;
var scratchZoomPickRay = new Cesium.Ray();
var scratchPickCartesian = new Cesium.Cartesian3();
function testMe(c2MousePosition) {  <--------------------- straight from the mouse click
    if (Cesium.defined(scene.globe)) { 
        if(scene.mode !== Cesium.SceneMode.SCENE2D) {
            pickedPosition = pickGlobe(viewer, c2MousePosition, scratchPickCartesian);
        } else {
            pickedPosition = camera.getPickRay(c2MousePosition, scratchZoomPickRay).origin;
        }
    }
}

var pickGlobeScratchRay = new Cesium.Ray();
var scratchRayIntersection = new Cesium.Cartesian3();    
var c2position = new Cesium.Cartesian2();
function pickGlobe(viewer, c2MousePosition, result) {   <--------------------- straight from the mouse click
    c2position = c2MousePosition;   <--------------------- setting to Cartesian2

    var scratchDepthIntersection = new Cesium.Cartesian3();
    if (scene.pickPositionSupported) {
        scratchDepthIntersection = scene.pickPosition(c2MousePosition);  <--------------------- neither works!
    }

}

Here are my variables:

Here is the result:

Here are my questions to get this code working:

1. Why is scratchDepthIntersection not getting set? c2position is a Cartesian2 and c2MousePosition is straight from the mouse.click.position and scratchDepthIntersection is a new Cartesian3.

Answer 1

The correct value for mousePosition is a Cartesian2 containing window coordinates, not a Cartesian3. Such mouse coordinates usually come from a callback from Cesium.ScreenSpaceEventHandler, but can also be constructed from native JavaScript mouse/touch events.

If you inspect the contents of mousePosition, you should find x and y values in window pixel coordinates.

I see you edited the question to include the contents of mousePosition, and it looks like the mouse coordinates have already been converted into ellipsoid Cartesian3 coordinates, which will prevent this code from working. You want original mouse coordinates going directly into scene.pickPosition for this to work.