目录
一、需求来源
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中无法识别字体