Cesium添加HTML容器,插入HTML代碼塊,類似於富文本label

參考文章:https://blog.csdn.net/u012632557/article/details/105204972/  <Cesium實現Popup彈窗功能>

如果需要實現彈窗功能, 直接參考原文章就可以;

1.創建Popup類

/**
 * 創建HTML模塊
 */
var Popup = function(info){
    this.constructor(info);
}
Popup.prototype.id=0;
Popup.prototype.constructor = function(info){
    var _this = this;
    _this.viewer = info.viewer;//彈窗創建的viewer
    _this.geometry = info.geometry;//彈窗掛載的位置
    _this.id ="popup_" +_this.__proto__.id++ ;
    _this.ctn = $("<div class='bx-popup-ctn' id =  '"+_this.id+"'>");
    $(_this.viewer.container).append( _this.ctn);
    _this.ctn.append(_this.createHtml(info.html));//嵌入的HTML代碼

    _this.render(_this.geometry);
    _this.eventListener = _this.viewer.clock.onTick.addEventListener(function(clock) {
        _this.render(_this.geometry);
    })
}
// 實時刷新
Popup.prototype.render = function(geometry){
    var _this = this;
    var position = Cesium.SceneTransforms.wgs84ToWindowCoordinates(_this.viewer.scene,geometry)
    _this.ctn.css("left",position.x- _this.ctn.get(0).offsetWidth/2);
    _this.ctn.css("top",position.y- _this.ctn.get(0).offsetHeight - 10);
}
// 動態生成內容
Popup.prototype.createHtml = function(html){
    return html;
}
// 關閉彈窗按鈕
Popup.prototype.close=function(){
    var _this = this;
    _this.ctn.remove();
    _this.viewer.clock.onTick.removeEventListener( _this.eventListener );
}

從原文章直接複製過來的, 稍微改了幾處;

2.嵌入HTML代碼,(需要位置position和html代碼)

/**
 *添加天氣信息, 返回元素ID
 */
function addWeaTherInfo(viewer, option) {
    var popup = new Popup({
        viewer: viewer,
        geometry: option.position,
        html: option.html
    })
    return popup.id;
}

3.效果圖,這個天氣面板就是我添加進去的HTML代碼塊,實際就是在頁面添加了一個dom節點, 不在canvas中, 但會隨着地球和相機的變動,自行變換位置,達到popup效果