Cesium加载广告牌(二)
在上一篇中已经添加了添加了广告牌实体,如果要获取更好的显示效果和其他需求,需要进行更多的设置。这里再介绍一些广告牌的常用属性。
horizontalOrigin
:广告牌相对原点的水平位置。有三种属性:Cesium.HorizontalOrigin.CENTER
,Cesium.HorizontalOrigin.LEFT
,Cesium.HorizontalOrigin.RIGHT
。注意这里必须大写。
verticalOrigin
:广告牌相对原点的垂直位置。有四种属性:Cesium.VerticalOrigin.CENTER
,Cesium.VerticalOrigin.BOTTOM
,Cesium.VerticalOrigin.BASELINE
,Cesium.VerticalOrigin.TOP
scale
:广告牌的尺寸。是Number类型,默认值为1。
pixelOffset
:广告牌的像素偏移量,是Cartesian2
类型。
通过前三种属性,可以对广告牌进行位置和大小方面的微调,而不用修改广告牌的当前位置。如果需要进行更近一步的自定义位置,可以使用pixelOffset
。示例如下:
let bill = new Cesium.Entity({
position: new Cesium.Cartesian3.fromDegrees(120.62521517, 31.42803100),
billboard: {
image: "./img/laboratory.png",
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
scale: 1,
pixelOffset: new Cesium.Cartesian2(0, -70),//注意这里需要使用Cartesian2
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
disableDepthTestDistance: Number.POSITIVE_INFINITY,
}
})
如果需要更贴近现实,需要实现近大远小的效果,需要设置另一个重要属性:scaleByDistance
。字面意思是跟随距离的尺寸。这个属性来实现根据摄像机的距离改变实体的scale(缩放比)。
scaleByDistance
的类型为NearFarScalar
,在Cesium
中为new Cesium.NearFarScalar(near, nearValue, far, farValue)
。这里的四个参数类型均是Number
。
以new Cesium.NearFarScalar(30000, 1, 45000, 0.4)
为例,含义为含义就是在摄像头和Billboard之间的距离在30000-45000之间的时候,Billboard的Scale比例按照1->0之间的插值来缩放。当摄像头和Billboard之间距离小于30000的时候,就按照30000时候的值1处理(这里如果不是1,而是0.5,那小于30000时候的比例就是0.5了)。而当大于45000的时候,就会按照0.4(其实就是8000对应的比例值)缩放。
let bill = new Cesium.Entity({
position: new Cesium.Cartesian3.fromDegrees(120.62521517, 31.42803100),
billboard: {
image: "./img/laboratory.png",
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
scale: 1,
scaleByDistance:new Cesium.NearFarScalar(30000, 1, 45000, 0.4),
pixelOffset: new Cesium.Cartesian2(0, -70),//注意这里需要使用Cartesian2
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
disableDepthTestDistance: Number.POSITIVE_INFINITY,
}
})
标签:Cartesian2,30000,广告牌,Cesium,new,VerticalOrigin,加载
From: https://www.cnblogs.com/DTCLOUD/p/17340324.html