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

参考博客

开发之家 - Cesium合并多个图片生成广告牌Billboard

Cesium 合并多张图像方法_tianyapai的博客-CSDN博客