Cesium功能实现（一）创建billboard广告牌

Cesium功能实现（一）创建billboard广告牌Cesium可实现功能之billboard广告牌Cesium官方API成员变量及中文释义案例js和css代码实现给billboard添加label广告牌被底图遮盖无法显示完全设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchar

bingbingbling

9504人浏览 · 2022-06-16 12:13:47

bingbingbling · 2022-06-16 12:13:47 发布

Cesium功能实现（一）创建billboard广告牌

Cesium可实现功能之billboard广告牌

Cesium可实现功能之billboard广告牌

最近在学习cesium，试着实现了billboard功能模块，但在实现过程中遇到一些问题，就记录下来。

Cesium官方API

官网链接https://cesium.com/learn/cesiumjs/ref-doc/Billboard.html

成员变量及中文释义

Members	Value
alignedAxis	获取或设置世界空间中的对齐轴
color	获取或设置与广告牌纹理相乘的颜色
disableDepthTestDistance	获取或设置与相机的距离
distanceDisplayCondition	获取或设置条件，该条件指定将在距摄像机的距离显示此广告牌。
eyeOffset	获取或设置在眼坐标中应用于此广告牌的3D笛卡尔偏移
height	获取或设置广告牌的高度
heightReference	获取或设置此广告牌的高度参考
horizontalOrigin	获取或设置此广告牌的水平原点
id	获取或设置选择广告牌时返回的用户定义对象
image	获取或设置要用于此广告牌的图像
pixelOffset	获取或设置屏幕空间中距此广告牌原点的像素偏移
pixelOffsetScaleByDistance	根据广告牌与摄像头的距离，获取或设置广告牌的近像素偏移量和远像素偏移量缩放属性
position	获取或设置此广告牌的笛卡尔位置
rotation	获取或设置以弧度为单位的旋转角度
scale	获取或设置与广告牌的图像大小（以像素为单位）相乘的统一比例
scaleByDistance	根据广告牌与相机的距离获取或设置广告牌的近和远缩放属性
show	确定是否显示此广告牌
sizeInMeters	获取或设置广告牌大小以米或像素为单位
translucencyByDistance	根据广告牌到相机的距离，获取或设置广告牌的近和远半透明属性
verticalOrigin	获取或设置此广告牌的垂直原点
width	获取或设置广告牌的宽度

案例

js和css

先在html中引入cesium.js和css

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Use correct character set. -->
    <meta charset="utf-8" />
   
    <script src="./Build/Cesium/Cesium.js"></script>
    <style>
      @import url(./Build/Cesium/Widgets/widgets.css);
    </style>
  </head>
  <body>
    <div id="cesiumContainer"></div>

代码实现

创建广告牌

// 创建一个billboard广告牌
var viewer = new Cesium.Viewer("cesiumContainer");

            var billboard = viewer.entities.add({
            name:"自定义billboard lab",
            position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
            billboard:{
              image: "img/image.jpg",
              show: true, // default
              eyeOffset: new Cesium.Cartesian3(0.0, 0.0, 0.0), // default
              horizontalOrigin: Cesium.HorizontalOrigin.CENTER, // default
              verticalOrigin: Cesium.VerticalOrigin.BOTTOM, // default: CENTER
              scale: 2.0, // default: 1.0
              // color: Cesium.Color.LIME, // default: WHITE
              rotation: Cesium.Math.PI_OVER_FOUR, // default: 0.0
              alignedAxis: Cesium.Cartesian3.ZERO, // default
              width: 25, // default: undefined
              height: 25, // default: undefined
              pixelOffset: new Cesium.Cartesian2(0, -72),
            }
          });
        viewer.zoomTo(billboard);

效果图
在这里插入图片描述

给billboard添加label

在定义一个billboard的基础上，添加label属性

// 创建一个billboard广告牌
var viewer = new Cesium.Viewer("cesiumContainer");

            var billboard = viewer.entities.add({
            name:"自定义billboard",
            position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
            billboard:{
              image: "img/image.jpg",
              show: true, // default
              eyeOffset: new Cesium.Cartesian3(0.0, 0.0, 0.0), // default
              horizontalOrigin: Cesium.HorizontalOrigin.CENTER, // default
              verticalOrigin: Cesium.VerticalOrigin.BOTTOM, // default: CENTER
              scale: 2.0, // default: 1.0
              // color: Cesium.Color.LIME, // default: WHITE
              rotation: Cesium.Math.PI_OVER_FOUR, // default: 0.0
              alignedAxis: Cesium.Cartesian3.ZERO, // default
              width: 25, // default: undefined
              height: 25, // default: undefined
              pixelOffset: new Cesium.Cartesian2(0, -72),
            },
             label: { //文字标签
                    text: "这是一个label文字标签",
                    font: "20px sans-serif",
                    showBackground: true,
                    horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
                    pixelOffset: new Cesium.Cartesian2(0.0, -39.9522222),
                    pixelOffsetScaleByDistance: new Cesium.NearFarScalar(
                      1.5e2,
                      3.0,
                      1.5e7,
                      0.5
                    ),
          });
        viewer.zoomTo(billboard);