Cesium渲染深度图并保存到本地

 //设置主视角

        //SetHoumeViewerjd(75, 0, 140, 60);

        var viewer = new Cesium.Viewer("cesiumContainer", {

            vrButton: true,

            selectionIndicator: false,

            infoBox: true,

            //需要进行可视化的数据源的集合

            animation: false, //是否显示动画控件

            shouldAnimate: true,

            homeButton: true, //是否显示Home按钮

            fullscreenButton: true, //是否显示全屏按钮

            baseLayerPicker: true, //是否显示图层选择控件

            geocoder: true, //是否显示地名查找控件

            timeline: false, //是否显示时间线控件

            sceneModePicker: false, //是否显示投影方式控件

            navigationHelpButton: true, //是否显示帮助信息控件

            requestRenderMode: true, //启用请求渲染模式

            scene3DOnly: true, //每个几何实例将只能以3D渲染以节省GPU内存

            sceneMode: 3, //初始场景模式 1 2D模式 2 2D循环模式 3 3D模式  Cesium.SceneMode

            //加载天地图影像地图，WebMapTileServiceImageryProvider该接口是加载WMTS服务的接口

            //tileset添加地形，本地地址

            imageryProvider: new Cesium.TileMapServiceImageryProvider({

                // url: 'http://t0.tianditu.gov.cn/img_w/wmts?tk=cda0933a3f64de1ae589eedeb0cb9010',

                url: 'http://192.168.12.230' + '/GisMap/GlobalMap/GlobeBase/',

                fileExtension: 'png',

                //  url: 'http://192.168.2.27:8080' + '/TMS/',

                //  fileExtension: 'jpg',

                layer: 'img',

                style: 'default',

                tileMatrixSetID: 'w',

                format: 'tiles',

                maximumLevel: 20

            }),

            // contextOptions: {

            //     webgl: {

            //         alpha: true,

            //         depth: true,

            //         stencil: true,

            //         antialias: true,

            //         premultipliedAlpha: true,

            //         //通过canvas.toDataURL()实现截图需要将该项设置为true

            //         preserveDrawingBuffer: true,

            //         // failIfMajorPerformanceCaveat: true

            //     }

            // },

        });

        //去掉版权信息

        viewer._cesiumWidget._creditContainer.style.display = "none";

        //光照

        viewer.scene.globe.enableLighting = false;

        //地形深度

        viewer.scene.globe.depthTestAgainstTerrain = true;

        //地球

        var ellipsoid = viewer.scene.globe.ellipsoid;

        //测量

        var measure = new Cesium.Measure(viewer);

        //随机数

        Cesium.Math.setRandomNumberSeed(0);

        // 获取场景对象

        var scene = viewer.scene;

        // 设置渲染帧率为24帧/秒

        const frameRate = 25; // 每秒24帧

        const interval = 1000 / frameRate; // 计算每帧的间隔时间

        var index = 0;

        var isDepth = false; //是否渲染深度图

 

        // 创建一个用于渲染深度图的后期处理阶段

        var depthStage = new Cesium.PostProcessStage({

            fragmentShader: `

                    uniform sampler2D colorTexture;

                    varying vec2 v_textureCoordinates;

                    void main() {

                        float depth = czm_readDepth(colorTexture, v_textureCoordinates);

                        gl_FragColor = vec4(vec3(depth), 1.0);

                    }

                     `

        });

        // 创建一个深度图的帧缓冲区

        var depthFramebuffer = new Cesium.Framebuffer({

            context: scene.context,

            width: scene.canvas.clientWidth,

            height: scene.canvas.clientHeight,

            depth: true

        });

        // 将后期处理阶段添加到场景的后期处理阶段集合中

        viewer.scene.postProcessStages.add(depthStage);

        // 将场景渲染到深度图的帧缓冲区

        viewer.scene.render(depthFramebuffer);

        depthStage.enabled = false;

        //设置相机主视角

        function SetHoumeViewerjd(west, south, east, north) {

            //参数为经纬度

            Cesium.Camera.DEFAULT_VIEW_RECTANGLE = new Cesium.Rectangle.fromDegrees(west, south, east, north);

            if (Cesium.defined(viewer)) {

                var hw1 = viewer.camera.computeViewRectangle();

                console.log("设置后相机视角", hw1);

            }

        }

 

        MainInit();

        function MainInit() {

            //创建图层 图层显示隐藏

            var cip = new ImageryProviderManager({

                viewer: viewer

            });

            //相机脚本

            var sca = new SetCameraAnimation({

                viewer: viewer

            });

            // var twgc = cip.AddCesiumTerrainProvider('http://192.168.2.27:8080' + '/云南高程/');

            var twgc = cip.AddCesiumTerrainProvider('http://192.168.12.230' + '/GisMap/台湾高程/');

            var tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({

                //url: '../Apps/SampleData/OSGB&3Dtiles/dayanta/tileset.json'

                //url: 'http://192.168.12.210:801/Production_3/metadata.xml'

                // url:'http://192.168.12.210:801/3D_model_obj/metadata.xml'

                //url:'http://192.168.12.210:801/QingXieSheYing/2021山西运城数据/Data/'

                //url:'D:/QingXieSheYing/2021山西运城数据/metadata.xml'

                //url:'../Apps/SampleData/白模3Dtiles/tileset.json'

                //url: 'http://192.168.12.210:801/OsgbComplete/tileset.json'

                url: 'http://192.168.12.210:801/翡翠湾_3Dtile/Scene/Production_6.json',

                maximumScreenSpaceError: 1

            }));

            console.log("加载倾斜摄影模型");

            tileset.readyPromise.then(function () {

                viewer.homeButton.viewModel.command.beforeExecute.addEventListener(function (commandInfo) {

                    // Fly to tileset

                    viewer.flyTo(tileset);

                    // Tell the home button not to do anything

                    commandInfo.cancel = true;

                });

                //viewer.flyTo(tileset)

                viewer.zoomTo(tileset);

            })

                .otherwise(function (error) {

                    console.log('加载OSGB模型失败', error);

                });

            //    // 加载OSGB模型

            //     var tileset = new Cesium.Cesium3DTileset();

            //     tileset.loadXML('http://192.168.12.210:801/Production_3/metadata.xml') // 替换为您的OSGB模型的XML配置文件路径

            //     .then(function() {

            //         // 将模型添加到场景中

            //         viewer.scene.primitives.add(tileset);

            //         // 设置相机视角以查看模型

            //         viewer.zoomTo(tileset);

            //     })

            //     .otherwise(function(error) {

            //         console.log('加载OSGB模型失败', error);

            //     });

            // var model = createModel('../Apps/SampleData/白模3Dtiles/NoLod_0.glb');

        }

        //加载glb模型

        function createModel(url) {

            var origin = Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706, 0.0);

            var modelMatrix = Cesium.Transforms.headingPitchRollToFixedFrame(origin, new Cesium.HeadingPitchRoll(0.0,

                0.0, 0.0));

            var model = viewer.scene.primitives.add(Cesium.Model.fromGltf({

                url: url,

                modelMatrix: modelMatrix,

                scale: 1,

                //minimumPixelSize: 128,

                incrementallyLoadTextures: true

            }));

            model.readyPromise.then(function (model) {

                var camera = viewer.camera;

                // Zoom to model

                var controller = scene.screenSpaceCameraController;

                var r = 2.0 * Math.max(model.boundingSphere.radius, camera.frustum.near);

                controller.minimumZoomDistance = r * 0.5;

                var center = Cesium.Matrix4.multiplyByPoint(model.modelMatrix, model.boundingSphere.center,

                    new Cesium.Cartesian3());

                var heading = Cesium.Math.toRadians(230.0);

                var pitch = Cesium.Math.toRadians(-20.0);

                camera.lookAt(center, new Cesium.HeadingPitchRange(heading, pitch, r * 2.0));

            }).otherwise(function (error) {

                window.alert(error);

            });

            return model;

        }

        function DepthCamera() {

            console.log("开始截图:", interval);

            depthStage.enabled = true;

            index = 0;

            // 设置定时器，每隔一定时间进行渲染和保存

            var timeId = setInterval(renderAndSaveFrameDepth, interval);

            setTimeout(() => {

                clearInterval(timeId)

            }, 10000)

 

            //screenSuccess("depthImage")//杨思杰保存图片

            console.log("截图完成");

        }

        function RGBCamera() {

            console.log("开始截图", interval);

            depthStage.enabled = false;

            index = 0;

            // 设置定时器，每隔一定时间进行渲染和保存

            var timeId = setInterval(renderAndSaveFrameRGB, interval);

            setTimeout(() => {

                clearInterval(timeId)

            }, 10000)

            // screenSuccess("rgbImage")//杨思杰保存图片

            console.log("截图完成");

        }

        Sandcastle.finishedLoading();

 

        //保存图片

        function screenSuccess(name) {

            // $(".save-screen").hide()

            setTimeout(function () {

                var canvas = this.viewer.scene.canvas;

                var imageWidth = 1920;

                var img = Canvas2Image.convertToImage(canvas, imageWidth, imageWidth * canvas.height / canvas

                    .width, 'png');

                console.log("img", img);

                saveImg(img.src, name)

            }, 2000)

        }

        // base64 保存图片

        function saveImg(data, name1) {

            // let token = getCookie('x-access-token');

            var name = name1;

            var base64 = data.toString(); // imgSrc 就是base64哈

            var byteCharacters = atob(

                base64.replace(/^data:image\/(png|jpeg|jpg);base64,/, "")

            );

            var byteNumbers = new Array(byteCharacters.length);

            for (var i = 0; i < byteCharacters.length; i++) {

                byteNumbers[i] = byteCharacters.charCodeAt(i);

            }

            var byteArray = new Uint8Array(byteNumbers);

            var blobDownload = new Blob([byteArray], {

                type: undefined,

            });

 

            //自动下载截图

            var aLink = document.createElement("a");

            aLink.download = name + ".jpg"; //这里写保存时的图片名称

            aLink.href = URL.createObjectURL(blobDownload)

            console.log(aLink.href, "aLink.href")

            aLink.click();

            // // 将Canvas保存为图片文件

            // canvas.toBlob(function (blob) {

            //     var a = document.createElement('a');

            //     var url = URL.createObjectURL(blob);

            //     a.href = url;

            //     a.download = 'depth_image.png'; // 图片文件的名称和格式

            //     a.click();

            //     URL.revokeObjectURL(url);

            // }, 'image/png'); // 指定保存的图片格式为PNG

        }

 

        // 定义渲染和保存函数

        function renderAndSaveFrameDepth() {

            console.log("编号:", index++);

            // 渲染当前帧

            viewer.render();

            // 从画布中获取渲染结果

            const canvas = viewer.scene.canvas;

            const imageDataUrl = canvas.toDataURL('image/png');

            // 保存渲染结果为图像文件

            const link = document.createElement('a');

            link.href = imageDataUrl;

            link.download = 'depth.png';

            link.click();

        }

        // 定义渲染和保存函数

        function renderAndSaveFrameRGB() {

            console.log("编号:", index++);

            // 渲染当前帧

            viewer.render();

            // 从画布中获取渲染结果

            const canvas = viewer.scene.canvas;

            const imageDataUrl = canvas.toDataURL('image/png');

            // 保存渲染结果为图像文件

            const link = document.createElement('a');

            link.href = imageDataUrl;

            link.download = 'rgb.png';

            link.click();

        }

    </script>