如何控制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一段时间。一旦回调函数触发，数据源就准备好了。

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