Openlayers打印功能
我想为我的Openlayers地图创建一个打印按钮，它可以捕捉地图图像并创建一个漂亮的图像文件。我尝试过http://dev.openlayers.org/sandbox/camptocamp/canvas/openlayers/examples/exportMapCanvas.html，但它看起来像是试验性的。我也研究过http://trac.osgeo.org/openlayers/wiki/Printing，但我不希望涉及任何服务器。我还检查了http://html2canvas.hertzen.com/，但无法让它正常工作。我得到以下错误，未捕获图像:无法读取未定义的html2canvas.js的属性‘TypeError’
<button onclick="printFunction()">Click me</button>
function printFunction() {
html2canvas(('#map'), {
onrendered: function (canvas) {
var img = canvas.toDataURL("image/png")
window.open(img);
}
});
};回答 3
Stack Overflow用户
发布于 2013-09-03 16:30:05
试一试
function printFunction() {
html2canvas(document.getElementById("map"), {
onrendered: function (canvas) {
var img = canvas.toDataURL("image/png")
window.open(img);
}
});这对我很有效。标签标识只适用于jQuery，我花了一段时间才弄明白:-)
不过，有一个小问题。html2canvas没有渲染背景WMS层-只有地图窗口和标记，所以仍然需要进行一些调整。
更新：我对此做了一些修改，我不认为它能与openlayers一起工作。由于openlayers地图是许多div的组合，似乎html2canvas不能正确地绘制所有这些div。尤其是WMS图层，当尝试单独绘制该图层时，会返回错误。您可以尝试在地图中渲染其中一个子div，但这对我不起作用。虽然，如果你只使用简单的矢量图形，它可以为你工作。
Stack Overflow用户
发布于 2015-05-28 08:53:25
好的，我已经在这上面花了几个小时了，我想出的最好的方法是对@Kenny806的答案进行了增强，基本上就是this one。
它似乎确实能拾取WMS和矢量层：
function exportMap() {
var mapElem = document.getElementById('map'); // the id of your map div here
// html2canvas not able to render css transformations (the container holding the image tiles uses a transform)
// so we determine the values of the transform, and then apply them to TOP and LEFT
var transform=$(".gm-style>div:first>div").css("transform");
var comp=transform.split(","); //split up the transform matrix
var mapleft=parseFloat(comp[4]); //get left value
var maptop=parseFloat(comp[5]); //get top value
$(".gm-style>div:first>div").css({ //get the map container. not sure if stable
"transform":"none",
"left":mapleft,
"top":maptop,
});
html2canvas(mapElem, {
useCORS: true,
onrendered: function(canvas) {
mapImg = canvas.toDataURL('image/png');
// reset the map to original styling
$(".gm-style>div:first>div").css({
left:0,
top:0,
"transform":transform
});
// do something here with your mapImg
// e.g. I then use the dataURL in a pdf using jsPDF...
// createPDFObject();
}
});
}笔记
- 仅在Chrome和Firefox上测试
- 这是一个老套的解决方案(不幸的是，我正在努力寻找适合我的情况的其他选择)
- 如果你可以选择使用Openlayers 3，似乎有更好的canvas支持，我也看到了一个令人信服的toBlob示例:Openlayers
Stack Overflow用户
发布于 2014-03-17 22:56:08
WMS draw工作得很好，但您必须实现一个代理，以便使用AJAX下载WMS tiles。有关" proxy“(不是http代理)的实现细节，请参阅html2canvas的PHP代理示例。
https://stackoverflow.com/questions/18519251
复制相似问题
腾讯云开发者
