Cesium 中label时，想要设置text的背景图片时，label没有backgroundimage属性。
如果使用label+billboard 的方式设置，会存在文本长短不一时，图片不能自适应等问题。
const showLabelFun = (dataMcInfo, backgroundcolor) => {var c = document.createElement('canvas')var settings = {canvas: c,canvasWidth: getTextWidth(dataMcInfo, "12px 'Microsoft Yahei'") + 20, //canvas的宽度canvasHeight: 36, //canvas的高度drawStartX: 10, //绘制字符串起始x坐标 距离左侧drawStartY: 22, //绘制字符串起始y坐标 距离顶部font: "12px 'Microsoft Yahei'", //文字样式text: dataMcInfo, //需要绘制的文本color: '#ffffff', //"#000000", //文字的颜色backgroundColor: backgroundcolor, //"#ffffff"//背景颜色innerGlowColor: '#00ff96'}function getTextWidth(text, font) {var canvas = document.createElement('canvas')var context = canvas.getContext('2d')context.font = fontvar metrics = context.measureText(text)return metrics.width}//绘制带有圆角的背景CanvasRenderingContext2D.prototype.roundRect = function (x, y, width, height, radius, fill, stroke) {if (typeof stroke == 'undefined') {stroke = false}if (typeof radius === 'undefined') {radius = 5}this.beginPath()this.moveTo(x + radius, y)this.lineTo(x + width - radius, y)this.quadraticCurveTo(x + width, y, x + width, y + radius)this.lineTo(x + width, y + height - radius)this.quadraticCurveTo(x + width, y + height, x + width - radius, y + height)this.lineTo(x + radius, y + height)this.quadraticCurveTo(x, y + height, x, y + height - radius)this.lineTo(x, y + radius)this.quadraticCurveTo(x, y, x + radius, y)this.fillStyle = settings.backgroundColorthis.closePath()if (stroke) {this.stroke()}if (fill) {this.fill()}}//获取2d的上线文开始设置相关属性var canvas = settings.canvascanvas.width = settings.canvasWidthcanvas.height = settings.canvasHeightvar ctx = canvas.getContext('2d')//绘制带有圆角的背景ctx.roundRect(0, 0, canvas.width, canvas.height, 15, true)//填充文字ctx.font = settings.fontctx.fillStyle = settings.colorctx.fillText(settings.text, settings.drawStartX, settings.drawStartY)//ctx.fillText('速度:30 km/h', settings.drawStartX, settings.drawStartY + 20)return canvas.toDataURL()//下载图片测试查看//var src = canvas.toDataURL();// var a = document.createElement('a');// var event = new MouseEvent('click');// a.download = (new Date()).getTime() + ".jpg"; // 指定下载图片的名称// a.href = src;// a.dispatchEvent(event); // 触发超链接的点击事件
}使用
viewer.entities.add({position: Cesium.Cartesian3.fromDegrees(lng, lat, alt), //坐标billboard: {image: showLabelFun(projectName, color),pixelOffset: new Cesium.Cartesian2(0, -50),disableDepthTestDistance: Number.POSITIVE_INFINITY //被建筑物遮挡问题}})
