CESIUM例子学习（三）——billboard

一、什么是billboard

billboard也叫广告牌，用图片标注的形式表示地理点位信息。是一种特别简单的模型(D3D里面好像是这么说的)，它会自动计算，使图片下面始终面向摄像机，这种技术也叫广告牌技术。

二、billboard加载

以entity方式加载billboard，代码如下：

 var position = Cesium.Cartesian3.fromDegrees(116.43299999999988, 39.915999999999954)
    var entity = viewer.entities.add({
        position: position,
        //加载蓝色小圆点
        point: {
            color: Cesium.Color.BLUE,    //点位颜色
            pixelSize: 5                //像素点大小
        },
        billboard: {
            image: imageUrl, // default: undefined
            show: true, // default
            pixelOffset: new Cesium.Cartesian2(10, -10), // default: (0, 0)
            // eyeOffset: new Cesium.Cartesian3(0.0, 0.0, 0.0), // default
            horizontalOrigin: Cesium.HorizontalOrigin.LEFT, // default
            verticalOrigin: Cesium.VerticalOrigin.BOTTOM, // default: CENTER
            // 按距离缩放
            scaleByDistance: new Cesium.NearFarScalar(1.5e2, 1, 10000, 0.0),
            scale: 2.0, // default: 1.0
            color: Cesium.Color.RED, // default: WHITE
            rotation: Cesium.Math.PI_OVER_FOUR, // default: 0.0
            alignedAxis: Cesium.Cartesian3.ZERO, // default
            width: 32, // default: undefined
            height: 32, // default: undefined
        }
    });

代码中常用到的属性有以下几个：

1、pixelOffset，设置图片的偏移，是按屏幕坐标来偏移的。效果如下图：

  2、对齐方式：对齐方式由两个属性决定,即：horizontalOrigin（水平对齐）和 verticalOrigin（垂直对齐），代码中设置为左下角，也就是图片的左下角对齐中心点。如下图：

3、按距离缩放： scaleByDistance: new Cesium.NearFarScalar(1.5e2, 1, 10000, 0.0)，即距离大于10000米时，图标不显示。NearFarScalar这个对象可以用于translucencyByDistance，即按距离设置图标透明度，可以实现渐入渐出效果。

本文地址：https://blog.csdn.net/luoyun620/article/details/107175490