How to update Rectangle : coordinates via CallbackProperty() ?

CesiumJS
1

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

2

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).

3

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

4

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).

5

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...

6

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

7

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: