Question

我正在使用带有openstreetmaps的传单在Ext js面板上生成一个地图由于地图在openstreet地图中作为切片出现，我需要将这些切片组合起来创建单个图像，以便保存为图像。

Answer 1

您可以使用this resource

将传单地图另存为PNG文件

使用Javascript和PHP将传单映射保存到PNG示例

Answer 2

我使用所谓的 Tile Stitching 方法（服务器端）执行此操作。步骤是：

在客户端收集文档中的所有图块图像，例如使用jQuery：
```
$('[class^="leaflet-tile leaflet-tile-loaded"]')
```

这将为您提供一个数组，其中包含地图的所有图块的img元素。

获取宽度和高度，x和y以及图像的网址，并输入您喜欢的数据结构
将数据结构发送到服务器上的一个函数，该函数将检索网址并使用x，y，width，height属性将图像拼接在一起。

我从这篇文章中得到了与openlayers一起使用的想法：http://trac.osgeo.org/openlayers/wiki/TileStitchingPrinting。在本文中，您将找到一个有效的PHP示例。使用上面的信息，传单的javascript部分应该不难。

Answer 3

这似乎对我有用：

http://www.yncoder.com/save-leaflet-map-as-image/

var images = container.getElementsByTagName('img');
for (var i = 0; i < images.length; i++) {
    images[i].setAttribute('crossOrigin', 'anonymous');
    images[i].src = images[i].src;
}

var canvas  = document.getElementById('dumb');
var context = canvas.getContext('2d');

canvas.width  = document.documentElement.clientWidth;
canvas.height = document.documentElement.clientHeight;

for (i = 0; i < images.length; i++) {
    if (typeof images[i] != 'undefined') {
        context.drawImage(images[i],
            images[i].style.left.slice(0, -2), // slice off 'px' from end of str
            images[i].style.top.slice(0, -2),
            images[i].clientWidth,
            images[i].clientHeight
        );
    }
}

window.open(canvas.toDataURL());

是否可以将Openstreetmap（传单）保存为图像

3 个答案: