Billboard

Billboard是cesiumjs中一种可以用于创建自定义图标和标签的图形元素。

创建Billboards

要创建Billboards，可以使用Cesium中的BillboardCollection类。以下是创建一个包含一个Billboard的BillboardCollection的基本示例代码：

var viewer = new Cesium.Viewer('cesiumContainer');

var billboards = new Cesium.BillboardCollection();
viewer.scene.primitives.add(billboards);

var billboard = billboards.add({
    image: 'path/to/image.png',
    position: Cesium.Cartesian3.fromDegrees(-75.1641667, 39.9522222),
    width: 50,
    height: 50
});

这个示例代码创建了一个具有一个图标的Billboard。可以使用image属性来指定图标的图像（可以是URL）。

position属性指定了Billboard的位置。在这个示例中，位置是一个Cartesian3对象，表示WGS84坐标系中的经纬高度值。

width和height属性指定了Billboard的宽度和高度。

处理Billboard事件

可以为Billboard添加事件监听器以响应用户的交互操作。以下是一个在鼠标点击Billboard时弹出带有Billboard ID的消息框的示例代码：

var isSelected = false;

billboard.billboardMouseOver.addEventListener(function() {
    isSelected = true;
    billboard.scale = 1.2;
});

billboard.billboardMouseOut.addEventListener(function() {
    isSelected = false;
    billboard.scale = 1.0;
});

billboard.billboardClick.addEventListener(function() {
    if (isSelected) {
        alert("Billboard with ID " + billboard.id + " is selected.");
    }
});

在这个示例代码中，当鼠标移动到Billboard上时，Billboard会被放大，鼠标移开时会恢复原来的大小。当用户点击Billboard时，会弹出一个消息框，其中包含了Billboard ID。

更多选项

可以使用Cesium.Billboard类的其他选项来更改Billboard的外观和行为，如下所示：

var billboard = billboards.add({
    image: 'path/to/image.png',
    position: Cesium.Cartesian3.fromDegrees(-75.1641667, 39.9522222),
    width: 50,
    height: 50,
    scaleByDistance: new Cesium.NearFarScalar(1000, 2.5, 1000000, 0.5),
    translucencyByDistance: new Cesium.NearFarScalar(1.5e2, 1.0, 8.0e6, 0.0),
    color: new Cesium.Color(1.0, 1.0, 1.0, 1.0),
    outlineColor: new Cesium.Color(0.0, 0.0, 0.0, 1.0),
    outlineWidth: 2,
    pixelOffset: new Cesium.Cartesian2(0, -50),
    eyeOffset: new Cesium.Cartesian3(0.0, 0.0, 2000.0),
    horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
    verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
    heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
    disableDepthTestDistance: Number.POSITIVE_INFINITY,
    id: 'billboard1'
});

scaleByDistance属性设置了Billboard的距离缩放因子。在这个示例中，当Billboard与相机的距离小于1000米时，Billboard会以2.5倍缩放，而当距离大于1,000,000米时，Billboard会以0.5倍缩放。

translucencyByDistance属性设置了Billboard的距离关联透明度。在这个示例中，当Billboard与相机的距离小于150米时，透明度为1.0，而当距离大于8,000,000米时，透明度为0.0。

color属性设置了Billboard的颜色。

outlineColor属性设置了Billboard的轮廓线颜色。

outlineWidth属性设置了Billboard的轮廓线宽度。

pixelOffset属性设置了Billboard的像素偏移量。

eyeOffset属性设置了Billboard的相对于相机位置的偏移量。

horizontalOrigin属性设置了Billboard的水平对齐方式。

verticalOrigin属性设置了Billboard的垂直对齐方式。

heightReference属性设置了Billboard的高程参考方式。

disableDepthTestDistance属性设置了Billboard的深度测试方式。默认情况下，Billboard会在其他3D对象之前渲染，但是可以使用这个属性来关闭深度测试，使Billboard总是渲染在其他对象上方。

id属性设置了Billboard的唯一标识符。

其他注意事项

1. 如果要同时创建多个Billboard，可以使用BillboardCollection的Bulk Uploading功能。

2. 如果想要在3D场景中固定宽度和高度的Billboard，可以设置Billboard的width和height属性，并将它的heightReference属性设置为Cesium.HeightReference.NONE。

3. 如果要在2D场景中显示Billboard，可以将相机的高度设置为零，或者使用Cesium的SceneMode.2D模式。

参考资料

• Cesium官方文档

• Cesium API Reference