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

Question

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

Answer 1

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

原始答案：

目前在dataSource上没有show标志，但是很容易在可用dataSources列表中添加和删除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已经隐藏了一段时间，您必须考虑在什么时候应该通过销毁dataSource而不是继续持有它来节省内存(如果稍后它再次显示，则会触发新的惰性加载)。

Answer 2

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

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

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