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

【问题标题】：How can you control visibility of datasource in Cesiumjs?如何控制 Cesiumjs 中数据源的可见性？
【发布时间】：2015-03-21 15:44:10
【问题描述】：

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

【问题讨论】：

标签： kml cesium

【解决方案1】：

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

原答案：

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

这是一个工作演示：加载Cesium Sandcastle Hello World 示例，并将以下代码粘贴到左侧，然后点击运行 (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 在第一次显示之前不会被调用。此外，如果数据源已经隐藏了一段时间，您必须考虑在什么时候应该通过销毁数据源而不是继续持有它来节省内存（如果稍后再次显示，则会触发新的延迟加载）。

【讨论】：

【解决方案2】：

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

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

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

【讨论】：