cesium自定义美化Label

https://blog.csdn.net/tutouxiaoyaonie/article/details/130341440?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522171057529916800197018429%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=171057529916800197018429&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~first_rank_ecpm_v1~rank_v31_ecpm-1-130341440-null-null.142^v99^pc_search_result_base9&utm_term=cesuim%20%20%E8%AE%BE%E7%BD%AE%20lable%20%E6%A0%B7%E5%BC%8F&spm=1018.2226.3001.4187




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>


背景图片
————————————————


                            版权声明：
                        
原文链接：https://blog.csdn.net/tutouxiaoyaonie/article/details/130341440