cesium实现图片与文字合成新图标

文章目录

1.实现效果

cesium实现图片与文字合成新图标

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;
}
上一篇:C++ sizeof 运算符


下一篇:力扣第一题 1. 两数之和