如何導出openlayer3地圖與其使用js的比例尺PNG

Question

我想導出使用js中畫布的openlayer3地圖到png。 Actualy地圖div和比例尺div不同，因此將出口地圖導出爲png時，如何在同一PNG上繪製比例尺和其圖例。

Answer 1

我們需要創建控制和HTML得到控制，那麼add it to canvas這樣

InsertToCanvas = (function() { 
//get the canvas element 
var canvas = $('canvas').get(0); 
//get the Scaleline div container the style-width property 
var olscale = $('.ol-scale-line-inner'); 
//Scaleline thicknes 
var line1 = 6; 
//Offset from the left 
var x_offset = 10; 
//offset from the bottom 
var y_offset = 30; 
var fontsize1 = 15; 
var font1 = fontsize1 + 'px Arial'; 
// how big should the scale be (original css-width multiplied) 
var multiplier = 2; 

/* go for it */ 
function WriteScaletoCanvas(e) { 
var ctx = e.context; 
var scalewidth = parseInt(olscale.css('width'),10)*multiplier; 
var scale = olscale.text(); 
var scalenumber = parseInt(scale,10)*multiplier; 
var scaleunit = scale.match(/[Aa-zZ]{1,}/g); 

//Scale Text 
ctx.beginPath(); 
ctx.textAlign = "left"; 
ctx.strokeStyle = "#ffffff"; 
ctx.fillStyle = "#000000"; 
ctx.lineWidth = 5; 
ctx.font = font1; 
ctx.strokeText([scalenumber + ' ' + scaleunit], x_offset + fontsize1/2, canvas.height - y_offset - fontsize1/2); 
ctx.fillText([scalenumber + ' ' + scaleunit], x_offset + fontsize1/2,  canvas.height - y_offset - fontsize1/2); 

//Scale Dimensions 
var xzero = scalewidth + x_offset; 
var yzero = canvas.height - y_offset; 
var xfirst = x_offset + scalewidth * 1/4; 
var xsecond = xfirst + scalewidth * 1/4; 
var xthird = xsecond + scalewidth * 1/4; 
var xfourth = xthird + scalewidth * 1/4; 

// Stroke 
ctx.beginPath(); 
ctx.lineWidth = line1 + 2; 
ctx.strokeStyle = "#000000"; 
ctx.fillStyle = "#ffffff"; 
ctx.moveTo(x_offset, yzero); 
ctx.lineTo(xzero + 1, yzero); 
ctx.stroke(); 

//sections black/white 
ctx.beginPath(); 
ctx.lineWidth = line1; 
ctx.strokeStyle = "#000000"; 
ctx.moveTo(x_offset, yzero); 
ctx.lineTo(xfirst, yzero); 
ctx.stroke(); 

ctx.beginPath(); 
ctx.lineWidth = line1; 
ctx.strokeStyle = "#FFFFFF"; 
ctx.moveTo(xfirst, yzero); 
ctx.lineTo(xsecond, yzero); 
ctx.stroke(); 

ctx.beginPath(); 
ctx.lineWidth = line1; 
ctx.strokeStyle = "#000000"; 
ctx.moveTo(xsecond, yzero); 
ctx.lineTo(xthird, yzero); 
ctx.stroke(); 

ctx.beginPath(); 
ctx.lineWidth = line1; 
ctx.strokeStyle = "#FFFFFF"; 
ctx.moveTo(xthird, yzero); 
ctx.lineTo(xfourth, yzero); 
ctx.stroke(); 
} 
function postcompose() { 
map.on('postcompose', function (evt) { 
    WriteScaletoCanvas(evt); 
}); 
} 

return { 
postcompose : postcompose 
}; 
})(); 

InsertToCanvas.postcompose(); 

//Now export map as png 

    var exportMap = function() { 


      canvas = document.getElementsByTagName('canvas')[0]; 
      canvas.toBlob(function (blob) { 
       alert("jsp page export map function"); 
      saveAs(blob, 'map.png'); 
      }) 
     } 

這樣比例尺將被添加到PNG。

步驟2傳奇

function WriteLegendtoCanvas(e) { 
    var ctx = e.context; 


    var x=50,y=50; 
    var arr = $('div#legendId img'); 

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

     var img = new Image(); 
    img.src = $(arr[i]).attr('src'); 
    img.onload = function() { ctx.drawImage(img, x, y); } 
    ctx.drawImage(img, x, y); 
    ctx.beginPath(); 
    ctx.lineWidth = line1; 
    ctx.strokeStyle = "#FFFFFF"; 
    ctx.moveTo(x, y); 
    y+=20; 
    ctx.lineTo(x, y); 
    ctx.stroke(); 

    } 

     } 

並調用與postcompose此功能

function postcompose() { 
      map.on('postcompose', function (evt) { 
       WriteScaletoCanvas(evt); 
       WriteLegendtoCanvas(evt); 
      }); 
     }