javascript - cesium-在选定点上绘制一组圆形线条

Question

我要从单击的点绘制一组圆形的线。我的代码工作正常，但它绘制的圆远离单击的点。有人可以帮助我找出我的错误在哪里吗？

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

感谢您的帮助

Answer 1

如果想画圆，画一个ellipse geometry更简单有轮廓。对于圆，将 semiMinorAxis 设置为与 semiMajorAxis 相同的值，其值以米为单位。

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