CESIUM例子学习（三）——billboard

最新推荐文章于 2026-03-24 00:25:20 发布

原创

最新推荐文章于 2026-03-24 00:25:20 发布 · 9.9k 阅读

标签

#cesium

收录于

本文详细介绍了在Cesium中使用Billboard技术的方法，包括如何加载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