cesium自定义美化Label

        参考博主 Cesium实现自定义标签功能_cesium label样式_liuccn的博客-CSDN博客 的例子，做了一些样式优化，具体实现效果如下:

 labelBeautifulHelper.js

let labelBeautifulHelper = (info)=>{
  let viewer = info.viewer; //弹窗创建的viewer
  let geometry = info.position; //弹窗挂载的位置
  let contentID = "contentBeautiful"+info.properties.id;
  let ctn = $("<div class='LabelPlotBeautiful-container' id =  '" + contentID + "'>");
  $(viewer.container).append(ctn);
  ctn.append(_createHtml());
  try {
      _render(geometry);
      viewer.clock.onTick.addEventListener(function (clock) {
        _render(geometry);
      })
  } catch (e) {}

  function  _render(geometry) {
    let position = Cesium.SceneTransforms.wgs84ToWindowCoordinates(viewer.scene, geometry);
    if (position) {
      ctn.css("left", position.x);
      ctn.css("top", position.y - ctn.get(0).offsetHeight);
    }
  }
  //生成标签
  function _createHtml() {
    let html = '<div class="LabelPlotBeautiful-content" id="border'+info.properties.id+'">'
    info.properties.infos.forEach(element => {
      html += '<div class="LabelPlotBeautiful-info-item">'+
      element.label + element.value+'</div>'
    });
    html += '</div>'
    return html;
  }
}

html中使用

//引用
<script src="./labelBeautifulHelper.js"></script>
//样式
<style>
        .LabelPlotBeautiful-container {
            position: absolute;
            z-index: 999;
            color: white;
            border-radius: 8px;
            padding: 10px;
            width: 200px;
            background: url('./img/bak1.png') center center no-repeat ;
            background-size:  100% 100%;
        }
        .LabelPlotBeautiful-content {
            left: 0;
            bottom: 0;
            cursor: default;
            padding: 3px;
            padding-top: 22px;
        }
        .LabelPlotBeautiful-info-item{
            margin-left: 13px;
            margin-top: 2px;
            letter-spacing: 2px;
            font-family: serif;
        }

        .LabelPlotBeautiful-title{
            font-weight: 600;
        }
</style>
//使用
<script>
…………cesium的一系列初始化 viewer等

    //lng经度 lat纬度 labelid标签id
    function createBeatifulLabel(lng,lat,labelid){
        var position = Cesium.Cartesian3.fromDegrees(lng,lat+0.00006,5);
        let labelPlot = labelPlotBeautiful({
            viewer: viewer,
            position: position,
            properties: {
                id: labelid,//用于控制显示隐藏等
                infos:[
                    {label:'名称：',value:'测试设备'},
                    {label:'状态：',value:'完好'},
                    {label:'经度：',value:'109.25560682'},
                    {label:'纬度：',value:'34.63496935'},
                    {label:'成功率：',value:'99%'},
                ]
            },
            showBillboardPoint: true
        })
        //隐藏
        //document.getElementById("contentBeautiful"+labelid).setAttribute("hidden", true);
        //显示
        //document.getElementById("contentBeautiful"+labelid).removeAttribute("hidden");
    }
</script>

背景图片