creating a height arc for a polyline

CesiumJS
1

Hi, I'm new to cesium and I've been playing with it in the sandbox. I was wondering if there's a way to create a height in the middle of the arc for a polyline that is connected to two different entities (so that the line goes up and back down). Below is a code example that I've been playing with. Thank you in advance!

var viewer = new Cesium.Viewer('cesiumContainer');

//the points for example purposes (long and lat)
var p1x = -123.0744619;
var p1y = 44.0503706;
var p2x = -75.62898254394531;
var p2y = 40.02804946899414;
var midpoint = 250000;

//create truck1
var truck1 = viewer.entities.add({
  name : 'truck1',
      position: Cesium.Cartesian3.fromDegrees(p1x,p1y),//assign it a position
  model: {
         uri: '../../SampleData/models/CesiumGround/Cesium_Ground.gltf',
             minimumPixelSize : 128,//min scale of model
                 maximumScale : 20000//max scale of model
  },
});

//create truck2
var trucK2 = viewer.entities.add({
  name : 'truck2',
      position: Cesium.Cartesian3.fromDegrees(p2x,p2y),//assign it a position
  model: {
         uri: '../../SampleData/models/CesiumGround/Cesium_Ground.gltf',
         minimumPixelSize : 128, //min scale of model
         maximumScale : 20000 //max scale of model
  },
});

//Creating the line
var linetest = viewer.entities.add({
    name: 'line',
    polyline : {
        //set points from truck1 to truck2
        positions : Cesium.Cartesian3.fromDegreesArray([p1x, p1y,
                                                               p2x, p2y,]),
        width : 5, //width of line
        material : new Cesium.PolylineOutlineMaterialProperty({
            color : new Cesium.CallbackProperty(test, true), //call function test to display line
            outlineWidth : 1,
            outlineColor : Cesium.Color.GREEN
        }),
    }
});

//just logging to double check variables
console.log("p2.x: " + p2x);
console.log("p2.y: " + p2y);
console.log("p1x: " + p1x);
console.log("p1y: " + p1y);

//returning a blinking red line
function test(time, result) {
        return Cesium.Color.fromAlpha(Cesium.Color.RED,(new Date(time).getTime() % 2000) / 1000, result);
}

2

Hello,

You can do this by adding the midpoint at the desired height to your array of positions. You can find the midpoint using EllipsoidGeodesic.interpolateUsingFraction

Best,

Hannah