Cesium场景出图

saveToFile() {
        viewer.render();//重新渲染界面
        let canvas = viewer.scene.canvas;
        let image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream")
        let link = document.createElement("a");
        let blob = this.dataURLtoBlob(image);
        let objurl = URL.createObjectURL(blob);
        link.download = "scene.png";
        link.href = objurl;
        link.click();
    }
dataURLtoBlob(dataurl) {
        let arr = dataurl.split(','),
            mime = arr[0].match(/:(.*?);/)[1],
            bstr = window.atob(arr[1]),
            n = bstr.length,
            u8arr = new Uint8Array(n);
        while (n--) {
            u8arr[n] = bstr.charCodeAt(n);
        }
        return new Blob([u8arr], { type: mime });
    }

注:在场景出图的实现过程中遇到两个问题:

1、导出图片一片黑

处理办法:viewer.render();//重新渲染界面

2、提示atob()已被弃用

处理办法:window.atob()

Cesium是一个强大的开源JavaScript库,用于创建交互式三维地球视,它特别适用于WebGIS应用。离屏渲染(Offscreen Rendering)是Cesium的一个关键特性,它可以显著提高性能,尤其是在处理大规模场景时。 离屏渲染的工作原理是将场景的部分或全部绘制到后台的离屏幕缓冲区,而不是实时更新浏览器窗口。当用户视角改变时,只对缓冲区进行局部更新并将其内容传输回视口显示,这样可以减少DOM操作和GPU资源消耗。以下是如何在Cesium中实现离屏渲染的步骤: 1. **设置场景**:首先,你需要初始化一个`Cesium.Viewer`实例,并配置好需要渲染的场景、相机和其它元素。 2. **启用离屏渲染**:通过`Viewer`的`renderForCanvas`选项或`RendererOptions`对象启用`renderForCanvas`属性,例如: ```javascript const viewer = new Cesium.Viewer('cesiumContainer', { canvas : { enableRenderForCanvas : true }, }); ``` 3. **监听视口变化**:Cesium会自动处理离屏渲染的切换,但你可以选择手动处理某些情况,如用户滚动或缩放。 4. **控制输**:如果你想要直接从离屏渲染得到像,可以使用`requestAnimationFrame`回调来获取渲染后的canvas。 ```javascript viewer.requestRenderForCanvas(function(canvas) { // 这里你可以访问canvas元素并保存为片 const imageElement = document.createElement('img'); imageElement.src = canvas.toDataURL(); }); ```
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值