ellipsoid over time

CesiumJS
1

Hello,

i'm trying to draw an ellipsoid between 2 points at a certain clock time.

i tried several way, but none of them worked :confused:
i'm kinda lost, if someone can help me it would be very nice !

i tried like this :

var start = Cesium.JulianDate.fromDate(new Date(currentAttack._source.LogDate));

var stop = Cesium.JulianDate.addSeconds(start, duration, new Cesium.JulianDate());

var compostart = new Cesium.SampledPositionProperty();
compostart.addSample(start,
    Cesium.Cartesian3.fromDegrees(fromPoint.lon, fromPoint.lat));

var compostop = new Cesium.SampledPositionProperty();
  compostop.addSample(stop,
    Cesium.Cartesian3.fromDegrees(toPoint.lon, toPoint.lat));

var target = viewer.entities.add({
  ellipsoid: new Cesium.EllipsoidGeodesic({
   start: compostart,
   end: compostop
})
});

can you help me ? or point me to the good direction ?

thanks very much, i'm very lost and cant find any clue on it :frowning:

2

i found a solution on my own after all. can you give me some feedback on it, or at least if someone else is looking for something similar:

3

To stay in the pure Cesium world and since you’re using linear interpolation you can use the PolylinePipeline.generateArc to calculate the points. That is going to generate an array of points based on your specification in radians.

If you’re going to be doing non-linear interpolation I recommend using http://www.movable-type.co.uk/scripts/latlong.html’s library to calculate the heading/bearing between the 2 points based on varying distances traveled during the specific time interval.

The primary reason you want to use these methods instead of the method you used is that they both use spherical geometry into account when determining the in-between lat/lons.

4

thanks, i will look into it!

5

Thanks a lot Mike. it's working much better !

why this function is not into the documentation ? it's working awesomely and i wouldnt have find it if you didnt point me into the direction ! :slight_smile:

here is a sample of my code (i can't post it all because it's link to another application):

//generate a collection of position samples
    var positions = calculatePositionSamples(att.fromPoint, att.toPoint, start, duration);

    var target = viewer.entities.add({
      description: att.name,
      position: positions,
      path: {
        material: new Cesium.PolylineArrowMaterialProperty(getColor(att.name)),
        width: 8,
        trailTime: 15,
        leadTime: 10
      }

    });
  });

//major update thanks to Mike
function calculatePositionSamples(point, endPoint, startTime, duration) {
  var property = new Cesium.SampledPositionProperty();

  var positions = Cesium.PolylinePipeline.generateCartesianArc({
    positions: Cesium.Cartesian3.fromDegreesArray([
      point.lon, point.lat,
      endPoint.lon, endPoint.lat
      ])
  })

  var deltaStep = duration / positions.length
  var currentPosition;
  for (var i = 0, since = 0; i < positions.length; i +=1, since += deltaStep)
  {
   property.addSample(
    Cesium.JulianDate.addSeconds(startTime, since, new Cesium.JulianDate()),
    positions[i])
   
}
return property;
}

6

it's working very well when i got 2 very distant points but when i got 2 very close points i got some visbility issue.

here is a picture showing you what i mean : http://img42.com/zcX0d
you can see a huge arrow from france to the US and a very very small one from France to France.

is there another [magic] function like the last one that allow me to have a bigger curve (when i want to) to increase it's visibility ?
i think i can do it by changing the ellipsoid or the height, but i failed painfully when i tried some options blindly (i don't really understand the math behind :frowning: ).

if you (or someone else) have a clue it would be awesome

7

can you share a picture of the close points and one of what you would like it to look like?

8

Hello Mike,

here is the issue i have (i made a red rectangle for you to see the very small arrow) : http://img42.com/wzGhq
as you can see you can barely see it. i know how to manage to isolate those i want to increase the visbility from the normal one (like the green on the example), but i have no clue how to increase its visbility.

here is an example made with gimp of what i would want to do: http://img42.com/SV3q2

Again thanks a lot for your Time!

9

To make what you want programmatically is going to be challenging. Probably involving some parametric equations.

You might be better off using a billboard when you’re so far zoomed out from a location. You can toggle the show/hide of the billboard, by attaching a method to the scene.preRender event. Check the distance of the points in screen space, if they are only a few pixels apart, then you hide the polyline and show the billboard.

Maybe someone else has some other ideas, but I think this will work well for you.

10

a long time ago i remember working with parametric equation, but my brain decide to forget this kind of thing pretty fast !
i will look a bit into it, but i don't think i will find a working thing :stuck_out_tongue:

the idea of the billboard is nice but i cant predict the orientation of the arrow, but start and end point are geoposition generated by my backend (elasticsearch). so i dont think it will work. and i need somekind of animation too.

11

The animations can be handled by using SampledPointProperty. You can probably directly use the points you generated from the GenerateArc and space them out over your animation duration.

For the path at close proximity I I recommend going onto http://math.stackexchange.com/ and writing up the situation like a word problem. I’ve gotten some pretty awesome answers and equations from those users. Make sure to include the picture.