openlayers 保存当前地图View为图片

Posted 2021-01-21 googlegis

/**
 * 保存地图为图片工具栏
 */
function addMapToolSavePicture() {

    var saveElement = document.createElement(‘a‘);
    saveElement.className = "mapbtn glyphicon glyphicon-picture";
    saveElement.setAttribute("data-toggle", "tooltip");
    saveElement.setAttribute("data-placement", "left");
    saveElement.setAttribute("title", "SavePicture");
    saveElement.onclick = function() {

　　　　　// 此方法只能保存背景地图及图层数据，但是不能保存control，使用 html2canvas 可以保存地图控件信息，比如图例信息等。
        // olMap.once(‘postcompose‘,
        //     function(event) {
        //         var canvas = event.context.canvas;
        //         if (navigator.msSaveBlob) {
        //             navigator.msSaveBlob(canvas.msToBlob(), ‘map.png‘);
        //         } else {
        //             // canvas.toBlob(function(blob) {
        //             //     saveAs(blob, ‘map.png‘);
        //             // });
        //         }
        //     });
        // olMap.renderSync();


                        html2canvas(document.getElementById(mapId)).then(
                            function (canvas) {
                                canvas.toBlob(function (blob) {

                                    saveAs(blob,‘map.png‘);

                                });
                            });
    };

    document.getElementById(soToolBarId).appendChild(saveElement);
}