Cesium Label 被建筑物遮挡问题

最新推荐文章于 2025-01-13 17:17:45 发布

apgk1

最新推荐文章于 2025-01-13 17:17:45 发布

阅读量3.2k

点赞数 7

分类专栏： cesium vue 文章标签：经验分享

本文链接：https://blog.youkuaiyun.com/apgk1/article/details/125221395

版权

vue 同时被 2 个专栏收录

11 篇文章

订阅专栏

cesium

5 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求如下：

由于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
        }

解决后效果