cesium 點擊彈出氣泡

因爲cesium沒有自帶的點擊彈出氣泡的功能，所以需要自己去開發一個這樣的功能

直接上代碼

window.Cesium.Viewer.prototype.addOverlay=function(overlay){
    overlay.setViewer(this);
    this._container.appendChild(overlay.element);
};

/**
 * 3D場景氣泡框,new 出來後要記得添加進去
 * @param opt {Object}
 * @param opt.id {property} id <br/>
 * @param opt.element {document.element} element元素<br/>
 * @param opt.position {Array} 氣泡框初始化的位置，可以不傳<br/>
 *
 * @constructor
 */

var Overlay= function(opt) {
    opt = opt || {};
    var _self = this;
    /**
     * @type {string|number} overlay id
     */
    this.id = opt.id;
    /**
     * @type {document.element} overlay的內容元素
     */
    this.element = opt.element;
    /**
     * @type {Array} 保存Popup框的x,y座標
     */
    this.position = opt.position;

    this._worldPosition=null;
    /**
     * @type {*} popup框相對於原點偏移像素值
     */
    this.offset = opt.offset;
    /**
     * @type {Cesium.Cartesian2}
     */
    this.scratch = new Cesium.Cartesian2();
    /**
     *
     * @type {Cesium.Viewer}
     * @private
     */
    this._viewer = null;

    /**
     * @private
     * 初始化Popup框
     */
    var init = function () {

    };
    /**
     * 設置關聯的cesium viewer
     * @param viewer
     */
    this.setViewer = function (viewer) {
        this._viewer = viewer;
        _self._viewer.scene.preRender.addEventListener(function () {
            if (_self.element.style.display!=="none") {
                _self.update()
            }
        });
    };
    /**
     * 獲取關聯的cesium viewer
     * @return {Cesium.Viewer}
     */
    this.getViewer = function () {
        return this._viewer;position
    };
    /**
     * 設置位置
     * @param position{Array}
     */
    this.setPosition = function (position) {
        if(!position){
            _self.close();
            return;
        }
        if (position instanceof Array) {
            //_self.position=position;
            position[0]=position[0]||0;
            position[1]=position[1]||0;
            position[2]=position[2]||0;
            position = Cesium.Cartesian3.fromDegrees(position[0], position[1],position[2]);
        }
        //var canvasPosition = _self._viewer.scene.cartesianToCanvasCoordinates(position,new Cesium.Cartesian2());
        if(!_self.getViewer()){
            return;
        }
        var canvasPosition=Cesium.SceneTransforms.wgs84ToWindowCoordinates(_self.getViewer().scene,position);
        if (Cesium.defined(canvasPosition)) {
            _self.element.style.top = canvasPosition.y + 'px';
            _self.element.style.left = canvasPosition.x + 'px';
            _self.show();
        }
        _self._worldPosition=position;
    };
    this.update=function(){
        this.setPosition(this._worldPosition);
    };
    /**
     *
     * @return {Array}
     */
    this.getPosition = function () {
        //return _self.position;
    };

    this.close = function () {
        _self.element.style.display = "none";
    };

    this.show = function () {
        _self.element.style.display = "block";
    };

    init();
};
export default Overlay;

使用事例(自己直接寫的，可能有些地方報錯，自行調整)

var overlay=new Overlay({element:document.getElementById('xxxid')});
Cesium.addOverlay(overlay);
// 選擇entity的監聽器,代碼自行調整,可以在overlay的基礎上繼承寫成bubble類
viewer._selectedEntityChanged.addListener(function(entity){
    overlay.setPosition(entity._position._value);
})

上面一些概念是參考openlayer的overlay;cesium裏面的viewer、selectionIndecator和selectionIndecatorViewModel有興趣可以去github上看一下源碼