关于cesium:Cesium加载广告牌二

10次阅读

共计 1815 个字符，预计需要花费 5 分钟才能阅读完成。

在上一篇中曾经增加了增加了广告牌实体，如果要获取更好的显示成果和其余需要，须要进行更多的设置。这里再介绍一些广告牌的罕用属性。

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

正文完