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

在Cesium中，Cesium3DTileset 是用于加载和显示3D Tiles数据的类。3D Tiles是一种用于大规模3D地理数据的开源格式。控制3D Tileset中原语（primitives）的可见性可以通过多种方式实现，包括使用样式、过滤和自定义着色器。

以下是几种常见的方法来控制3D Tileset中原语的可见性：

方法1：使用样式（Style）

Cesium3DTileset支持样式（Style），可以通过样式来控制每个原语的可见性。样式是基于JSON的规则，可以根据属性值来设置可见性。

javascript复制const viewer = new Cesium.Viewer('cesiumContainer');
const tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
    url: 'path/to/your/tileset.json'
}));

tileset.style = new Cesium.Cesium3DTileStyle({
    show: {
        conditions: [
            ['${height} > 100', 'true'],
            ['true', 'false']
        ]
    }
});

在这个示例中，只有高度大于100的原语会被显示，其他的将被隐藏。

方法2：使用过滤（Filter）

Cesium3DTileset支持过滤，可以根据属性值来过滤原语。过滤器可以在加载时应用，也可以在运行时动态应用。

javascript复制const viewer = new Cesium.Viewer('cesiumContainer');
const tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
    url: 'path/to/your/tileset.json'
}));

tileset.readyPromise.then(function() {
    tileset.featureFilter = new Cesium.Cesium3DTileFeatureFilter({
        conditions: [
            ['${height} > 100', 'true'],
            ['true', 'false']
        ]
    });
});

方法3：使用自定义着色器（Custom Shader）

自定义着色器允许你在更低的级别上控制原语的可见性。你可以编写GLSL代码来实现复杂的可见性逻辑。

javascript复制const viewer = new Cesium.Viewer('cesiumContainer');
const tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
    url: 'path/to/your/tileset.json'
}));

tileset.readyPromise.then(function() {
    tileset.customShader = new Cesium.CustomShader({
        lightingModel: Cesium.LightingModel.UNLIT,
        fragmentShaderText: `
            void main() {
                if (czm_selectedFeature.height > 100.0) {
                    gl_FragColor = vec4(1.0); // Show
                } else {
                    discard; // Hide
                }
            }
        `
    });
});

方法4：动态控制可见性

你还可以在运行时动态控制每个原语的可见性。例如，通过遍历所有的特性并设置它们的可见性。

javascript复制const viewer = new Cesium.Viewer('cesiumContainer');
const tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
    url: 'path/to/your/tileset.json'
}));

tileset.readyPromise.then(function() {
    const featuresLength = tileset.featuresLength;
    for (let i = 0; i < featuresLength; i++) {
        const feature = tileset.getFeature(i);
        if (feature.getProperty('height') > 100) {
            feature.show = true;
        } else {
            feature.show = false;
        }
    }
});