Javascript 如何从Cesium3DTileset控制原语的可见性

如何从

Cesium3DTileset

正确控制原语的可见性

首先，我在

HTML

中创建了一个checkbox元素，并创建了一个checkbox

addEventListener

来控制本地

geojson

文件中数据源的可见性。而且进展顺利

然后我做了同样的事情来控制是否需要显示铯离子帐户中的

3ddile

。在第一次检查和取消检查时，一切都很顺利。但是当我第二次选中该复选框时，场景中没有显示任何内容。第二次取消选中“不做任何事情”和“不出错”

//this is my checkbox elements
    <input type="checkbox" id="showCheckbox1" > geojson1<br>
    <input type="checkbox" id="showCheckbox2" > geojson2<br>
    <input type="checkbox" id="showCheckbox_1" > ion_1<br>
    <input type="checkbox" id="showCheckbox_2" > ion_2<br>


//this is my first try to control the visibility of geojson, and it goes well
    var obj1 = new Cesium.GeoJsonDataSource();
    obj.load('../DataSource/GeoJson/airport_cesium2.geojson')
    var obj2 = new Cesium.GeoJsonDataSource();
    obj2.load('../DataSource/GeoJson/LiangMau.geojson')

    function handleCheckbox(id,datasource){
        var checkbox = document.getElementById(id);
        checkbox.addEventListener('change', function() {
            // Checkbox state changed.
            if (checkbox.checked) {
                // Show if not shown.
                if (!viewer.dataSources.contains(datasource)) {
                    viewer.dataSources.add(datasource);
                }
            } else {
                // Hide if currently shown.
                if (viewer.dataSources.contains(datasource)) {
                    viewer.dataSources.remove(datasource);
                }
            }
        }, false);
    }
    handleCheckbox('showCheckbox1',obj1)
    handleCheckbox('showCheckbox2',obj2)


//then I try to control the visibility of 3DTile
    var obj_1 = new Cesium.Cesium3DTileset({
        url: Cesium.IonResource.fromAssetId(35386)
    })
    var obj_2 = new Cesium.Cesium3DTileset({
        url: Cesium.IonResource.fromAssetId(35381)
    })

    function handleCheckbox_(id,datasource){
        var checkbox = document.getElementById(id);
        checkbox.addEventListener('change', function() {
            // Checkbox state changed.
            if (checkbox.checked) {
                // Show if not shown.
                if (!scene.primitives.contains(datasource)) {
                    scene.primitives.add(datasource);
                }
            } else {
                // Hide if currently shown.
                if (scene.primitives.contains(datasource)) {
                    scene.primitives.remove(datasource);
                }
            }
        }, false);
    }
    handleCheckbox_('showCheckbox_1',obj_1)
    handleCheckbox_('showCheckbox_2',obj_2)

//这是我的复选框元素
geojson1

geojson2

离子_1

离子_2

//这是我第一次尝试控制geojson的可见性，而且进展顺利
var obj1=新铯.GeoJsonDataSource（）；
obj.load（“../DataSource/GeoJson/airport_cesium2.GeoJson”）
var obj2=新铯.GeoJsonDataSource（）；
obj2.load（“../DataSource/GeoJson/LiangMau.GeoJson”）
函数handleCheckbox（id，数据源）{
var checkbox=document.getElementById（id）；
checkbox.addEventListener（'change'，function（））{
//复选框状态已更改。
如果（复选框。选中）{
//如果未显示，则显示。
如果（！viewer.dataSources.contains（datasource））{
viewer.dataSources.add（datasource）；
}
}否则{
//如果当前显示，则隐藏。
if（viewer.dataSources.contains（datasource））{
viewer.dataSources.remove（datasource）；
}
}
}，假）；
}
handleCheckbox（'showCheckbox1'，obj1）
handleCheckbox（'ShowCheckBox 2'，obj2）
//然后我尝试控制3DTile的可见性
var obj_1=新铯.Cesium3DTileset({
url:Cesium.IonResource.fromAssetId（35386）
})
var obj_2=新的铯.Cesium3DTileset({
url:Cesium.IonResource.fromAssetId（35381）
})
函数handleCheckbox（id，数据源）{
var checkbox=document.getElementById（id）；
checkbox.addEventListener（'change'，function（））{
//复选框状态已更改。
如果（复选框。选中）{
//如果未显示，则显示。
如果（！scene.primitives.contains（数据源））{
scene.primitives.add（数据源）；
}
}否则{
//如果当前显示，则隐藏。
if（scene.primitives.contains（数据源））{
scene.primitives.remove（数据源）；
}
}
}，假）；
}
handleCheckbox（显示复选框1'，对象1）
handleCheckbox（显示复选框2'，对象2）

---

我可以在第一次勾选和取消勾选时控制

3ddile

的可见性，但在第二次时什么都不会发生。这真的让我很困惑，因为显示时没有错误，我不知道下一步该怎么办。

如评论中所述，答案是设置

dataSource.show

标志以切换可见性。多次添加和删除同一数据源是一个问题，因为通常在删除数据源时，数据源会被销毁。因此，最好使用

show

标志切换可见性。

我不认为多次添加和删除是正确的做法。是否有可以切换的

.show

标志？我知道dataSource有一个

show

标志，我不记得primitive是否有。你是对的，我发现了问题所在。show是我需要的答案，它工作得很好。谢谢