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

2024-06-03 11:29| 来源: 网络整理| 查看: 265

文章目录 1.实现效果2.实现方法2.1背景2.2思路2.3实现 Cesium实战系列文章总目录：传送门

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; }

【本文地址】

公司简介

联系我们