cesium--画一个广告牌

最新推荐文章于 2025-10-09 16:56:53 发布

原创最新推荐文章于 2025-10-09 16:56:53 发布 · 4.5k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#cesium #billboard

Cesium 专栏收录该内容

21 篇文章

订阅专栏

本文详细介绍了CesiumJS中广告牌(Billboards)功能的使用方法，包括各种属性如image、show、scale等的解释及代码示例，帮助读者掌握如何在3D地图上精确放置和调整广告牌。

前言

api地址:
https://cesiumjs.org/refdoc/
沙盒地址:
https://cesiumjs.org/Cesium/Apps/Sandcastle/index.html?src=Billboards.html

api汉化

名称	作用
image	指定要用于公告牌的图像、URI或画布的属性,说白了就是引用地址
show	是否显示
scale	比例缩放
horizontalOrigin	一种特性特异于水平原理,说白了,就是控制和Label的位置的
verticalOrigin	说白了,就是控制和label的垂直位置的
eyeOffset	眼睛偏移距离;api属性有例子解释
pixelOffset	指定像素偏移的属性,距离视点偏移的距离
rotation	指定围绕x轴旋转的度数
alignedAxis	指定旋转的单位矢量轴
width	宽
height	高
color	颜色
scaleByDistance	与相机距离的缩放比例;new Cesium.NearFarScalar(0, 200.0, 1.5e7, 0.5)意思就是视角拉到近处的时候,图像就会放大200倍,远处的时候,就缩小为原来的一半
translucencyByDistance	根据相机的距离设置透明度,跟上面一样啊
pixelOffsetScaleByDistance	根据相机的距离设置偏移,跟上面一样啊
imageSubRegion	指定边界矩形的属性，该矩形定义用于公告牌的图像的子区域，而不是整个图像，从左下角开始以像素度量,也就是画个框,把图片放到规定的地方,见DEMO
sizeInMeters	一个布尔属性，指定是否应以米为单位测量此公告牌的大小,如果开启了,则广告牌不会随着你视角的拉伸而维持不变
heightReference	相对高度
distanceDisplayCondition	一个属性，指定此公告牌将显示在与相机的距离
disableDepthTestDistance	指定与要禁用深度测试的相机之间的距离的属性

例子

//绘制广告牌
    billboardDraw:function(){
        viewer.scene.globe.depthTestAgainstTerrain = true;
        var billboard = viewer.entities.add({
            name:"广告牌",
            position:Cesium.Cartesian3.fromDegrees(113,24),
            billboard:{
                image:"./images/lighting.png",
                scale:0.1,
                color:Cesium.Color.RED,
                heightReference : Cesium.HeightReference.CLAMP_TO_GROUND,
                disableDepthTestDistance : Number.POSITIVE_INFINITY
            }
        });
        viewer.zoomTo(billboard);
    }