使用HTML5 EventSource将流式的CZML数据导入到Cesium中

Question

我目前正在研究使用Cesium来可视化个人项目中的数据，实时更新将是一件非常有用的事情。

阅读维基百科，我发现了这一部分，其中概述了如何使用HTML EventSource API动态更新Cesium中的对象。

我已经在Node.js中编写了一个相当简单的服务器，它创建了一个text/event-stream，定期发送对象位置的更新。这一部分工作得很好，我可以成功连接并将这些数据记录到控制台。

我的问题在于Cesium。我花了几个小时阅读文档（包括Github维基和下载附带的JSDoc文档），但我无法弄清楚如何将我的CZML添加到地球仪上。使用源代码提供的Cesium Viewer应用程序，我可以看到如何从本地和远程资源加载CZML文件，但我无法弄清楚如何修改这种方法来处理从EventSource事件接收到的CZML数据包。

我的CZML数据包示例:

{
  '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
  }
}

我的当前方法如下：

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);

很遗憾，这不起作用。我基于如何加载静态CZML文件来构建它：

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

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

有人知道我哪里出了问题，或者更好的做法吗？我正在使用 Cesium b24，如果有区别的话。如果您需要更多信息来帮助我，请告诉我，我会更新问题。

我尝试过谷歌寻找解决方案和示例代码，但除了维基页面描述如何使用EventSource之外，我找不到其他东西。

- user2583109

Answer 1

我知道这个问题已经几周了，但是你最终解决了吗？从上面的例子中，首先我注意到的是你在调用 czmlStream.load 而不是 czmlStream.process。load 会清除现有数据，而 process 不会。对于流式传输，调用 load 导致只显示最后一个包。

- Matthew Amato