-2
jsのキャンバスを使用してopenlayer3のマップをpngにエクスポートしようとしています。実際のマップdivとスケールバーdivは異なるので、pngへのエクスポートマップは、同じpng上でスケールバーとその凡例を描画する方法です。jsを使用してスケールバーでpngにopenlayer3マップをエクスポートする方法
jsのキャンバスを使用してopenlayer3のマップをpngにエクスポートしようとしています。実際のマップdivとスケールバーdivは異なるので、pngへのエクスポートマップは、同じpng上でスケールバーとその凡例を描画する方法です。jsを使用してスケールバーでpngにopenlayer3マップをエクスポートする方法
私たちは、この方法でのスケールバーは、PNGに追加されます、その後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');
})
}
、コントロールを作成し、HTMLからのコントロールを取得する必要があります。伝説
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でこの関数を呼び出すために
ステップ2
function postcompose() {
map.on('postcompose', function (evt) {
WriteScaletoCanvas(evt);
WriteLegendtoCanvas(evt);
});
}