cesium 添加广告牌

Cesium 添加广告牌子

这次是关于cesium 添加广告牌的技术介绍

废话不多说，先上链接，看一下我实现的功能广告牌的功能
效果展示.
大家看完效果之后，我来细讲一下我的各个功能分解
我这是基于原生cesium.js做的功能
用户通过名字，id， 经度，纬度，高度，和描述，照片，颜色来对广告牌的设置，用户可以自己设置高度和显示的图片，并且可以设置图片显示的颜色，根据设置的高度显示你选中的图片广告牌。
info信息展示：当用户单击某个广告牌的时候，右侧显示信息你设置相关信息
删除功能：根据鼠标单击选中某一个广告牌，而进行删除
我已经解决广告牌被倾斜摄影的遮挡问题代码也在关键代码中有

组件介绍

我这里使用了vue-cli写的项目，然后这些名字，id， 经度，纬度，高度，和描述，照片，颜色标签都是 element组件
这个里面有介绍，怎么在vue和html下配置他的环境变量和在全局中注册他的组件
我使用的是：Input 输入框、ColorPicker 颜色选择器、Button 按钮、Message 消息提示、MessageBox 弹框
现在介绍一下 在Message 消息提示、MessageBox 弹框 他俩这边有一个坑
注意：划重点了
在全部注册Message 的时候，如果你是按照Vue.use(Message)方式注册Message组件的时候，当你刷新页面的时候你会出现跟图四的效果一样
所以你想禁止这种现象出现的话有两种方法
第一种：你就按照图一的方式在全局注册

图一：

Vue.use(Message.name, Message);

图二：

图三：

Vue.use(Message);

图四：

第二种：你局部注册在想要的注册组件里写

import{MessageBox} from 'element-ui'

代码介绍：

全部代码已经上传只按需要下载几个element组件就可以或者 你可以直接代码复制到html页面中便可以使用
代码链接：

主要代码设置：

var enetity1 = {
					name: this.name,
					id: this.name,
					position: Cesium.Cartesian3.fromDegrees(this.lon, this.lat, this.height),
					billboard: {
						id: 12,
						// image: '../../../static/img/find01.png',
						image: this.img,
						disableDepthTestDistance: Number.POSITIVE_INFINITY,//被遮罩
						horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
						verticalOrigin: Cesium.VerticalOrigin.BOTTOM, //贴地属性
						scale: 3,
						// color: Cesium.Color.RED,
						color: Cesium.Color.fromCssColorString(this.color1),
						width: 20,
						height: 10,
					},
					label: {
						text: this.des,
						font: '25px',
						color: Cesium.Color.RED,
						style: Cesium.LabelStyle.FILL_AND_OUTLINE,
						outlineWidth: 1,
						//垂直位置
						verticalOrigin: Cesium.VerticalOrigin.BUTTON,
						//中心位置
						pixelOffset: new Cesium.Cartesian2(0, 20),
						eyeOffset: new Cesium.Cartesian3(0, 0, -10)
					}
				};

小编已经介绍结束了，如果有什么问题，请私信小编，小编会一起帮你解决问题
我的代码已经上传有需要请下载代码链接