Cesium实现自定义的广告牌效果

文章目录

1.实现效果
2.实现方法

Cesium实战系列文章总目录：传送门

在三维场景下使用自定义的广告牌进行POI的标注。

1.实现效果

2.实现方法

首先分解该效果，共包括四个部分，分别是顶部的icon和label、底部的point和连接的polyline线，然后分别将四部分渲染出来即可。核心代码如下：

/*** 用于添加poi的icon和label的函数* @param {*} lon ：经度* @param {*} lat ：纬度* @param {*} name ：标签内容* @param {*} color ：底部圆和横线的颜色* @param {*} url ：icon地址*/
function poiIconLabelAdd(lon, lat, name, color, url) {this.viewer.entities.add({name: name,position: Cesium.Cartesian3.fromDegrees(lon, lat, 300),// 图标billboard: {image: url,width: 50,height: 50,},label: {//文字标签text: name,font: '20px sans-serif',style: Cesium.LabelStyle.FILL,// 对齐方式(水平和竖直)horizontalOrigin: Cesium.HorizontalOrigin.LEFT,verticalOrigin: Cesium.VerticalOrigin.CENTER,pixelOffset: new Cesium.Cartesian2(20, -2),showBackground: true,backgroundColor: new Cesium.Color.fromBytes(0, 70, 24),},});// 先画线后画点，防止线压盖点let linePositions = [];linePositions.push(new Cesium.Cartesian3.fromDegrees(lon, lat, 5));linePositions.push(new Cesium.Cartesian3.fromDegrees(lon, lat, 300));viewer.entities.add({polyline: {positions: linePositions,width: 1.5,material: color,}})// 画点viewer.entities.add({// 给初始点位设置一定的离地高度，否者会被压盖position: Cesium.Cartesian3.fromDegrees(lon, lat, 5),point: {color: color,pixelSize: 15,}})
}

Cesium实现自定义的广告牌效果相关推荐

Cesium|xt3d 自定义信息框
Cesium|xt3d 自定义信息框效果代码预览地址效果代码 <!DOCTYPE html> <html lang="zh-CN"><hea ...
基于Cesium使用自定义着色器的资源总结
基于Cesium使用自定义着色器的资源总结二维几何着色器 Cesium.js着色器的简单实现 B站:cesium着色器的介绍及使用 cesium添加自己的着色器(我没复现出来) 基于3DTile着色 ...
Cesium实现自定义标签功能
Cesium实现自定义标签功能实现的底层逻辑和方法跟实现Popup弹窗功能类似,只需要修改对应的创建的html内容和css样式,即可定义出更好看的标签. 实现效果源码 LabelPlot 标签类 ...
cesium实现自定义漫游路径
cesium实现自定义漫游路径,实现cesium按照我们自己设置的路径漫游,也可以删除节点,添加节点,加速漫游,减速漫游.效果如下(记录) //公用时间czml,为后面的自定义路径提供模板 var c ...
Flutter RichText支持自定义文本溢出效果
extended text 相关文章 Flutter RichText支持图片显示和自定义图片效果 Flutter RichText支持自定义文本溢出效果 Flutter RichText支持自定义文 ...
android 自定义刷新控件,Android开发中MJRefresh自定义刷新动画效果
有时候我们对自己开发的项目经常不满意,但是我们要达到自定义刷新动画的效果有一定的难度,别着急,下面爱站技术频道和大家分享Android开发中MJRefresh自定义刷新动画效果,一起来学习吧! [一] ...
Android自定义类似ProgressDialog效果的Dialog
2019独角兽企业重金招聘Python工程师标准>>> Android自定义类似ProgressDialog效果的Dialog. 方法如下: 1.首先准备两张自己要定义成哪样子的效果 ...
Android使用xml自定义软键盘效果（附源码）
Android使用xml自定义软键盘效果原理: 1,软键盘其实是个控件,使用android.inputmethodserver.KeyboardView类定义. 2,主布局中使用帧布局,当我们需要显示 ...
Cesium开发：地下模式效果
主要是如何修改Cesium的源码,才能达到实现地下模式的效果. 修改完源码后,在执行地下模式的时候,设置地图的底色,要同步将地图影像进行半透明的操作,并且还要刷新一下影像图层,及时显示效果. //设置 ...

Cesium实现自定义的广告牌效果

文章目录

1.实现效果

2.实现方法

Cesium实现自定义的广告牌效果相关推荐

最新文章

热门文章