Cesium添加Label

var viewer = new Cesium.Viewer('cesiumContainer');

var canvas = document.createElement('canvas');
canvas.width = 300;
canvas.height = 300;

var svgString = '<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">' +
       '<foreignObject width="100%" height="100%">' +
       '<div xmlns="http://www.w3.org/1999/xhtml" style="font-size:40px; color: #FF0">' +
         '<em>I</em> like' + 
         '<span style="color:white; text-shadow:0 0 2px blue;">' +
         'Cupcakes</span>' +
       '</div>' +
       '</foreignObject>' +
       '</svg>';

var image = new Image();
image.src = 'data:image/svg+xml;base64,' + window.btoa(svgString);

//Need to wait for image to load before proceeding to draw
image.onload = function() {
  canvas.getContext('2d').drawImage(image, 0, 0);

  viewer.entities.add({
    id: 'Cupcake SVG',
    position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
    billboard: {
      image: canvas
    },
    description: '<p>This is a cupcake that can be modified.</p>'
  });
};

import * as Cesium from "cesium";

export default class Popup {
    constructor(info){
        let _this = this;
        _this.viewer = info.viewer;//弹窗创建的viewer
        _this.geometry = info.geometry;//弹窗挂载的位置

        //原型属性
        if(!this.__proto__.id){
            this.__proto__.id = 0;
        }
        _this.id ="popup_" +_this.__proto__.id++ ;
        
        let dom=document.createElement("div");
        dom.className="bx-popup-ctn";
        dom.id=_this.id;
        _this.ctn=dom;
        _this.viewer.container.appendChild(_this.ctn);
        //测试弹窗内容
        let testConfig = {
            header:"测试数据",
            content:"<div>测试窗口</div>",
        }
        _this.ctn.innerHTML=_this.createHtml(testConfig.header,testConfig.content);
        _this.render(_this.geometry);
        
        // 这段代码是关键
        _this.eventListener = _this.viewer.clock.onTick.addEventListener(function() {
            _this.render(_this.geometry);
        })
    }
    render(geometry){
        let _this = this;
        let position = Cesium.SceneTransforms.wgs84ToWindowCoordinates(_this.viewer.scene,geometry);
        _this.ctn.style.left=(position.x- _this.ctn.offsetWidth/2)+"px";
        _this.ctn.style.top=(position.y- _this.ctn.offsetHeight - 10)+"px";
    }
    createHtml(header,content){
        let html = '<div class="bx-popup-header-ctn">'+
            header+
            '</div>'+
            '<div class="bx-popup-content-ctn" >'+
            '<div class="bx-popup-content" >'+    
            content+
            '</div>'+
            '</div>'+
            '<div class="bx-popup-tip-container" >'+
            '<div class="bx-popup-tip" >'+
            '</div>'+
        '</div>'+
        '<a class="leaflet-popup-close-button" >X</a>';
        return html;
    }
    close(){
        let _this = this;
        _this.ctn.parentNode.removeChild(_this.ctn);
        _this.viewer.clock.onTick.removeEventListener( _this.eventListener );
    }
}