4

看起来这个问题之前已经被问过，但我一直找不到合适的例子。我熟悉 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 文件。谢谢！

4

2 回答 2

5

如果有流式 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);
于 2016-10-05T17:26:05.337 回答
0

未回答的部分问题与 czml 文件的格式有关。问题中发布的示例有一些错误/误解。您的 JSON 数据必须全部位于每个字段的一行data，或者您可以data像我一样为每一行添加一个字段。您还必须在每个数据包之后有两个返回字符，否则流将不知道在哪里结束，文件末尾的最后一个数据包也是如此！我最近也遇到了这个问题，你在 Cesium 网站上找不到任何东西的原因是因为这在技术上是事件流格式定义的一部分，而不是 czml。您可以在此处找到有关格式的更多信息. 下面是正确格式化 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:      }

于 2018-11-05T21:34:43.043 回答