Drawing Arc line

CesiumJS
1

Hi,

Trying this again.
I am a cesium newbie and I would like to draw an arc line from point A (lng/lat) to point B (lng/lat). I tried using the poly line but it seems to be a flat line which doesn't account for the 3D curvature. Does cesium contain a draw arc function which I can use to draw the arc line? Thank you for your help.

2

Hi,

We have this on the roadmap to do quite soon since we also want it for walls.

In the meantime, there is a small C# function that you can port to JavaScript to create the curve, and then pass all the positions to the Polyline. See this discussion.

Patrick

3

Hi,
Thank you for the information.
For now, I solved it modifying a function on an earlier thread. My function below.

function addLines(pointA,pointB){
        var earth = Cesium.Ellipsoid.WGS84;

        // start and end points on the surface of the earth

        var startPoint = earth.cartographicToCartesian(Cesium.Cartographic.fromDegrees(pointA[0][0], pointA[0][1], 0.0));

        var endPoint = earth.cartographicToCartesian(Cesium.Cartographic.fromDegrees(pointB[0][0], pointB[0][1], 0.0));

        // determine the midpoint (point will be inside the earth)

        var midpointCartesian = startPoint.add(endPoint).divideByScalar(2.0);

        // move the midpoint to the surface of the earth

        earth.scaleToGeodeticSurface(midpointCartesian);

        // add some altitude if you want (1000 km in this case)

        var midpointCartographic = earth.cartesianToCartographic(midpointCartesian);

        midpointCartographic.height = 1000000;

        midpointCartesian = earth.cartographicToCartesian(midpointCartographic);

        // create a hermite spline that goes through these three points

        var hermiteSpline = new Cesium.HermiteSpline( [

            {point: startPoint, time: 0.0},

            {point: midpointCartesian, time: 0.5},

            {point: endPoint, time: 1.0}

        ]);

        // create a 20 point polyline that follows the spline

        var polylinePoints = ;

        for(var i=0; i<20; ++i) {

            polylinePoints.push(hermiteSpline.evaluate(i/20));

        }

        var polylineCollection = new Cesium.PolylineCollection();

        var polyline = polylineCollection.add();

        polyline.setPositions(polylinePoints);

        var primitives = widget.scene.getPrimitives();

        primitives.add(polylineCollection);
}

4

I feel the most important is add the accurate altitude values from terrain. So the new polyline will exactly on the top of surface. Is there a way to pull the height values for each coordinates of the polyline, like drape the polyline on terrain? Thanks.

5

See the Sample Everest Height example in the Sandcastle terrain example. This uses Cesium.sampleTerrain to get the altitudes, which is a reasonable choice for now until we implement polylines on terrain perhaps later this year.

Patrick

6

I know this is much later, but did this roadmapped feature ever get realized?

7

Polylines added via the Entity API curve to the globe by default. You can see an example here: http://cesiumjs.org/Cesium/Apps/Sandcastle/index.html?src=Polyline.html&label=Geometries
We do not yet have support for polylines on terrain.

-Hannah