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,
    }
})

526互联

Cesium加载广告牌（二）

Cesium加载广告牌（二）