Search code examples
javascriptreactjscesiumjs

How to get the index of data in Cesium


I have successfully implemented the tutorial on how to build a flight tracker. I would like to be able to access the index of my data at a current time in my app. In other words, when cesium is showing the animation of the airplane following the flight path, how can I get the current index that the airplane is at? (the index of my data).

I have two entities, one under a loop to generate all the points of the path and another where I load an airplane model. I need to sync other parts of my app with the current state of Cesium. (If I pause Cesium, I need to pause other things, etc.)

Im using Resium. btw. This is my airplane model. It animates according to the position property which is derived from const positionProperty = new SampledPositionProperty();

 // this is the loop that draws the path with points
 {flightData.map((data, i) => {
    const time = JulianDate.fromIso8601(data.timestamp);
    const position = Cartesian3.fromDegrees(
      data.longitude,
      data.latitude,
      data.height + 5.0
    );
    // here we add a sample, per object in the array 
    positionProperty.addSample(time, position);

    return (
      <Entity
        key={`${i}${position}`}
        position={position}
        point={{ pixelSize: 5, color: PhaseColors[data.phase] }}
      />
    );
  })}

// this is the airplane model that follows the path above
<Entity
style={{ border: "10px solid green" }}
// Here is where we pass the positionProperty sample. How can I get the current index out of this? 
position={positionProperty} 
// Automatically compute the orientation from the position.
orientation={new VelocityOrientationProperty(positionProperty)}
tracked
selected
model={{ uri: model, minimumPixelSize: 100, maximumScale: 100.0 }}
path={
  new PathGraphics({
    width: 3,
    material: Color.fromCssColorString("#202025"),
  })
}
availability={
  new TimeIntervalCollection([
    new TimeInterval({ start: start, stop: stop }),
  ])
}

One way I thought was to use the clock and get a timestamp. Using the timestamp I can do a look-up on my own data. But Id like to avoid this, it's pretty costly.

Any Cesium gurus out there? :D


Solution

  • You might be looking for SampledPositionProperty.getValue(...).

    You have a variable positionProperty that is of type SampledPositionProperty. It's marked const, but I believe this is incorrect, because you're adding samples to it after construction.

    In any case, to get data out of there, you want to call something like this:

    var currentPos = positionProperty.getValue(clock.currentTime);
    

    Note that this returns a full Cartesian3 position, not an index. This is because clock.currentTime may fall in between indices, and the positionProperty will smoothly interpolate in the intermediate times.