javascript - 如何控制 Cesium3DTileset 中图元的可见性

标签 javascript visibility cesiumjs

如何正确控制Cesium3DTileset中基元的可见性?

首先,我在 HTML 中创建一个复选框元素,并创建一个复选框 addEventListener 来控制本地 geojson 文件中数据源的可见性。而且进展顺利。

然后我做了同样的事情来控制是否需要显示我的 Cesium ion 帐户中的 3DTile。第一次检查和取消检查时,一切都很顺利。但当我第二次选中该框时,场景中没有显示任何内容。第二次取消选中什么也不做,也没有错误。

//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)

我可以在第一次选中和取消选中时控制3DTile的可见性,但第二次没有任何反应。这真的让我很困惑,因为没有显示错误,而且我不知道下一步该做什么。

最佳答案

正如评论中提到的,答案是设置 dataSource.show 标志来切换可见性。多次添加和删除相同的数据源是问题所在,通常当删除数据源时,它就会被销毁。因此,首选使用 show 标志切换可见性。

关于javascript - 如何控制 Cesium3DTileset 中图元的可见性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57377459/

相关文章:

javascript - 如何传递多个参数以与 Ramda.JS 组合

javascript - 知道网站的来源吗?

java - 我是否需要在其自己的文件中将枚举定义为 'public',以便它可以在自己的包外被识别?

three.js - 三个js : is my point visible or occluded?

javascript - 铯土 : Show satellites in ECI coordinate system

Javascript 不更新 img

javascript - 使用 css、jquery 或 smth 水平翻转选择框

javascript - 改变jquery方法的prototypejs

javascript - 使用 js 设置可见性时检查 div 是否可见

javascript - CesiumJS 创建 3D 边界框