cesium 保存图片、缩略图、鹰眼

要保存cesium场景图片，很简单把cesium所在的canvas保存为一张图片并下载就行了。完全不用cesium的代码API（震惊Σ(☉▽☉"a）。

// 保存为图片并下载
            function savePic(){
                var canvas =viewer.scene.canvas;
                var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");

                var link = document.createElement("a");
                var strDataURI = image.substr(22, image.length);
                var blob = dataURLtoBlob(image);
                var objurl = URL.createObjectURL(blob);
                link.download = "pic.png";
                link.href = objurl;
                link.click();

                function  dataURLtoBlob(dataurl) {
                    var 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});
                }

            };

唯一要注意的是canvas.toDataURL不能直接保存image和png这是由于保护机制，所以一定要跟replace后面的流转换。

如果要获取当前场景的快照，类似于缩略图的话

                var canvas = viewer.scene.canvas;

                var genimg = Canvas2Image.convertToImage(canvas, 400, 400 * canvas.height / canvas.width, 'png');

                var image = document.getElementById('image');

                image.src = genimg.src;

通过cesium的canvas转换成image在创建一个canvas展现出来，并绘制到新的div上。

鹰眼更简单，再次创建一个球，保持视角一样就行了

 let viewer2  = new Cesium.Viewer('eye',{
        imageryProvider: GoogleMap,
        animation: false,
        baseLayerPicker: false,
        fullscreenButton: false,
        geocoder: false,
        homeButton: false,
        sceneModePicker: false,
        selectionIndicator: false,
        timeline: false,
        navigationHelpButton: false,
        infoBox: false,
        navigationInstructionsInitiallyVisible: false
    });

    let control = viewer2.scene.screenSpaceCameraController;
    control.enableRotate = false;
    control.enableTranslate = false;
    control.enableZoom = false;
    control.enableTilt = false;
    control.enableLook = false;
    let syncViewer = function(){
        viewer2.camera.flyTo({
            destination : viewer.camera.position,
            orientation : {
                heading : viewer.camera.heading,
                pitch : viewer.camera.pitch,
                roll : viewer.camera.roll
            },
            duration: 0.0
        });
    }
    viewer.entities.add({
        position: Cesium.Cartesian3.fromDegrees(0, 0),
        label: {
            text: new Cesium.CallbackProperty(function(){
                syncViewer();
                return "";
            }, true)
        }
    });