Cesium笔记 canvas定制billboard

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 = font
    var 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.backgroundColor

    this.closePath()
    if (stroke) {
      this.stroke()
    }
    if (fill) {
      this.fill()
    }
  }

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

  //绘制带有圆角的背景
  ctx.roundRect(0, 0, canvas.width, canvas.height, 15, true)

  //填充文字
  ctx.font = settings.font
  ctx.fillStyle = settings.color
  ctx.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 //被建筑物遮挡问题
    }
  })