Majid Hojati Majid Hojati - 5 months ago 125
Javascript Question

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

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

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