Cesium实现场景截图_cesium 截图-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_39150852/article/details/123137257

本文介绍了如何使用Cesium库捕获地图视图为Blob对象，并将其转换为图片文件，包括了`captureScreenshot`和`saveAs`两个关键函数的操作。通过这两个函数，开发者可以方便地获取和保存地图场景的截图。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

/**
 * @description： 将地图canvas及上面的entity转换为bolb对象
 * @param： viewer地图对象
*/
export function captureScreenshot(viewer) {
  const { when } = Cesium;
  const deferred = when.defer();
  const scene = viewer.scene;
  var removeCallback = scene.postRender.addEventListener(function() {
    removeCallback();
    try {
      const cesiumCanvas = viewer.scene.canvas;

      // If we're using the splitter, draw the split position as a vertical white line.
      let canvas = cesiumCanvas;
      canvas.toBlob(function(blod) {
        deferred.resolve(blod);
      }, "image/png");
      // deferred.resolve(canvas.toDataURL("image/png"));
    } catch (e) {
      deferred.reject(e);
    }
  }, this);

  scene.render(viewer.clock.currentTime);

  return deferred.promise;
}

/**
 * @description： 将bolb对象导出为图片
 * @param： blob对象
 * @param： filename文件名
*/
export function saveAs(blob, filename) {
  if (blob === null) {
    return;
  }
  if (window.navigator.msSaveOrOpenBlob) {
    navigator.msSaveBlob(blob, filename);
  } else {
    const target = document.createElement("a");
    const body = document.querySelector("body");
    target.href = window.URL.createObjectURL(blob);
    target.download = filename;
    target.style.display = "none";
    body.appendChild(target);
    target.click();
    body.removeChild(target);
    window.URL.revokeObjectURL(target.href);
  }
}

调用以上方法实现场景出图

	  const $promise = captureScreenshot(viewer);
      if ($promise) {
        $promise.then((blob) => {
          // 获取地图数据
          blob && saveAs(blob, `${Date.now()}.png`);
        });
      }