Calculate position based on direction and distance

CesiumJS
1

Hi,

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

2

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.

3

Hi,

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.

4

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

  viewer.entities.add({
    polyline: {
        positions: [
          origin,
          dest
          ],
      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:
  // https://stackoverflow.com/questions/58021985/create-a-point-in-a-direction-in-cesiumjs

    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;
}
2 Likes