Cesium自定义渐变字体文本01

需求

加载label标签时,UI设计图是渐变色字体时,Cesium加载处理.

思路

1. 第一种方法: 加载html标签,写好样式后,监听目标位置并实时计算屏幕坐标更新定位,在地球背面时隐藏,并随视角远近控制大小,距离显隐.
2. 第二种方法: 直接绘制canvas,绘制好字体输出并加载到地球上
   这里记录第二种方法

实现

绘制canvas

创建容器

const canvas = document.createElement('canvas')

计算画布宽高

根据文本内容长度和字体大小计算宽高

const arr = text.split('')
const width = fontSize*arr.length
canvas.width = width
canvas.height = fontSize

设置字体样式

const ctx = canvas.getContext('2d')
ctx.textBaseline = "top"
ctx.font = `${fontSize}px ${fontFamily}`

渐变处理

const textMetrics = ctx.measureText(text)
//计算字体高度,用于渐变处理,此处示例是上下渐变如果是横向渐变则需要获取宽度
const text_height = textMetrics.actualBoundingBoxDescent
const gradient = ctx.createLinearGradient(0, 0, 0, text_height)
colorArr.forEach(item => {
  gradient.addColorStop(item[0], item[1])
})

填充并输出

ctx.fillStyle = gradient
ctx.fillText(text, 0, 0)
let image = new Image()
image.src = canvas.toDataURL("image/png")

绘制canvas完整代码

getLabel(text, fontSize = 20, fontFamily = 'YouSheBiaoTiHei-2', colorArr = [["0", "#EEEEEE"],["1", "#99C2F5"]]) {
    let canvas = document.createElement('canvas')
    const arr = text.split('')
    const width = fontSize*arr.length
    canvas.width = width
    canvas.height = fontSize
    let ctx = canvas.getContext('2d')
    ctx.textBaseline = "top"
    ctx.font = `${fontSize}px ${fontFamily}`
    let textMetrics = ctx.measureText(text)
    let text_height = textMetrics.actualBoundingBoxDescent
    let gradient = ctx.createLinearGradient(0, 0, 0, text_height)
    colorArr.forEach(item => {
      gradient.addColorStop(item[0], item[1])
    })
    ctx.fillStyle = gradient
    ctx.fillText(text, 0, 0)
    let image = new Image()
    image.src = canvas.toDataURL("image/png")
    return image
  }

创建实体

可以用entity或primitive,entity方式

const url = this.getLabel(name)
const entity = viewer.entities.add({
  position: satelliteEntity.position,
  name: name,
  billboard: {
      image: url,
      scale: 0.7,
      distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
          0,3e7
      ),
      pixelOffset: new Cesium.Cartesian2(20, -20)
  }
})

效果