Cesium加载广告牌(一)

发布时间 2023-04-21 09:41:06作者: 中亿丰数字科技

Cesium加载广告牌(一)

在Cesium开发中需要加载图标等操作,这时候就需要使用Cesium中添加广告牌的功能,这里需要用到一个很重要的属性方法Entity()。在官方文档中,Entity的解释为:将多种形式的可视化实体聚合到单个高级对象中。它们可以手动创建并添加到Viewer实体中,也可以由数据源(如CzmlDataSource和GeoJsonDataSource)生成,是实体的集合。Entity包含很多的属性id、name、availability、show、description、position、orientation、viewFrom、parent等其他表示entity类型。此处以billboard为例,实现添加广告牌的功能。

总的来说,添加广告牌实体分为三步。

1、声明一个Entity对象。

let bill = new Cesium.Entity({})

2、在对象中添加实体需要显示的位置。

let bill = new Cesium.Entity({
  	  position: new Cesium.Cartesian3.fromDegrees(119.78542186676341, 29.173544144850784),
    })

3、在对象中添加需要显示的实体类型。

let bill = new Cesium.Entity({
    position: new Cesium.Cartesian3.fromDegrees(119.78542186676341, 29.173544144850784),
    billboard: {
            	image: "./img/laboratory.png",
             }
})

这样就已经添加了一个简易的广告牌。但是这样的广告牌显示效果并不好,广告牌也只有一半显示在地上。因此需要对广告牌进行其他属性的设置。
首先让广告牌完全显示在地面。这里可以给显示的位置提供一个高度。

let bill = new Cesium.Entity({
    position: new Cesium.Cartesian3.fromDegrees(119.78542186676341, 29.173544144850784,100),
    billboard: {
            	image: "./img/laboratory.png",
             }
})

但是,使用着用方法需要根据广告牌的大小实时调整所给的高度,并不利于开发,因此除非有需求需要广告牌浮空,所以并不推荐此方法。因此我们使用另一种方法让广告牌贴地显示。这样一来,就会让广告牌显示在地形上,不会飘在空中,或者掉在地形的下边

heightReference:广告牌的相对位置,有三种属性:NONE,CLAMP_TO_GROUND,RELATIVE_TO_GROUND

disableDepthTestDistance:禁用深度检测的相机距离,是Number类型

let bill = new Cesium.Entity({
    position: new Cesium.Cartesian3.fromDegrees(119.78542186676341, 29.173544144850784),
    billboard: {
            	image: "./img/laboratory.png",
                heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
				disableDepthTestDistance: Number.POSITIVE_INFINITY,
             }
})

这样一来图标就可以实现广告牌的贴地处理,设置完成贴地属性。