Calculate position based on direction and distance


I’m trying to draw a line starting at one Entity and using distance the direction. Something like a line showing where a moving entity may be in some moments.

In addition, the distance is either in meter, or in pixel. So the user can switch between a prediction and just seeing the direction.

Is there a function to simply translate a point?

Thanks in advance, Heiner

Hi Heiner,

I’m not sure what your question is here. Are you trying to translate a point entity? Or are you trying to calculate the position of a point entity?

For translating a point, you can use a Callback Property, similar to this example: Sandcastle.

For computing the position, you can simply call entity.position where entity is your point entity.


thanks for you replay. The use case is f.e. showing live vessel traffic, and to draw a line from the current position to a predicted position where the vessel will be in a few minutes, based on the current course and speed.

Meanwhile we do the calculation outside of Cesium. Using a callback property is no option. When you have hundreds or thousands of moving entities, the framerate significantly drops due to the callback property.

I created these functions for a project of mine, see if they can help:

function arrowFromTo(latitude, longitude, height, elev, azimut, length, width, color){
  latitude = Cesium.Math.toRadians(latitude);
  longitude = Cesium.Math.toRadians(longitude);
  var origin = new Cesium.Cartographic(longitude, latitude, height);
  var originC3 = new Cesium.Cartographic.toCartesian(origin);

  // Altitude (aka Elevation) and Azimuth can also be seen as Pitch and Heading, with Roll = 0:
  var heading = Cesium.Math.toRadians(azimut);
  var pitch = Cesium.Math.toRadians(elev);
  var roll = 0.0;
  var direction = new Cesium.HeadingPitchRoll(heading, pitch, roll);

  var result = createROIfromRotation(origin, direction, length);

  drawLine(originC3.x ,originC3.y, originC3.z, result.x ,result.y, result.z, width, color);

function drawLine(x1,y1,z1, x2, y2, z2, width, color) {
  var origin = new Cesium.Cartesian3(x1,y1,z1);
  var dest = new Cesium.Cartesian3(x2,y2,z2);

    polyline: {
        positions: [
      arcType: Cesium.ArcType.NONE   ,
      width: width,
      material: new Cesium.PolylineArrowMaterialProperty(color)

function createROIfromRotation(position,  rotation, length) {
  // position: Cartographic - {latitude, longitude, altitude})
  // rotation: HeadingPitchRoll - {heading, pitch, roll}

  // Based on answer found here:

    var cartesianPosition = Cesium.Ellipsoid.WGS84.cartographicToCartesian(position);

    rotation.heading = rotation.heading - Cesium.Math.toRadians(90);
    var referenceFrame1 = Cesium.Transforms.headingPitchRollQuaternion(cartesianPosition, rotation);
    var rotationMatrix = Cesium.Matrix3.fromQuaternion(referenceFrame1, new Cesium.Matrix3());
    var rotationScaled = Cesium.Matrix3.multiplyByVector(rotationMatrix, new Cesium.Cartesian3(length, 0, 0), new Cesium.Cartesian3());
    var roiPos = Cesium.Cartesian3.add(cartesianPosition, rotationScaled, new Cesium.Cartesian3());
    return roiPos;
1 Like