Displaying dynamic CZML data

CesiumJS
1

Hi,

I'm using a CzmlDataSource object to display an entity on a map. I first create the object with this line of code, and it displays correctly.

var promise = viewer.dataSources.add(Cesium.CzmlDataSource.load(czml));
promise.then(function(dataSource){
  viewer.trackedEntity = dataSource.entities.getById('aircraft model');
}).otherwise(function(error){
  window.alert(error);
})

For reference, this is the content of the czml variable: https://pastebin.com/V4Ygrp5U

That all works nicely and a plane is rendered on the screen.

I'm now trying to update the plane dynamically, so I've subscribed to Server Side Events with the following code:

function startup(Cesium) {
  var czmlStream = new Cesium.CzmlDataSource();
  var czmlEventSource = new EventSource(‘http://localhost:11000/aircraft/?format=czml’);
  czmlEventSource.addEventListener(‘czml’, function(czmlUpdate) {
      try {
      console.log(czmlUpdate.data);
      var json = JSON.parse(czmlUpdate.data);
      czmlStream.process(json);
      } catch (t) {
       console.error(t)
      }
    }, false);

  var viewer = new Cesium.Viewer('cesiumContainer', {
    infoBox : false,
    selectionIndicator : false,
    shadows : true,
    automaticallyTrackDataSourceClocks : false
  });
  
  viewer.dataSources.add(czmlStream);

The data is successfully arriving from the server, as I can see it logged in the client console. This is an example of one of the received updates: https://pastebin.com/kbz2GheL

Despite all this, the plane I created using the 'load' method is not updated.

Any suggestions?

Thank you,
Fidel

2

Hello Fidel,

I wrote this test app with the CZML packets you provided and the plane’s position looked like it updated correctly using czmlDataSource.process. Here’s the code:

var czml = [{
“id” : “document”,
“name” : “CZML Model”,
“version” : “1.0”
}, {
“id” : “aircraft model”,
“name” : “Cesium Air”,
“position” : {
“cartographicDegrees” : [-77, 37, 10000]
},
“model”: {
“gltf” : “…/…/SampleData/models/CesiumAir/Cesium_Air.glb”,
“scale” : 2.0,
“minimumPixelSize”: 128
}
}];

var updatedCzml = [{
“id”:“document”,
“name”:“CZML Model”,
“version”:“1.0”
},{
“id”:“aircraft model”,
“position”: {
“cartographicDegrees”:
[-139.23640674352512,24.89787519772953,48897.796695947756]
}
}];

var czmlStream = new Cesium.CzmlDataSource();

var viewer = new Cesium.Viewer(‘cesiumContainer’, {
infoBox : false,
selectionIndicator : false,
shadows : true,
automaticallyTrackDataSourceClocks : false
});
viewer.dataSources.add(czmlStream.load(czml));

Sandcastle.addToolbarButton(‘Process’, function() {
czmlStream.process(updatedCzml);

});

``

Can you see anything that varies from what you’re doing? If this doesn’t work for you, what version of Cesium are you using? And also, what is your browser and OS?

Best.

Hannah

3

Thank you so much Hannah - I can see what I did wrong. I wasn’t using the same CzmlDataSource object for the initial load and updates.

I had:

viewer.dataSources.add(Cesium.CzmlDataSource.load(czml));

``

You have:

viewer.dataSources.add(czmlStream.load(czml));

``

Thanks again,

Fidel

4

I have the same aircraft model with very similar code;
the aircraft displays, the position updates are coming, but the aircraft is not "moving".
That is in my browser, if I go to another page then comeback to cesium, the aircraft has moved, but not if I stay on the same page.
It seems the display is not being refreshed. Do I have to do something special for
the viewer/scene to be refreshed?