需求
加载label标签时,UI设计图是渐变色字体时,Cesium加载处理.
思路
- 第一种方法: 加载html标签,写好样式后,监听目标位置并实时计算屏幕坐标更新定位,在地球背面时隐藏,并随视角远近控制大小,距离显隐.
- 第二种方法: 直接绘制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)
}
})