2014-01-15 3 views
11

Ich bin derzeit der Suche nach Cäsium als eine Möglichkeit zur Visualisierung von Daten für ein persönliches Projekt, und Echtzeit-Updates wäre eine großartige Sache zu tun.Streaming CZML in Cäsium mit HTML5 EventSource

Beim Lesen des Wikis habe ich this section gefunden, in dem beschrieben wird, wie dynamisch Objekte in Cäsium mithilfe der HTML-EventSource-API aktualisiert werden können.

Ich habe einen ziemlich einfachen Server in Node.js geschrieben, der eine erstellt, die regelmäßig Updates der Position eines Objekts sendet. Dieser Teil funktioniert einwandfrei und ich kann erfolgreich eine Verbindung herstellen und diese Daten auf der Konsole protokollieren.

Mein Problem liegt bei Cäsium. Ich habe Stunden damit verbracht, die Dokumentation zu durchforsten (sowohl das Github-Wiki als auch die JSDoc-Dokumentation, die im Download enthalten sind) und ich kann nicht herausfinden, wie ich meine CZML zum Globus bringen kann. Mit der Caesium Viewer-Anwendung, die mit dem Quellcode geliefert wird, kann ich sehen, wie CZML-Dateien sowohl von lokalen als auch von entfernten Ressourcen geladen werden können. Ich kann jedoch nicht herausfinden, wie man CZML-Pakete aus EventSource-Ereignissen aufnehmen kann.

Eine Probe meiner CZML Pakete:

{ 
    'id': 'myObject', 
    'availability': '2014-01-15T00:00Z/2014-01-01T24:00Z', 
    'point': { 
    'color': { 
     'rgba': [255, 255, 0, 255] 
    }, 
    'outlineWidth': 2.0, 
    'pixelSize': 3.0, 
    'show': true 
    }, 
    'position': { 
    'cartesian': [0.0, -2957000.0, -840000.0, 5581000.0], 
    'epoch': '2014-01-01T00:00Z', 
    'interpolationAlgorithm': 'LINEAR', 
    'interpolationDegree': 1 
    } 
} 

Mein aktueller Ansatz ist wie folgt:

Leider
var czmlStream; 
var czmlStreamUrl = 'http://127.0.0.1:8080/czml-stream'; 

viewer.dataSources.add(czmlStream); 

var czmlEventSource = new EventSource(czmlStreamUrl); 
czmlEventSource.addEventListener('czml', function(czmlUpdate) { 
    czmlStream.load(JSON.parse(czmlUpdate.data)); 
}, false); 

, das funktioniert nicht. Ich basierte es auf, wie eine statische CZML Datei geladen werden kann:

var source; 
var sourceURL = 'http://127.0.0.1/czml-static.czml'; 

source.loadUrl(sourceURL).then(function() { 
    viewer.dataSources.add(source); 
} 

Weiß jemand, wo ich falsch bin, oder besser noch, der richtige Weg, dies zu tun? Ich verwende Cäsium b24, falls das einen Unterschied macht. Wenn Sie weitere Informationen von mir benötigen, um zu helfen, fragen Sie bitte und ich werde die Frage aktualisieren.

Ich habe Googling für eine Lösung und Beispielcode versucht, aber ich kann nichts außer der wiki page finden, die beschreibt, wie EventSource verwendet werden könnte.

Antwort

8

Ich weiß, dass diese Frage ein paar Wochen alt ist, aber hast du das jemals herausgefunden? Aus dem obigen Beispiel fällt mir als Erstes auf, dass Sie czmlStream.load anstelle von czmlStream.process aufrufen. load löscht vorhandene Daten, während process dies nicht tut. Beim Streaming führt der Aufruf von load nur zum letzten Paket, das jemals angezeigt wird.