of : 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 response中的content-type设置为text/event-stream。

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

czmlEventSource.close();

若要取消来自服务器的流，请使用非"text/event- stream“Content-Type进行响应，或返回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字段。你还必须在每个包之后有两个返回字符，否则流将不知道在哪里结束，这也是在文件末尾的最后一个包！我最近也为此而苦苦挣扎，您在as站点上找不到任何东西的原因是因为从技术上讲，这是Event Stream格式定义的一部分，而不是czml。您可以在here格式上找到更多信息。下面是正确格式化czml的正确示例(注意:代码片段删除了最终数据包后的最后两个返回字符，不要忘记它们！)：

​

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

​