Cesium Label 被建筑物遮挡问题

最新推荐文章于 2026-05-18 10:00:02 发布

原创最新推荐文章于 2026-05-18 10:00:02 发布 · 3.6k 阅读

17 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#经验分享

vue 同时被 2 个专栏收录

12 篇文章

订阅专栏

cesium

5 篇文章

订阅专栏

本文介绍了如何在Cesium三维地图中使用label遇到遮挡问题时，通过设置disableDepthTestDistance为Number.POSITIVE_INFINITY来解决，展示了代码实现和解决后的效果，并提供了相关链接作为参考。

需求如下：

由于id 单体化需要显示楼栋名称，所以采用在楼栋上方加label.发现label 会被建筑遮挡，如下

解决方法

在label 中加入 disableDepthTestDistance: Number.POSITIVE_INFINITY

完整代码如下：

viewer.entities.add({
        position: Cesium.Cartesian3.fromDegrees(lon, lat, height),
        name: 'label',
        id: String(id),
        label: {
          id: String(id),
          text: text, // 文本，支持换行符\n
          verticalOrigin: Cesium.VerticalOrigin.TOP,
          heightReference: Cesium.HeightReference.RELATIVE_TO_GROUND,
          showBackground: true,
          backgroundColor: Cesium.Color.fromCssColorString('rgba(0, 28, 55, 0.75)'), // 背景颜色
          backgroundPadding: new Cesium.Cartesian2(30, 10),
          fillColor: Cesium.Color.WHITE, // 字体颜色-白色
          style: Cesium.LabelStyle.FILL,
          font: '1vw sans-serif',
          disableDepthTestDistance: Number.POSITIVE_INFINITY,
          show: false
        }

解决后效果