Ellipse semi/major minor based on mouse position?

CesiumJS
1

Would anyone have an example of drawing an ellipse based on the movement of the mouse they could share?

Appreciate the help!

2

Take a look at the Picking Sandcastle example for how to handle mouse movement and clicking.

Here’s something along the lines of what you may need, but I imagine you would have more in depth functionality for drawing an ellipse.

var viewer = new Cesium.Viewer(‘cesiumContainer’);

var center = Cesium.Cartesian3.fromDegrees(-103.0, 40.0);

var radius = 250000.0;

function getRadius() {

return radius;

}

var redEllipse = viewer.entities.add({

position: center,

name : ‘Red ellipse on surface’,

ellipse : {

semiMinorAxis : new Cesium.CallbackProperty(getRadius, false),

semiMajorAxis : new Cesium.CallbackProperty(getRadius, false),

material : Cesium.Color.RED.withAlpha(0.5)

}

});

var moveHandler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);

moveHandler.setInputAction(function(movement) {

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

radius = Cesium.Cartesian3.distance(center, mousePosition);

}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

viewer.zoomTo(viewer.entities);

``

3

Thanks Gabby! I was actually more so looking for an example of how to calculate the major/minor based on the current mouse position.

4

You’ll need the max and min distance from the center.

The following:

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

Will give you the position of the mouse on the globe.

The rest f the math you should be able to find on a math forum most likely.