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、效果图

参考博客