CesiumはHTMLコンテナを追加し、HTMLコードブロックを挿入します.リッチテキストlabelと似ています.

/**
 *   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  を  します.