Cesium创建实体弹窗文字和图片一起展示

思路：通过 canvas生成图片渲染到billboard上

实现效果

        showLabelFun(name, function (dataUrl) {
          let plane = {
            position: Cesium.Cartesian3.fromDegrees(
              items.position[0],
              items.position[1],
              12
            ),
            billboard: {
              image: dataUrl,
              heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
              // width:120, 如果使用了聚合数据一定要加 width和height 不然 初次加载会全部显示
              // height:40
            },
          }
          viewer.entities.add(plane);
        })
function showLabelFun(dataMcInfo,callback) {
    var c = document.createElement("canvas");
    var settings = {
      canvas: c,
      canvasWidth: 25, //canvas的宽度
      canvasHeight: 40, //canvas的高度
      drawStartX: 12, //绘制字符串起始x坐标 距离左侧
      drawStartY: 25, //绘制字符串起始y坐标 距离顶部
      font: "16px 'Microsoft Yahei'", //文字样式
      // text: "请修改掉默认的配置", //需要绘制的文本
      color: "#b0e7ff", //文字的颜色
      backgroundImage: "./bg.png" //背景图像的路径
    };

    //获取2d的上线文开始设置相关属性
    var canvas = settings.canvas;
    canvas.width = settings.canvasWidth;
    canvas.height = settings.canvasHeight;
    var ctx = canvas.getContext("2d");

    //加载背景图像
    var img = new Image();
    img.src = settings.backgroundImage;
    img.onload = function () {
      //绘制背景图像
      ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
      //填充文字
      ctx.font = settings.font;
      ctx.fillStyle = settings.color;
      ctx.fillText(dataMcInfo, settings.drawStartX, settings.drawStartY);
      callback(canvas.toDataURL());
    };
  }