問題提出

三維場景中的圖標(biāo)+文字組合，通常使用Billboard+Label實現(xiàn)，在遇到模型遮擋問題時，可以選擇關(guān)閉深度檢測，即disableDepthTestDistance設(shè)為Number.POSITIVE_INFINITY。某項目設(shè)計了帶backgroundColor的Label，在關(guān)閉深度檢測后遇到如下問題

視角1，張三在小可愛后方

視角2，張三蓋住了小可愛，一個label的文字可以穿透另一個label的背景

趙六在李四前

李四穿透趙六

嘗試解決

沒有查到類似問題的資料，考慮丟棄Label，把文字用Canvas畫進(jìn)Billboard，基于參考代碼做了一些改動

/**
 * @description: 將圖片和文字合成新圖標(biāo)使用（參考Cesium源碼）
 * @param {*} image
 * @param {*} label：文字
 * @param {*} width：畫布寬
 * @param {*} height：畫布高
 * @return {*} 返回canvas
 */
function combineIconAndLabel(image, label, width = 64, height = 32) {
  // 創(chuàng)建畫布對象
  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屬性設(shè)置順序：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;
}

最終效果

王五在前

王五保持在前

待改進(jìn)

1. 人員相對固定的情況下canvas是不是可以緩存下來，省得更新重繪。

參考資料

cesium實現(xiàn)點聚合效果-圖片文字合成新圖標(biāo)