How to update Rectangle : coordinates via CallbackProperty() ?

716 views
Skip to first unread message

andrew...@gmail.com

unread,
Mar 7, 2016, 6:56:58 PM3/7/16
to cesium-dev
I am attempting to create a rectangle that 'draws' on the map (much the same way DrawHelper does, click to select start position, move mouse to 'draw' rectangle (from the starting position to the current mouse position), click to finalize rectangle).

I was able to do it successfully with circle, however, I am not sure how to go about using the CallbackProperty to update the rectangles coordinates.

function getExtent() {
console.log("getExtent()");
var e = new Cesium.Rectangle();

var firstPos = Cesium.Cartographic.fromCartesian(firstPoint);
var mousePos = Cesium.Cartographic.fromCartesian(mousePosition);

// Re-order so west < east and south < north
e.west = Math.min(firstPos.longitude, mousePos.longitude);
e.east = Math.max(firstPos.longitude, mousePos.longitude);
e.south = Math.min(firstPos.latitude, mousePos.latitude);
e.north = Math.max(firstPos.latitude, mousePos.latitude);


function toDegrees(radians) {
var pi = Math.PI;
return (radians * (180/pi));
}

return [toDegrees(e.west), toDegrees(e.south), toDegrees(e.east), toDegrees(e.north)];
}

extent = viewer.entities.add({
name : 'Extent',
rectangle : {
coordinates : Cesium.Rectangle.fromDegrees(new Cesium.CallbackProperty(getExtent(), false)),
material : Cesium.Color.GREEN.withAlpha(0.5)}
});

Is what I was trying to do, so on moving the mouse, the getExtent() function calculates a new rectangle from the firstPosition clicked and the current mousePosition.

The issue I have is I am not sure how to go about doing this. I've tried using Cartesian cords from the firstPosition (click.position) and the mousePosition (movement.endPosition). But I need cartographic points to make new coordinates. So I tried changing the Cartesian to Cartographic and doing it again (changing the radians to degrees then the getExtent() should return an array of degrees) but I couldn't get the CallbackProperty to update with the mouse moving.

Any clues? Any help would be amazing,

Andrew

andrew...@gmail.com

unread,
Mar 8, 2016, 9:45:28 AM3/8/16
to cesium-dev, andrew...@gmail.com
I have tried a whole bunch of things and cannot figure out how to update the rectangles coordinates via a CallbackProperty, does anyone have any idea (even just a basic example would help greatly).

Hannah Pinkos

unread,
Mar 8, 2016, 9:47:31 AM3/8/16
to cesium-dev, andrew...@gmail.com
Have your callback function return Cesium.Rectangle.fromDegrees(west, south, east, north.)
Then add your entitiy like this:

extent = viewer.entities.add({
          name
: 'Extent',
          rectangle
: {

              coordinates
: new  Cesium.CallbackProperty(getExtent(), false),
               material
: Cesium.Color.GREEN.withAlpha(0.5)}
});


Best,

Hannah

Matthew Amato

unread,
Mar 8, 2016, 9:50:17 AM3/8/16
to cesiu...@googlegroups.com
That should be `getExtent` without the parens, not `getExtent()` with them, one is a reference to the function, the other is calling the function and passing in the return value (which you don't want).

Also, the signature of CallbackProperty is (time, result), so it should be 

function getExtent(time, result)

The implementation check if result is defined and use that rather than return a new value every time (which will hurt performance).

--
You received this message because you are subscribed to the Google Groups "cesium-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to cesium-dev+...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Message has been deleted

andrew...@gmail.com

unread,
Mar 8, 2016, 9:56:36 AM3/8/16
to cesium-dev
holy crap that's more like it, now the callback actually calls back. What is weird (and possibly just a fluke) is that this extent code is a copy-paste from a circle entity code I made, and in that code I call "getRadius()" and it works...

andrew...@gmail.com

unread,
Mar 8, 2016, 9:59:52 AM3/8/16
to cesium-dev, andrew...@gmail.com
NEVERMIND, I just checked the circle code again, it does not call getRadius() it calls getRadius... I still have some learning to do it seems!

Thanks so much

nqh...@gmail.com

unread,
Sep 10, 2019, 10:42:41 PM9/10/19
to cesium-dev
Can you explain to me how can i get "firstpoint" and "mousePosition" ?

Vào 06:56:58 UTC+7 Thứ Ba, ngày 08 tháng 3 năm 2016, andrew...@gmail.com đã viết:
Reply all
Reply to author
Forward
0 new messages