Cesium 使用canvas作为billboard的图片

cesium的billboard 可以使用canvas作为图片，这就带来很大的灵活性

• 业务中经常使用billboard作为POI标签点，可以利用canvas绘制图表+文字标签，比用cesium billboard+lable的方式效果和性能上都要更好(因为cesium的label其实也是一张图片，数据量大的情况下加载billboard+label相当于要绘制两张图片)

加载代码示例：

// 加载图片,异步方法
function loadImage(url: string) {
  return new Promise<HTMLImageElement>((resolve) => {
    const img = new Image();
    img.onload = () => resolve(img);
    img.src = url;
  });
}
// 使用图片创建canvas
export async function buildCanvas() {
  const canvas = document.createElement("canvas");
  const ctx = canvas.getContext("2d");
  canvas.width = 328
  canvas.height = 400

  // 图片文件路径
  const imgSrc = "billboard/green-rectangle.png";

  const image = await loadImage(imgSrc);

  ctx?.drawImage(image, 0, 0);

  return canvas;
}

// cesium billboard 引入
buildCanvas().then(canvas => {
  viewer.entities.add({
    // position:...,
    billboard: {
      image: canvas,
    }
  })
})

tips

1. 如何修改引入的图片的大小？

结合上边的代码，很容易使用如下代码修改引入图片的大小

// 使用图片创建canvas
export async function buildCanvas() {
  const canvas = document.createElement("canvas");
  const ctx = canvas.getContext("2d");
  // ......
  const image = await loadImage(imgSrc);
  // 修改图片大小
  image.width = ''
  image.height = ''
	//...... 

}

但这样修改会发现没有效果，这里原因是因为我们的image对象是一个HTMLImageElement类型对象，但我们并没有把他插入到document中，这样直接修改width和height不起作用。

解决办法：使用canvas的上下文对象的drawImage()方法：

语法：

drawImage(image, dx, dy, dWidth, dHeight)

其中：

dWidth：image 在目标画布上绘制的宽度。允许对绘制的 image 进行缩放。

dHeight：image 在目标画布上绘制的高度。允许对绘制的 image 进行缩放。