标签：size canvas 合成 ctx Cesium cesium font 图标
文章目录
1.实现效果
2.实现方法
2.1背景
在Cesium项目开发过程中，需要使用点聚合功能，因此在聚合时需要动态更新聚合图标上被聚合的点位的数量。
2.2思路
查看了一下Cesium的官方文档，发现Cesium的PinBuilder提供了类似的功能，但其只能自定义图片或者文字的一种，不能同时自定义，而且其图标的外形是固定的，不能满足自定义图标的需求。
因此，思路是在聚合图标上动态添加聚合数量来生成新图标，参考了Cesium源码中的PinBuilder自定义图片或文字的方式和向Cesium提供的向图片中写文字的函数writeTextToCanvas。
具体的实现方法是先异步加载原始图标，使用H5的Canvas对象，先画出图片，再追加文字，最后将Canvas保存，即可生成图片与文字合成后的新图标。
2.3实现
参考Cesium源码实现图片与文字合成新图标的具体实现代码如下：
/**
* @description: 将图片和文字合成新图标使用（参考Cesium源码）
* @param {*} url：图片地址
* @param {*} label：文字
* @param {*} size：画布大小
* @return {*} 返回canvas
*/
function combineIconAndLabel(url, label, size) {
// 创建画布对象
let canvas = document.createElement('canvas');
canvas.width = size;
canvas.height = size;
let ctx = canvas.getContext("2d");
let promise = new Cesium.Resource.fetchImage(url).then(image => {
// 异常判断
try {
ctx.drawImage(image, 0, 0);
} catch (e) {
console.log(e);
}
// 渲染字体
// font属性设置顺序：font-style, font-variant, font-weight, font-size, line-height, font-family
ctx.fillStyle = Cesium.Color.WHITE.toCssColorString();
ctx.font = 'bold 20px Microsoft YaHei';
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillText(label, size / 2, size / 2);
return canvas;
});
return promise;
}
标签：size,canvas,合成,ctx,Cesium,cesium,font,图标 来源： https://blog.csdn.net/weixin_45782925/article/details/123092062
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。