问题提出
三维场景中的图标+文字组合，通常使用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;
}
最终效果
王五在前
王五保持在前
待改进
- 人员相对固定的情况下canvas是不是可以缓存下来，省得更新重绘。
