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

最新推荐文章于 2024-06-03 11:22:43 发布
最新推荐文章于 2024-06-03 11:22:43 发布
阅读量8.5k 收藏 11
点赞数 1
文章标签： js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bingbingbling/article/details/118112333
版权

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

Cesium可实现功能之billboard广告牌

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

Cesium官方API

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

成员变量及中文释义

MembersValue
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);

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

bingbingbling
关注
  • 1
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
DEJA_VU3D - Cesium功能集 之 94-广告版Billboard（标绘+编辑）
总得学点什么的博客
01-31 1010
Cesium标绘和编辑系列第二篇：广告版Billboard（标绘+编辑），包括完整源代码
Cesium结合Canvas画布创建Billboard
qq_35984445的博客
09-16 1257
5、使用Image方法转换画布内容及返回，赋值billboard实体中的image属性即可。1、了解billboard实体中的image属性是 可以设置指定图像和纹理的。3、将图片作为背景，使用drawImage进行绘制。⑤、创建billboard实体，并使用Image。根据以上思路无法正常使用的小伙伴，可参考以下资源。④、canvas转换为Image。2、创建canvas画布标签。③、画布设置背景图和文字。①、使用原型链进行封装。4、字体可以根据画布。
【004--003】-CesiumJS-API-Billboard相关函数用法
wtuynqy的专栏
02-19 1979
Billboard相关函数用法
Cesium笔记 label billboard 调整偏移量
最新发布
qq_40216244的博客
06-03 346
其中 pixelOffset: new Cesium.Cartesian2(0, -20), 用于调整label 以及 billboard 的左右以及上下偏移 x 为左右 y 为上下 正：右 下 负：左 上。如果billboard 遮住了label 使标签不显示 则设置 eyeOffset: new Cesium.Cartesian3(0, 0, -10)
Cesium快速上手3-Billboard/Label/PointPrimitives图元使用讲解
sky___Show的博客
04-22 921
面朝屏幕的图片,用于添加图标等集合。添加一个面前屏幕的点。
cesium 添加广告牌
泽洋数字有限公司的钱奴
06-12 3644
Cesium 添加广告牌子 这次是关于cesium 添加广告牌的技术介绍 废话不多说，先上链接，看一下我实现的功能广告牌的功能 效果展示. 大家看完效果之后，我来细讲一下我的各个功能分解 我这是基于原生cesium.js做的功能 用户通过名字，id， 经度，纬度，高度，和描述，照片，颜色来对广告牌的设置，用户可以自己设置高度和显示的图片，并且可以设置图片显示的颜色，根据设置的高度显示你选中的图片广告牌。 **info信息展示：**当用户单击某个广告牌的时候，右侧显示信息你设置相关信息 **删除功能：**删除
模仿火星科技 基于cesium+ 贴地测量+可编辑
泽洋数字有限公司的钱奴
08-08 1612
当您进入Cesium的编辑面积测量世界，下面是一个详细的操作过程，帮助您顺利使用这些功能：效果图如下：
Cesium结合Canvas画布创建billboard实体
09-16
使用了Cesium，并且有Canvas画布生成图片，用于billboard实体，详细请查看博客：https://blog.csdn.net/qq_35984445/article/details/132920793
cesium广告牌全部代码.vue
06-12
这是cesium广告牌全部代码，对代码的介绍，效果展示都在我的博客介绍有，如果还有什么问题请私聊小编，小编帮你解决
cesium通过billboard加载gif图片例子
12-29
在3D地理信息系统（GIS）领域，Cesium是一款强大的开源JavaScript库，用于在浏览器中创建交互式的3D地球模型。本示例将详细介绍如何利用Cesium的Billboard功能加载并显示GIF动态图片。 首先，我们需要理解...
基于cesium实现视频投射功能
11-09
在IT行业中，尤其是在Web GIS（地理信息系统）领域，Cesium是一个非常重要的开源库，它允许开发者创建高性能的3D地球和地图应用。本教程将详细讲解如何基于Cesium实现视频投射功能，使得用户能够在三维模型上看到...
cesium实现uv贴图功能
02-18
本教程将深入探讨如何在Cesium中实现UV贴图功能，这是一种在3D模型上应用纹理的重要技术。 首先，我们要理解什么是UV贴图。在3D建模中，每个3D物体的表面被分解成多个二维平面，这些平面被称为UV坐标。这些坐标用于...
cesium中Entity的billboardGraphics添加图片标注
tjx1997的博客
10-24 624
cesium可以利用billboardGraphics类将创建的图片标注添加到地球中。
cesium-广告牌billboard
挣钱花388的博客
11-04 808
广告牌简单理解就是图片。跟html不一样的是，广告牌有随球转动的效果。
cesium面板动态显示并跟随移动
solocao的专栏
10-05 3043
我的需求，首先显示一个billboard，点击billboard后，在旁边显示一个div面板，并且该面板随着地图拖拽也能进行相对运动。 做成效果如下。 概要实现步骤： 1、自定义div面板，面板需要设置id值 2、使用我自己定义的函数，进行定位。 export function htmlFixed(viewer, domId) { const htmlOverlay = document....
Cesium加载大量广告牌并实现贴地
qq_26610239的博客
11-04 3753
Cesium加载大量点或广告牌，并实现贴地的两种方式。
cesium视频教程
10-15
本课程是一套基于GIS+BIM的三维地理信息系统框架，学习本课程可以快速掌握cesiumjs开发GIS+BIM的地理信息系统，三维系统等。学习本课程可以提高对三维渲染，地理信息GIS+BIM的认识，为您的学习与开发工作节约大量宝贵的时间，快速入门，上手。   
自定义广告html,自定义cesium html广告牌
weixin_42627459的博客
06-17 1332
广告牌旨在显示光栅化数据，例如图像。如果要将html渲染为1，则必须为其创建一个canvas元素draw the dom elements，然后将该画布作为其图像属性传递给广告牌。如果您实际上只需要显示图标/图像，然后在用户点击时显示一些HTML，那么您应该使用Entity API来创建广告牌。您将获得其他属性，例如＆＃39; description＆＃39;当您使用Entity API时。描述可...
【Cesium】点击billboard弹出自定义气泡框
心生的小鱼专栏
06-04 3476
点击billboard图标，弹出自定义气泡框，并且在缩放、移动地图时保持气泡框和图标的相对位置不变
cesium自定义广告牌
08-31
要在Cesium中创建自定义广告牌，您可以按照以下步骤进行操作： 1. 首先，您需要在Cesium中加载必要的库和资源。您可以从Cesium官方网站下载Cesium库，并将其包含在您的项目中。 2. 创建一个Canvas元素，用于绘制广告牌的内容。您可以使用HTML5 Canvas API绘制图形、文本等。 3. 使用Cesium的Entity API创建一个实体对象，将广告牌与地球上的位置相关联。您可以指定广告牌的位置、旋转角度、大小等属性。 4. 使用Cesium的BillboardVisualizer类创建一个广告牌可视化对象，并将其与实体对象关联起来。这将处理广告牌的渲染和更新。 5. 在渲染循环中，更新广告牌的内容和属性。您可以根据需要更改广告牌的位置、颜色、文本等。 下面是一个简单的示例代码，展示了如何在Cesium中创建自定义广告牌： ```javascript // 创建Canvas元素 var canvas = document.createElement('canvas'); canvas.width = 128; canvas.height = 64; var context2D = canvas.getContext('2d'); // 在Canvas上绘制内容 context2D.fillStyle = 'red'; context2D.fillRect(0, 0, canvas.width, canvas.height); context2D.font = 'bold 24px Arial'; context2D.fillStyle = 'white'; context2D.fillText('Custom Billboard', 10, 40); // 创建实体对象 var entity = new Cesium.Entity({ position: Cesium.Cartesian3.fromDegrees(0, 0, 0), }); // 创建广告牌可视化对象 var billboardVisualizer = new Cesium.BillboardVisualizer(scene, entityCollection); billboardVisualizer.update(entity); // 初始化广告牌 // 在渲染循环中更新广告牌 scene.postRender.addEventListener(function() { context2D.fillText('Time: ' + Date.now(), 10, 60); // 更新时间 billboardVisualizer.update(entity); // 更新广告牌 }); ``` 这只是一个简单示例，您可以根据需要进行自定义和扩展。您可以在Canvas上绘制任何内容，并使用Cesium的其他功能来控制广告牌的属性和行为。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值