使用 HTML5 EventSource 将 CZML 流式传输到 Cesium

Posted 2023-02-16

【中文标题】使用 HTML5 EventSource 将 CZML 流式传输到 Cesium

【英文标题】：Streaming CZML into Cesium using HTML5 EventSource

【发布时间】：2014-02-03 20:03:14

【问题描述】：

我目前正在研究使用 Cesium 作为一种可视化个人项目数据的方式，实时更新将是一件很棒的事情。

阅读 wiki，我发现了this section，它概述了如何使用 html EventSource API 在 Cesium 中动态更新对象。

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

我的问题在于铯。我花了几个小时研究文档（Github wiki 和下载中包含的 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 的 wiki page 之外我找不到任何东西。

【参考方案1】：

我知道这个问题已经有几个星期了，但你有没有想过这个问题？从上面的示例中，我注意到的第一件事是您调用的是 czmlStream.load 而不是 czmlStream.process。 load 清除现有数据，而 process 不会。对于流式传输，调用 load 只会显示最后一个数据包。