Cesium 点击广告牌（Billboard）显示自定义文字信息展示弹框（vue项目记录）

Vue中Cesium 点击广告牌（Billboard）展示广告牌信息内容功能

原理

实现原理与显示经纬度信息一致，在cesium挂载的dom嵌套children，通过控制子元素的display，控制显隐，主要点在于使用scene.postRender事件监听渲染改变，改变子元素的left和top来实现球面转动后子元素的位置跟随移动的功能

译：获取场景呈现后将立即引发的事件。事件的订阅者接收场景实例作为第一个参数，当前时间作为第二个参数。

1、嵌套子元素、样式（绑定点击事件，点击子元素时隐藏弹框）

<div id="cesiumContainer"><div id="coords"></div><div id="info_box" @click="hide">...</div>
</div>

#info_box{position: absolute;z-index: 10;display: none;width: 300rem;height: 200rem;background-image: url('xxxxxxxxxxxxx');background-size: 100% 100%;
}
/* 小居居 */
#info_box:after {content: '';position: absolute;border-width: 10px;border-style: solid;border-color: rgb(20, 63, 91) transparent transparent transparent;top: 190rem;left: 140rem;
}

2、添加cesium点击事件（右击）、处理跟随

this.siteInfoDom = document.getElementById('info_box');
let handler = new Cesium.ScreenSpaceEventHandler(canvas);
let that = this
handler.setInputAction(function(movement) {let pickedLabel = viewer.scene.pick(movement.position);if (Cesium.defined(pickedLabel)) {if (pickedLabel.id && pickedLabel.id.billboard) {that.siteInfoPosition = pickedLabel.id.position._value;that.rightClickSiteBillboardId = pickedLabel.id.id;// 获取站点id 请求数据 显示站点信息在site_info_box中that.show();}}
}, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
//处理跟随
viewer.scene.postRender.addEventListener(function(percentage) {//转换到屏幕坐标if (that.siteInfoPosition && that.siteInfoDom.style.display == 'block') {var winpos = viewer.scene.cartesianToCanvasCoordinates(that.siteInfoPosition);if (winpos) {that.siteInfoDom.style.left = (winpos.x - 300 / 2).toFixed(0) + 'px';that.siteInfoDom.style.top = (winpos.y - 212).toFixed(0) + 'px';}}
});

3、控制显隐

show() {this.siteInfoDom.style.display = 'block';
},
hide() {this.siteInfoDom.style.display = 'none';
},

4、效果图

参考博客

Cesium 点击广告牌（Billboard）显示自定义文字信息展示弹框（vue项目记录）相关推荐

每日一记：windows官方桌面显示自定义文字软件BGInfo
你看到我这篇文章时,说明你刚好被推荐或者你也在找可以在桌面显示自定义文字的一个方法,实现的方式肯定有多种,这里分享一个好用的靠谱软件:BGInfo. BGInfo是一款用于设置墙纸背景文本显示的软件 ...
linux远程登录显示,SSH远程登录显示自定义警告信息
SSH远程登录显示自定义警告信息On 2015年9月9日 by admin >Linux服务器经常需要通过ssh服务远程登录操作.为了提醒登录着,或者非法入侵者,我们可以自定义设置警告或提醒信息 ...
mapbox创建自定义marker图标绑定弹框展示信息
/*** 创建自定义marker图标绑定弹框*/let carMarker = [];//存放marker图标for(let m= 0;m<gpsInfoList.length;m++){let ...
小程序点击多个指定地方都能关闭弹框
比如在popupDom和text这里都需要关闭当前这个弹框可以给他们定义一个一样的事件data-target="self" catchtap='hideBaitiaoView' ...
OpenLayers标记地图点及点击地图点显示自定义弹出框
css代码(设置弹出框样式) /*设置弹出框样式*/.ol-popup {position: absolute;background-color: #eeeeee;-webkit-filter: dr ...
HTML文字溢出显示省略号和鼠标放在文字上显示全部文字信息
代码 <div th:title="${stampDetail.stampData}" style="white-space: nowrap;overflow: h ...
uni-app - 日历选择器组件（支持日期 “范围选择“ 多选 / 支持单选日期 / 自定义默认选中时间 / 弹框式 / 支持农历）完美兼容 H5 APP 小程序，最好用的教程完整源代码插件！
前言网上的教程代码非常乱且都有 BUG 存在,非常难移植到自己的项目中,本文代码干净整洁注释详细. 本文提供弹框式日历选择器组件,支持单选.范围选择日期,全端兼容无BUG! 您只需复制粘贴,保证几 ...
echarts 地图九状线显示钓鱼岛系列（3）之 vue项目
我引入的是 "echarts": "^4.2.1" (地图对比) (china.js) (china1.js) 1.首先需要在node_modul ...
vue实现文字过长鼠标移上去显示对应文字，移走隐藏
vue实现文字过长鼠标移上去显示对应文字,移走隐藏 vue项目里实现列表里因文字过长,加上鼠标移上去显示对应文字效果示例图片 html js 数据定义 style vue项目里实现列表里因文字过长, ...

Cesium 点击广告牌（Billboard）显示自定义文字信息展示弹框（vue项目记录）

Vue中Cesium 点击广告牌（Billboard）展示广告牌信息内容功能

原理

1、嵌套子元素、样式（绑定点击事件，点击子元素时隐藏弹框）

2、添加cesium点击事件（右击）、处理跟随

3、控制显隐

4、效果图

Cesium 点击广告牌（Billboard）显示自定义文字信息展示弹框（vue项目记录）相关推荐

最新文章

热门文章

Cesium 点击广告牌（Billboard）显示自定义文字信息展示弹框（vue项目记录）

Vue中Cesium 点击广告牌（Billboard）展示广告牌信息内容功能

原理

1、嵌套子元素、样式（绑定点击事件 ，点击子元素时隐藏弹框）

2、添加cesium点击事件（右击）、处理跟随

3、控制显隐

4、效果图

Cesium 点击广告牌（Billboard）显示自定义文字信息展示弹框（vue项目记录）相关推荐

最新文章

热门文章

1、嵌套子元素、样式（绑定点击事件，点击子元素时隐藏弹框）