Cesium 使用Canvas 为billboard构造图片

目录

一、需求来源

二、实现方法

三、效果

---

一、需求来源

1. 提升网页渲染性能，在使用cesium加载label实体的时候会自动将文字渲染成图片，这一过程中效率较慢，如果需要绘制大量label，利用canvas建议自己构造图片，然后利用billboard进行加载。

2. 目标需要使用特殊字体进行绘制，利用canvas构造文字。

 

二、实现方法

js代码：

// 创建二维画布
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
// 设置文字样式
ctx.font = 'bold 36px lion';
ctx.textAlign = 'center';
ctx.textBaseline = 'bottom';
ctx.fillStyle = '#FFF';
// 绘制文字，fillText(文字内容，x偏移，y偏移，文字最大长度[数字])
// 左上角为0，0
ctx.fillText("中国智造", 150, 100);
// 设置第二段文字的样式
ctx.font = 'bold 20px Arial';
ctx.fillText("123456", 220, 50);
// 将画布转化成图片
let image = new Image();
image.src = canvas.toDataURL("image/png")
// 使用cesium创建实体
let entity = viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(109.44, 32.11,30.0),
    point : {
        pixelSize : 10,
        color : Cesium.Color.YELLOW,
        outlineColor : Cesium.Color.RED,
        outlineWidth : 1
    },
    billboard: {
        image: image,
        width: 300,
        height: 140,
      },
});
viewer.flyTo(entity, {
    offset : {
        heading : Cesium.Math.toRadians(0.0),
        pitch : Cesium.Math.toRadians(-25),
        range : 10000
    }
});

css加载本地字体：

@font-face {
    font-family: lion;
    src: url(./lion.ttf);
}

在js之前引用css，否则js中无法识别字体

三、效果