Cesium可实现功能之billboard广告牌

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

Cesium官方API

成员变量及中文释义

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, // defaulteyeOffset: new Cesium.Cartesian3(0.0, 0.0, 0.0), // defaulthorizontalOrigin: Cesium.HorizontalOrigin.CENTER, // defaultverticalOrigin: Cesium.VerticalOrigin.BOTTOM, // default: CENTERscale: 2.0, // default: 1.0// color: Cesium.Color.LIME, // default: WHITErotation: Cesium.Math.PI_OVER_FOUR, // default: 0.0alignedAxis: Cesium.Cartesian3.ZERO, // defaultwidth: 25, // default: undefinedheight: 25, // default: undefinedpixelOffset: 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, // defaulteyeOffset: new Cesium.Cartesian3(0.0, 0.0, 0.0), // defaulthorizontalOrigin: Cesium.HorizontalOrigin.CENTER, // defaultverticalOrigin: Cesium.VerticalOrigin.BOTTOM, // default: CENTERscale: 2.0, // default: 1.0// color: Cesium.Color.LIME, // default: WHITErotation: Cesium.Math.PI_OVER_FOUR, // default: 0.0alignedAxis: Cesium.Cartesian3.ZERO, // defaultwidth: 25, // default: undefinedheight: 25, // default: undefinedpixelOffset: 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);

效果图

Cesium功能实现（一）创建billboard广告牌相关推荐

Cesium中billboard广告牌使用PinBuilder创建的自定义样式地图图钉
详细内容,请参考官方文档: http://cesium.xin/cesium/cn/Documentation1.72/PinBuilder.html?classFilter=pin HTMLCan ...
react中cesium添加billboard广告牌，billboard点击事件和鼠标滑过效果
刚做完项目中广告牌的效果,顺便分享一下.更多可以参考官网的例子查看详情先上效果图: 1.添加广告牌: 2.鼠标滑过效果(放大了一点点): 3.鼠标点击后,视野定位到具体的位置: 1.添加广告牌代码: ...
阿里云服务器创建历史功能介绍快速创建云服务器
当我们登录阿里云控制台创建云服务器的时候,通常的做法是先登录阿里云服务器购买界面,再配置计费方式.网络类型.实例规格.带宽.镜像等一系列云服务器参数,最后创建云服务器.如果我们在配置参数的过程中出现误 ...
【机器人操作系统】ROS工作空间及功能包的创建
ROS工作空间及功能包的创建摘要: 总结ROS工作空间及功能包的创建的具体步骤及命令: 工作空间/功能包的创建的步骤大同小异: step1.创建工作空间/功能包: step2.编译工作空间/功能包: ...
DELMIA软件：机器人工作区运动包络功能介绍与创建方法
功能概述可达范围是衡量机器人本体性能的一个重要参数,它可以确定机器人的臂展范围,是系统集成人员进行工作站结构设计时的重要依据. 市面上几乎所有的工业机器人虚拟仿真软件都能根据机器人的三维模型自动计算 ...
DEJA_VU3D - Cesium功能集之 083-Cesium热力图实现完整版
前言编写这个专栏主要目的是对工作之中基于Cesium实现过的功能进行整合,有自己琢磨实现的,也有参考其他大神后整理实现的,初步算了算现在有差不多实现小130个左右的功能,后续也会不断的追加,所以暂时 ...
关于DEJA_VU3D - Cesium功能集专栏说明
博主简介博主90后专业GIS行业开发人员,一直从事GIS相关工作5年左右,主要涉及三维和地图可视化等内容.工作中难免要接触到相关开发框架,对Cesium,Three.js,openlayer,sky ...
BIMFACE功能测评- 如何创建二三维标签？
之前章节给大家重点讲解BIMFACE中针对构件状态展示的一些接口方法,那这次就重点和大家说说运维场景中比较高频且好用的功能--二三维标签. BIMFACE目前支持RVT.SKP.IFC.IGMS.DW ...
利用Excel 2010的“图表模板”功能，快速创建新图表
为了让自己制作的数据透视图更具吸引力,小刘费尽心思将图表打扮的十分漂亮.但是,在以后的工作中,如果他需要再创建类似的图表时,是否还要重新对图表进行修饰美化呢?答案是否定的.其实,在Excel 2010 ...

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

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

Cesium可实现功能之billboard广告牌

Cesium官方API

成员变量及中文释义

案例

js和css

代码实现

给billboard添加label

Cesium功能实现（一）创建billboard广告牌相关推荐

最新文章

热门文章