Cesium场景出图

代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="/static/Cesium/Cesium.js"></script>
    <link rel="stylesheet" href="/static/Cesium/Widgets/widgets.css">


    <style>
        html,
        body,
        #csiumContain {
     
            width: 100%;
            height: 100%;
            margin: 0px;
        }

        .cesium-widget-credits {
     
            display: none !important;
            /*去除Cesium默认版权信息*/
        }

        .tool-bar {
     
            position: absolute;
            top: 1vh;
            left: 2vw;
            z-index: 999999;
        }

        .cesium-viewer-infoBoxContainer {
     
            display: none !important;
        }
    </style>

</head>

<body>


    <div id="toolbar" class="param-container tool-bar layui-form-item">

        <button  onclick="saveToFile()">场景出图</button>
    </div>
    <div id="csiumContain"></div>


</body>


<script>

    Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(90, -20, 110, 90);
    var viewer = new Cesium.Viewer("csiumContain", {
     
        homeButton: false,//是否显示Home按钮
        animation: false,//是否显示动画控件
        timeline: false,//是否显示时间线控件
        fullscreenButton: false,
        baseLayerPicker: false,//是否显示图层选择控件
        sceneModePicker: true, //是否显示投影方式控件
        navigationHelpButton: false, //是否显示帮助信息控件
        geocoder: false, //是否显示地名查找控件
        sceneModePicker: false,//是否显示3D/2D选择器
        contextOptions: {
     
            webgl: {
     
                alpha: true,
                depth: true,
                stencil: true,
                antialias: true,
                premultipliedAlpha: true,
                //通过canvas.toDataURL()实现截图需要将该项设置为true
                preserveDrawingBuffer: true,
                failIfMajorPerformanceCaveat: true
            }
        }
      
    })

    function saveToFile() {
     
        let canvas = viewer.scene.canvas;
        let image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");

        let link = document.createElement("a");
        let blob = dataURLtoBlob(image);
        let objurl = URL.createObjectURL(blob);
        link.download = "scene.png";
        link.href = objurl;
        link.click();
    }

    function dataURLtoBlob(dataurl) {
     
        let arr = dataurl.split(','),
            mime = arr[0].match(/:(.*?);/)[1],
            bstr = atob(arr[1]),
            n = bstr.length,
            u8arr = new Uint8Array(n);
        while (n--) {
     
            u8arr[n] = bstr.charCodeAt(n);
        }
        return new Blob([u8arr], {
      type: mime });
    }
</script>

</html>

效果图

点击场景出图按钮,就会下载当前画面.

你可能感兴趣的:(#,Cesium场景)