// 通过Canvas绘制复杂或动态对象的图标点Graphic
class CanvasBillboard extends mars3d.graphic.BillboardEntity {
  /**
   * 文字
   * @type {string}
   */
  get text() {
    return this.style.text
  }

  set text(val) {
    this.style.text = val
    this._updateCanvas()
  }

  /**
   * 对象添加到图层前创建一些对象的钩子方法，
   * 只会调用一次
   * @return {void}  无
   * @private
   */
  _mountedHook() {
    super._mountedHook()

    if (this._pngImage) {
      this._updateCanvas()
    } else {
      this.style.imageUrl = "img/marker/textPnl.png" // 图片对象
      this.style.width = 300
      this.style.height = 140

      const img = new Image(this.style.width, this.style.height)
      img.crossOrigin = "Anonymous"
      img.src = this.style.imageUrl
      img.onload = () => {
        this._pngImage = img
        this._updateCanvas()
      }
    }
  }

  // 创建canvas
  _updateCanvas() {
    if (!this._pngImage) {
      return
    }

    const canvas = document.createElement("canvas")
    canvas.width = this.style.width
    canvas.height = this.style.height

    const ctx = canvas.getContext("2d")
    ctx.clearRect(0, 0, canvas.width, canvas.height)
    // 绘制图片
    ctx.drawImage(this._pngImage, 0, 0)

    // 绘制文字
    ctx.fillStyle = "rgb(255, 255, 255)"
    ctx.font = "55px 楷体"
    ctx.textBaseline = "middle"
    ctx.fillText("温度：", 20, canvas.height / 2)
    ctx.fillText(this.style.text, 160, canvas.height / 2)
    ctx.fillText("℃", 220, canvas.height / 2)

    // 将图片赋予给矢量对象进行显示，this.image是父类的属性
    this.image = canvas
  }
}
mars3d.graphic.CanvasBillboard = CanvasBillboard