Cesium添加HTML容器,插入HTML代码块,类似于富文本label

参考文章:https://blog.csdn.net/u012632557/article/details/105204972/ 

如果需要实现弹窗功能, 直接参考原文章就可以;

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 = $("
");
    $(_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效果