Cesium：CZML 的流媒体示例

Question

之前好像有人问过这个问题，但我一直找不到合适的例子。我熟悉 PHP，但不熟悉 Javascript，无法弄清楚如何流式传输 CZML。

我想在地图上显示大约 6.500 个资产。为了防止网页在加载完所有内容后显示（并测试用户的耐心），我希望它显示然后在后台加载资产。

有人可以指出我如何做到这一点的例子吗？我可以像这样加载 czml 文件：

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

但这就是我得到的 :-( 我知道我应该在某处使用 .processUrl 并且我知道我应该在 CZML 文件中使用不同的数据包，因此我的 CZML 文件如下所示：

[ 
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 
      ] 
    } 
  } 
] 

如果有人可以提供一个工作样本，那么一个 .czml 文件和一个 .js 文件，那就太好了。谢谢！

Answer 1

如果有一个流式 CZML 网络源，那么客户端 JavaScript 代码必须调用 process() 而不是 load() 来设置流式源。

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

请注意，要使上述代码正常工作，流媒体源必须将 HTTP 响应中的内容类型设置为text/event-stream.

要取消来自客户端的流，只需调用：

czmlEventSource.close();

要取消来自服务器的流，请使用非“文本/事件流”内容类型进行响应或返回 200 OK 以外的 HTTP 状态（例如 404 Not Found）。

如果您从静态 CZML 文件加载，则使用 URL 或相关文件引用调用 load()。

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