3D Tiles高级样式设置与条件渲染(3)

pianmian12025-06-01 0:39

二、基于地理距离的条件渲染

1.根据与特定点的距离设置样式

在某些应用中，我们可能需要根据建筑物与某个特定点（如地标建筑）的距离来设置样式。以下代码示例展示了如何根据建筑物与广州塔的距离来设置颜色和可见性：

javascript 复制代码

tiles3d.style = new Cesium.Cesium3DTileStyle({
    // 定义一些变量，这些变量可以在样式中使用
    defines: {
        // 定义一个名为distance的变量，计算每个瓦片与指定经纬度点(113.3191, 23.109)的距离
        distance: "distance(vec2(${feature['cesium#longitude']},${feature['cesium#latitude']}), vec2(113.3191, 23.109))"
    },
    // 设置瓦片的颜色
    color: {
        // 根据条件动态设置颜色
        conditions: [
            // 如果距离小于0.01度
            ["${distance} < 0.01", "color('rgba(0,0,50, 0.7)')"], // 设置为半透明的深蓝色
            // 如果距离小于0.02度
            ["${distance} < 0.02", "color('rgba(0,0,50, 0.5)')"], // 设置为半透明的蓝色
            // 如果距离小于0.04度
            ["${distance} < 0.04", "color('rgba(0,0,50, 0.2)')"], // 设置为半透明的浅蓝色
            // 其他情况
            ["true", "color('white')"] // 设置为白色
        ]
    },
    // 设置瓦片的显示条件
    show: "${distance} < 0.04 && ${feature['building']} === 'apartments'"
    // 只有当距离小于0.04度且建筑类型为'apartments'时，瓦片才显示
});