如何获取含BIM360 Pushpin与MarkupsCore标记的Viewer截图？

是的，getScreenshot方法的overlayRenderer参数正是解决标记位置偏移问题的关键。它能让Viewer直接将PushPin和MarkupsCore的叠加层渲染到截图画布中，避免手动DOM/Canvas绘制带来的坐标不匹配问题。

核心原理 #

PushPin和MarkupsCore的标记都属于Viewer的overlay渲染层，它们的绘制逻辑和主模型画布深度集成。html2canvas等DOM截图工具无法准确映射Viewer视图变换（缩放、旋转、平移）后的标记坐标，而overlayRenderer参数允许Viewer主动将这些层合并到最终截图中，确保位置完全匹配。

配置步骤 #

1. 获取扩展实例：先确保Autodesk.Viewing.MarkupsCore和Autodesk.BIM360.Extension.PushPin扩展已加载。
2. 提取Overlay Renderer：从两个扩展中分别获取对应的渲染器实例。
3. 调用getScreenshot：将两个渲染器放入overlayRenderers数组参数中执行截图。

完整代码示例 #

async function captureScreenshotWithOverlays() {
    // 获取已加载的扩展
    const markupsExtension = viewer.getExtension('Autodesk.Viewing.MarkupsCore');
    const pushPinExtension = viewer.getExtension('Autodesk.BIM360.Extension.PushPin');

    if (!markupsExtension || !pushPinExtension) {
        console.error('请确保MarkupsCore和PushPin扩展已加载');
        return;
    }

    // 获取各自的Overlay Renderer
    const markupsRenderer = markupsExtension.getMarkupsRenderer();
    const pushPinRenderer = pushPinExtension.renderer;

    // 执行截图，指定要包含的Overlay渲染器
    const screenshotUrl = await viewer.getScreenshot(
        viewer.container.clientWidth,
        viewer.container.clientHeight,
        {
            overlayRenderers: [markupsRenderer, pushPinRenderer]
        }
    );

    // 下载截图
    const downloadLink = document.createElement('a');
    downloadLink.href = screenshotUrl;
    downloadLink.download = 'viewer-screenshot-markups.png';
    downloadLink.click();
}

注意事项 #

• 确保在Viewer的EXTENSION_LOADED事件触发后调用上述函数，或提前检查扩展是否存在。
• 部分Viewer版本中，PushPin扩展的渲染器可能通过getRenderer()方法获取，若直接访问renderer属性失败，可尝试替换为pushPinExtension.getRenderer()。
• getScreenshot是异步方法，需使用async/await或Promise.then()处理返回结果。

内容的提问来源于stack exchange，提问作者Gustavo da Costa e Silva