cesium-Draw a set of lines in shape of circle on selected point

Question

I am going to draw a set of lines in shape of circle from a clicked point.My code works fine but It draws the circle far away from clicked point.Can some one help me figure out where is my mistake?

    var viewer = new Cesium.Viewer('cesiumContainer');
var handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
handler.setInputAction(function(click) {
    var alertText = '';
    function addToMessage(key, value) {
        alertText += key + ': ' + value + '\n';
    }

  //  var pickedObject = scene.pick(click.position);

       // addToMessage('target', pickedObject.id.id);
        var position = viewer.camera.pickEllipsoid(click.position);
        addToMessage('screenX', click.position.x);
        addToMessage('screenY', click.position.y);
        addToMessage('didHitGlobe', Cesium.defined(position));
        var cartographicPosition = Cesium.Ellipsoid.WGS84.cartesianToCartographic(position);
        addToMessage('longitude', cartographicPosition.longitude);
        addToMessage('latitude', Cesium.Math.toDegrees(cartographicPosition.latitude));
        terrainSamplePositions = [cartographicPosition];
        Cesium.sampleTerrain(viewer.terrainProvider, 9, terrainSamplePositions).then(function() {
            addToMessage('height', terrainSamplePositions[0].height);
        }).always(function() {
          //  alert(alertText);
        });

   // var x=Cesium.Math.toDegrees(cartographicPosition.latitude);
  //  var y=Cesium.Math.toDegrees(cartographicPosition.longitude);
     var y=cartographicPosition.latitude;
     var x=cartographicPosition.longitude;
   // alert(x);//35
  //  alert(y);//-101
    var radius=0.01;
    var segmants=360;
    var seg=Math.PI*2/segmants;
    var origin=  new Cesium.Cartesian3(x, y, 0);
    var shape = [];
    for (i = 0; i <= segmants; i++) {
        var teta=seg*i;
        var a =x+Math.cos(teta)*radius;
        var b =y+Math.sin(teta)*radius;
       // shape.push(a);
       // shape.push(b);
        var origin=  new Cesium.Cartesian3(x, y, 0);
        console.log(["origin is",origin.y,origin.x]);

        var direction=  new Cesium.Cartesian3(a, b, 0);
        console.log(["direction is",direction.y,direction.x]);



         viewer.entities.add({
            name : 'Red line on the surface',
            polyline : {
                positions : Cesium.Cartesian3.fromCartographicArray([origin.x, origin.y,
                    direction.x,  direction.y]),
                width : 5,
                material : Cesium.Color.RED
            }
        });






    }



    viewer.zoomTo(resultPolygon.position);
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);

thanks for your help

Answer 1

If want to draw a circle, simpler to draw an ellipse geometry with an outline. For a circle, set semiMinorAxis with same value as semiMajorAxis whose value is in meters.

var position = viewer.camera.pickEllipsoid(click.position);
var cartographicPosition = Cesium.Ellipsoid.WGS84.cartesianToCartographic(position);
var y = cartographicPosition.latitude;
var x = cartographicPosition.longitude;

var entity = viewer.entities.add({
        position: Cesium.Cartesian3.fromRadians(x, y),
        ellipse : {
            semiMinorAxis : 10,
            semiMajorAxis : 10,
            fill : false,           
            outline: true,
            material : Cesium.Color.RED,
            outlineColor : Cesium.Color.RED,
            outlineWidth : 2
        }
 });
 viewer.zoomTo(entity);