Update Entity with Live Data

CesiumJS
1

I am trying to show an entity moving within Cesium using live/dynamic data. I have tried multiple techniques from reading from earlier forums, mostly from 2015-2016. I just would like to know how to get it to work.

This is what I have currently. I have tried every method I have found on stackoverflow and Cesium forums and every time nothing will even load. It’s a blank screen every time.

// Get your token from https://cesium.com/ion/tokens
Cesium.Ion.defaultAccessToken = 'xxxx';

const viewer = new Cesium.Viewer('cesiumContainer', {
  terrainProvider: Cesium.createWorldTerrain()
});
    
const osmBuildings = viewer.scene.primitives.add(Cesium.createOsmBuildings());

const data = JSON.parse('C:/Users/moose/Documents/Cesium/telemetryGet.json');

var telemetry = Cesium.Cartesian3.fromDegrees(data.longitude, data.latitude, data.altitude);
var dronePositions = new Cesium.SampledPositionProperty();
dronePositions.addSample( Cesium.JulianDate.fromDate(new Date()), telemetry);
// Load the glTF model from Cesium ion.
const airplaneUri = await Cesium.IonResource.fromAssetId(1634734);
const DroneEntity = viewer.entities.add({
  position: dronePositions,
  // Attach the 3D model instead of the green point.
  model: { uri: airplaneUri },
  // Automatically compute the orientation from the position.
  orientation: new Cesium.VelocityOrientationProperty(telemetry),    
});

viewer.selectedEntity = DroneEntity;

  // setTimeout(loadModel, 1000);

viewer.zoomTo(viewer.entities);

var clock = viewer.clock;
var lastUpdated = clock.currentTime;
clock.onTick.addEventListener(function() {
    var dt = Cesium.JulianDate.secondsDifference(clock.currentTime, lastUpdated);
    if (dt >= 1.0) {
        // Add a new sample position
        lastUpdated = clock.currentTime;
    }
});
2

I guess that problem is in dronePositions.addSample.
addSample 's first parameter, time should drop in the time range of the clock of your viewer.

Do your Live data contain only positions?
If so, you should provide an appropriate time for each position when invoking dronePositions.addSample

Sample code

const {
    BoundingSphere,
    Cartesian3,
    ClockRange,
    JulianDate,
    SampledPositionProperty,
    VelocityOrientationProperty,
    Viewer
} = window.Cesium;

const viewer = new Viewer("cesiumContainer", {
    shouldAnimate: true
});

const startTime = JulianDate.fromDate(new Date(2019, 5, 10, 13));
const stopTime = JulianDate.addSeconds(startTime, 10, new JulianDate());

viewer.clock.startTime = startTime.clone();
viewer.clock.stopTime = stopTime.clone();
viewer.clock.shouldAnimate = true;
viewer.clock.clockRange = ClockRange.LOOP_STOP;

viewer.timeline.zoomTo(startTime, stopTime);

const latitude = 38;
const longitude = 127;
const altitude = 10;

const dronePositions = new SampledPositionProperty();

const startPoint = Cartesian3.fromDegrees(longitude, latitude, altitude);

dronePositions.addSample(startTime, startPoint);

const endPoint = Cartesian3.fromDegrees(longitude + 0.001, latitude, altitude);

dronePositions.addSample(stopTime, endPoint);

const airplaneUri = "../SampleData/models/CesiumDrone/CesiumDrone.glb";

const DroneEntity = viewer.entities.add({
    position: dronePositions,

    // Attach the 3D model instead of the green point.
    model: { uri: airplaneUri },
    // Automatically compute the orientation from the position.
    orientation: new VelocityOrientationProperty(dronePositions)
});

viewer.camera.flyToBoundingSphere(BoundingSphere.fromPoints([startPoint, endPoint]));
4

This does not make any sense to me. This is setting a start and end time with start and end points. My data is continuously updating.

5

add your points into dronePositions at the appropriate time just like setting the start and end point.
do not forget that time should drop in the time range of the clock