Cesium合并多个图片生成广告牌Billboard
应用场景
拼接图片展示不同长度字段广告牌
实现思路
Billboard支持canvas,所以使用canvas将两张图片+文字绘制再画布上,用于广告牌展示。
示例
关键代码
const combineIconAndLabel = () => { let text = "XXXXXXXX"; let width = text.length * 14 * 1.15; let objs = { size: { width: width, height: 100 }, label: { text: text }, }; let imageBottomStyle = { height: objs.size.height / 2, width: 50, }; const canvas = document.createElement("canvas"); canvas.height = objs.size.height; canvas.width = objs.size.width; const ctx = canvas.getContext("2d"); const imageUrls = [bgPopup_top, bgPopup_bottom]; const urlResources = []; imageUrls.forEach((url) => { const urlResource = new Cesium.Resource({ url: url, }); urlResources.push(urlResource.fetchImage()); }); let promise = Promise.all(urlResources).then(function (images) { images.forEach((image, index) => { if (index == 0) { ctx.drawImage(image, 0, 0, objs.size.width, objs.size.height / 2); ctx.fillStyle = "#fff"; ctx.font = "bold 14px Microsoft YaHei"; ctx.textAlign = "center"; ctx.textBaseline = "middle"; ctx.fillText( objs.label.text, objs.size.width / 2, objs.size.height / 4 ); } else { ctx.drawImage( image, objs.size.width / 2 - imageBottomStyle.width / 2, imageBottomStyle.height - 10, imageBottomStyle.width, imageBottomStyle.height + 20 ); } }); return canvas; }); return promise; };
版权声明:
作者:广州前端开发
链接:https://www.develophm.com/index.php/cesium%e5%90%88%e5%b9%b6%e5%a4%9a%e4%b8%aa%e5%9b%be%e7%89%87%e7%94%9f%e6%88%90%e5%b9%bf%e5%91%8a%e7%89%8cbillboard/1843/
来源:开发之家
文章版权归作者所有,未经允许请勿转载。
THE END
二维码
文章目录
关闭
共有 0 条评论