如何控制Cesium/CZML数据源的可见性

Question

我有一个声明的CZML数据源：

public geometryDataPromise: Cesium.CzmlDataSource;

当加载组件时，我正在用上面的端点加载它：

if(!this.store.geometryDataPromise) {
this.store.geometryDataPromise = Cesium.CzmlDataSource.load(environment.apiBaseURL + `/protectedareas/geometry/all`);
}

所有渲染的对象都显示在地形上，但试图按照指示进行：

this.store.geometryDataPromise.show = false;

对象没有被隐藏

Answer 1

这里的问题是Cesium.CzmlDataSource.load不返回Cesium.CzmlDataSource。它返回一个Promise来异步获取一个CzmlDataSource，这根本不是一回事。您的代码试图显示或隐藏承诺，这不是一件可以显示的事情。

var dataSourcePromise = Cesium.CzmlDataSource.load( ... );
var dataSource = null;
dataSourcePromise.then(function(d) { dataSource = d; });

请注意，在运行上述代码后，dataSource将在一段时间内为null，而浏览器将等待服务器的响应完成下载。一旦回调函数启动，dataSource就准备好了。

function onClick() {
if (dataSource !== null) {
dataSource.show = !dataSource.show;
}
}

您可以为这样的切换按钮连接一个点击处理程序。但是，在下载并准备好dataSource之后，切换才会起任何作用。

Answer 2

首先我必须获得Cesium.CzmlDataSource.load承诺的结果

Cesium.when(Cesium.CzmlDataSource.load(environment.apiBaseURL + `/protectedareas/geometry/all`), result => {
this.sources = result;
this.viewer.dataSources.add(this.sources);
});

然后在能见度改变时更改其恶魔show

this.store.sourceVisibility.subscribe(visibility=>this.sources.show=visibility);