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

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

cesium 添加广告牌相关推荐

react中cesium添加billboard广告牌，billboard点击事件和鼠标滑过效果
刚做完项目中广告牌的效果,顺便分享一下.更多可以参考官网的例子查看详情先上效果图: 1.添加广告牌: 2.鼠标滑过效果(放大了一点点): 3.鼠标点击后,视野定位到具体的位置: 1.添加广告牌代码: ...
cesium给广告牌加动图
有几种效果可实现: 1.类似波纹扩散效果 2.旋转效果 3.各种效果步骤: 1.添加广告牌 var test = viewer.entities.add({name : '站点1',code:'11 ...
优化 cesium 界面广告牌（billboard）数据量大于 10w ＋时，地图加载缓慢、卡顿、加载完成后浏览器严重卡顿甚至崩溃问题
优化 cesium 界面广告牌(billboard)数据量大于 10w +时,地图加载缓慢.卡顿.加载完成后浏览器严重卡顿甚至崩溃问题前言: 项目之前的设计,billboard 广告牌是绑在 ent ...
Cesium 添加天地图三维地形
天地图三维地址地址列表地址三维地形服务 //t{s}.tianditu.gov.cn/mapservice/swdx?T=elv_c&tk={key} 三维地名服务 //t{s}.tia ...
cesium 添加纽约城市模型
一.cesium 添加纽约3D建筑效果代码 Cesium.Ion.defaultAccessToken='eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGki ...
cesium 添加echarts
cesium 添加echarts 这儿用的版本是4或者5 1.引入封装好的文件EchartsLayer和echart数据data.js 2.运用代码data.js // import echarts ...
Cesium 添加多个实体并让其运动
Cesium 添加多个实体并让其运动开发工具与关键技术:作者:熊琪撰写时间:2020年9月28日首先要搞明白怎么同时添加多个实体,并让其运动起来,有以下几个步骤: 1.把需要运动的轨迹经过的坐标点 ...
cesium添加填充_Cesium中级教程1 - 空间数据可视化（一）
Cesium中文网:http://cesiumcn.org/| 国内快速访问:http://cesium.coinidea.com/ 本教程将教读者如何使用Cesium的实体(Entity)API绘制 ...
Cesium添加图标后点击该图标出现弹窗的具体实现方法
实现效果: 点击左上角视频弹窗按钮,视角飞行,出现图标,并定位至指定位置: 点击图标,出现弹窗,弹窗可播放视频: 实现方法: 1.vue文件中: template中: <template> ...

cesium 添加广告牌

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

组件介绍

代码介绍：

cesium 添加广告牌相关推荐

最新文章

热门文章