openlayers 保存当前地图View为图片

时间:2022-10-29 21:19:37
/**
* 保存地图为图片工具栏
*/
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);
}