如何控制Cesiumjs中数据源的可见性？

Question

我想在cesiumjs查看器中显示多个数据源，但需要允许用户在任何给定时间选择他们想要查看的数据源。例如，如果我加载kml和czml文件，我该如何隐藏一个并显示另一个？我找不到cesiumjs的方法来使用它的API。

Answer 1

2016年2月更新：show标志has been proposed，可能会添加到未来版本的Cesium中。

原始答案：

目前dataSource上没有show标志，但是很容易从可用的dataSource列表中添加和删除dataSource，这用于获取显示/隐藏功能。

这是一个有效的演示：加载Cesium Sandcastle Hello World示例，并将以下代码粘贴到左侧，然后点击Run（F8）。它应该在左上角显示一个带有显示/隐藏功能的复选框。

var viewer = new Cesium.Viewer('cesiumContainer');

// Create a typical CzmlDataSource.
var dataSource1 = new Cesium.CzmlDataSource();
dataSource1.load('../../SampleData/simple.czml');

// Add a checkbox at the top.
document.getElementById('toolbar').innerHTML =
    '<label><input type="checkbox" id="showCheckbox" /> Show CZML</label>';

var checkbox = document.getElementById('showCheckbox');
checkbox.addEventListener('change', function() {
    // Checkbox state changed.
    if (checkbox.checked) {
        // Show if not shown.
        if (!viewer.dataSources.contains(dataSource1)) {
            viewer.dataSources.add(dataSource1);
        }
    } else {
        // Hide if currently shown.
        if (viewer.dataSources.contains(dataSource1)) {
            viewer.dataSources.remove(dataSource1);
        }
    }
}, false);

这段代码可以改进，例如它可能是一个“懒惰的负载”，其中dataSource.load直到它第一次显示时才被调用。此外，如果数据源已被隐藏了一段时间，您必须考虑在何时通过销毁dataSource来保存内存而不是继续保持它（如果稍后再次显示则触发新的延迟加载）。

Answer 2

截至目前，show是数据源的属性，您可以通过以点或括号表示法访问属性来控制它：

https://cesiumjs.org/Cesium/Build/Documentation/CzmlDataSource.html#show

const src = new Cesium.CzmlDataSource();
src.show = false;