波多野结衣 蜜桃视频,国产在线精品露脸ponn,a v麻豆成人,AV在线免费小电影

本文介紹了如何使用js將Open layer3地圖及其比例尺導出為PNG的處理方法，對大家解決問題具有一定的參考價值，需要的朋友們下面隨著小編來一起學習吧！

問題描述

我正在嘗試使用js中的畫布將Openlayer3地圖導出為PNG。實際上，地圖div和比例尺div是不同的，所以在將地圖導出為PNG時，如何在同一個PNG上繪制比例尺及其圖例。

推薦答案

我們需要創建控件并從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);
            });
        }

這篇關于如何使用js將Open layer3地圖及其比例尺導出為PNG的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，