问题提出

三维场景中的图标+文字组合，通常使用Billboard+Label实现，在遇到模型遮挡问题时，可以选择关闭深度检测，即disableDepthTestDistance设为Number.POSITIVE_INFINITY。某项目设计了带backgroundColor的Label，在关闭深度检测后遇到如下问题

视角1，张三在小可爱后方

视角2，张三盖住了小可爱，一个label的文字可以穿透另一个label的背景

赵六在李四前

李四穿透赵六

尝试解决

没有查到类似问题的资料，考虑丢弃Label，把文字用Canvas画进Billboard，基于参考代码做了一些改动

/**
 * @description: 将图片和文字合成新图标使用（参考Cesium源码）
 * @param {*} image
 * @param {*} label：文字
 * @param {*} width：画布宽
 * @param {*} height：画布高
 * @return {*} 返回canvas
 */
function combineIconAndLabel(image, label, width = 64, height = 32) {
  // 创建画布对象
  let canvas = document.createElement("canvas");
  canvas.width = width;
  canvas.height = height;

  let ctx = canvas.getContext("2d");

  // 左边放图片+异常判断
  try {
    ctx.drawImage(image, 0, 0, height, height);
  } catch (e) {
    console.log(e);
  }
  // 右边上个背景色
  ctx.beginPath();
  ctx.rect(height, 0, width - height, height);
  ctx.fillStyle = "black";
  ctx.fill();
  // 右边渲染字体
  // font属性设置顺序：font-style, font-variant, font-weight, font-size, line-height, font-family
  ctx.fillStyle = QEarth.Cesium.Color.WHITE.toCssColorString();
  ctx.font = "bold 10px Microsoft YaHei";
  ctx.textAlign = "center";
  ctx.textBaseline = "middle";
  ctx.fillText(label, height / 2 + width / 2, height / 2);

  return canvas;
}