Cesium: streaming example of CZML

Question

It looks like this question has been asked before but I have been unable to find a proper example. I am familiar with PHP, but new to Javascript, and cannot figure out how to stream CZML.

I want to show about 6.500 assets on a map. To prevent the webpage from showing up AFTER everything is loaded (and testing the users' patience), I want it to show and then load the assets in the background.

Can somebody point me to an example on how to do this? I can manage to load the czml file like this:

var czmlDataSource = new Cesium.CzmlDataSource(); 
viewer.dataSources.add(czmlDataSource); 
czmlDataSource.loadUrl('some_file.czml'); 

But that's as far as I got :-( I know I should .processUrl somewhere and I understood I should use different packets in the CZML file so my CZML file looks like this:

[ 
event: czml 
data: { 
    "id":"document", 
    "version":"1.0" 
  } 

event: czml 
data: { 
    "id":"1", 
    "billboard":{ 
      "image":"label.png", 
      "verticalOrigin":"BOTTOM", 
      "show":true 
    }, 
    "position":{ 
      "cartographicDegrees":[ 
        20.0, 50.0, 0 
      ] 
    } 
  } 

event: czml 
data: { 
    "id":"2", 
    "billboard":{ 
      "image":"label.png", 
      "verticalOrigin":"BOTTOM", 
      "show":true 
    }, 
    "position":{ 
      "cartographicDegrees":[ 
        10.0, 52.0, 0 
      ] 
    } 
  } 
] 

It would be great if somebody can provide a working sample, so a .czml file and a .js file. Thank you!

Answer 1

If have a streaming CZML network source then the client JavaScript code must call process() rather than load() to setup streaming a source.

var czmlStream = new Cesium.CzmlDataSource();
var czmlEventSource = new EventSource('some_url_to_czml');
czmlEventSource.addEventListener('czml', function(czmlUpdate) {
      try {
         var json = JSON.parse(czmlUpdate.data);
         console.log('czml event id=', json.id);
         //process the 'data:' coming across as JSON into the datasource 
         czmlStream.process(json);
      } catch (t) {
         console.error(t)
      }       
    }, false);
    
//put the streaming datasource into Cesium 
viewer.dataSources.add(czmlStream);

Note for the above code to work, the streaming source must set the content-type in HTTP response to text/event-stream.

To cancel a stream from the client, simply call:

czmlEventSource.close();

To cancel a stream from the server, respond with a non "text/event-stream" Content-Type or return an HTTP status other than 200 OK (e.g. 404 Not Found).

If you're loading from a static CZML file then call load() with the URL or relative file reference.

var dataSource = Cesium.CzmlDataSource.load('some_file.czml');
viewer.dataSources.add(dataSource);

Answer 2

One part of the question that is not answered is in regard to the format of the czml file. The example posted in the question has a few errors/misunderstandings. Your JSON data must all be on a single line for each data field, or you can add a data field for each line as I have. You must also have two return characters after each packet otherwise the stream will not know where to end, this is true of the last packet at the end of the file too! I struggled with this recently as well and the reason you do not find anything on the Cesium site is because this is technically part of the definition of Event Stream Formats rather than czml. You can find more info on the format here. Below is a proper example of your czml formatted correctly (Note: the snippet removed the last two return characters after the final packet, don't forget those!):

event: czml
data: {
data:    "id":"document",
data:    "version":"1.0"
data:  }


event: czml
data: {"id":"1",
data:        "billboard":{
data:          "image":"label.png",
data:          "verticalOrigin":"BOTTOM",
data:          "show":true
data:        },
data:        "position":{
data:          "cartographicDegrees":[
data:            20.0, 50.0, 0
data:          ]
data:        }
data:      }


event: czml
data: {"id":"me",
data:        "billboard":{
data:          "image":"label.png",
data:          "verticalOrigin":"BOTTOM",
data:          "show":true
data:        },
data:        "position":{
data:          "cartographicDegrees":[
data:            10.0, 50.0, 0
data:          ]
data:        }
data:      }