Stream CZML

CesiumJS
1

1. A concise explanation of the problem you’re experiencing.

I am trying to create entities from streaming data:

  • I have set up an Html file that loads the Cesium sandcastle globe.
  • Data is sent from a PHP file using Server Sent Events.
    The code in the html file is:

/Create new CZML datasource

var czmlStream = new Cesium.CzmlDataSource();

var czmlStreamUrl = ‘http://czmlhost/sse.php’;

//set up EventSource

var czmlEventSource = new EventSource(czmlStreamUrl);

//Listen for EventSource data coming across as event: czml

czmlEventSource.addEventListener(‘message’, function(czmlUpdate) {

//process the ‘data:’ coming across as JSON into the datasource

console.log(‘xxxxxx’);

var dat = (czmlUpdate.data);

console.log(dat);

var xx = JSON.parse(dat);

console.log(xx);

czmlStream.load(xx);

console.log('Processing ’ + czmlStream);

viewer.dataSources.add(czmlStream);

``

The first entity sent and appears to be processed correctly and displays in the Chrome console as:

  1. {id: “document”, version: “1.0”}
  2. id:“document”
  3. version:“1.0”
  4. proto:Object

``

The second (billboard) entity is shown as

  1. {id: “2”, billboard: {…}, position: {…}}
  2. billboard:{image: “labels.jpg”, verticalOrigin: “BOTTOM”, show: true}
  3. id:“2”
  4. position:{cartographicDegrees: Array(3)}
  5. proto:Object

``

These suggests the structure of the JSON is correct (the JSON is shown as valid by a validator).

Trying to add the billboard entity results in a runtime error:

RuntimeError {name: “RuntimeError”, message: “The first CZML packet is required to be the document object.”, stack: “Error
at new RuntimeError (http://localhost:80…pps/Sandcastle/gallery/hello%20world2.html:54:14)”}

``

I can’t see why this error occurs - the first packet is the document object; the second packet has a different ID.

Please would it be possible to suggest where I am going wrong?

Many thanks,

Hugh

2

The load method clears the data source, and as a result expects to be given a complete document. To add packets incrementally, use the process method instead.

3

Thank you Scott,

That change results in the following error that, if I am honest, I don’t understand.

An error occurred while rendering. Rendering has stopped.

undefined

DeveloperError: This object was destroyed, i.e., destroy() was called.

``

Does this give a clue?

4

Fixed it…

var czmlStream = new Cesium.CzmlDataSource();

//set up EventSource

var czmlEventSource = new EventSource(‘http://czmlhost/sse.php’);

//Listen for EventSource data coming across as event: czml

czmlEventSource.addEventListener(‘message’, function(czmlUpdate) {

//process the ‘data:’ coming across as JSON into the datasource

var json=JSON.parse(czmlUpdate.data);

console.log(‘czml event id=’, json.id);

czmlStream.process(json);

}, false);

viewer.dataSources.add(czmlStream);

``