Question

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

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;

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

2 个答案: