Cesium：CZML 的流式传输示例

Question

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

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

谁能给我举个例子来说明如何做到这一点？ 我可以设法像这样加载 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 响应中的 content-type 设置为 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);

Answer 2

没有回答的部分问题与 czml 文件的格式有关。问题中发布的示例有一些错误/误解。对于每个 data 字段，您的 JSON 数据都必须在一行中，或者您可以像我一样为每行添加一个 data 字段。您还必须在每个数据包之后有两个返回字符，否则流将不知道在哪里结束，文件末尾的最后一个数据包也是如此！我最近也遇到了这个问题，你在 Cesium 网站上找不到任何东西的原因是因为这在技术上是事件流格式定义的一部分，而不是 czml。您可以找到有关here 格式的更多信息。下面是正确格式化 czml 的正确示例（注意：sn-p 删除了最终数据包后的最后两个返回字符，不要忘记那些！）：

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:      }