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

要从服务器取消流，请使用非“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字段。每个数据包之后还必须有两个返回字符，否则流将不知道从何处结束，这对于文件末尾的最后一个数据包也是如此！我最近也为此感到挣扎，您在Cesium网站上找不到任何内容的原因是，从技术上讲，这是事件流格式定义的一部分，而不是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:      }

Cesium：CZML的流媒体示例

2 个答案: