javascript - 在 Angular 5 中将带有 geojson 层的 Leaflet map 导出为 png

Question

我有一张包含大量 geojson 的传单 map 。我希望能够将 map 图像导出为 png。我试过 leaflet-image 插件，它导出 basemap ，我也试过(独立地)html2canvas 库将 map div 的内容输出到 png 文件。

不幸的是，使用 leaflet-image 输出只显示背景层( map )而不显示任何 geojson 区域，而使用 html2canvas 输出结果显示层而不显示背景 map 。

我认为 leaflet-image 插件不可行，因为它有太多限制。它需要将所有层都渲染到 Canvas 上，但这样做会导致性能下降——它似乎无法处理如此多的地理区域。我对服务器也没有太多控制权，那里没有安装 nodejs。

html2canvas 更有前途。使用它和文件保护程序，我能够输出完整的图像和区域，如下所示:

html2canvas(myMap, {
            allowTaint:false,
            useCORS: true,
            width: 650,
            height: 500,

        }).then(canvas => {
            canvas.toBlob((blob) => {
                saveAs(blob, "my-map.png");
            });
        });

除一个问题外，这工作得很好——区域在 Canvas 上呈现在错误的位置。即区域偏移量错误。这是一个例子。 map 的底部和右侧应该用彩色等值区域覆盖到边缘:

如何让区域在 map 上正确呈现，而不是被裁剪到错误的位置？

编辑:我查看了 html2canvas 网站上的一个问题 here这看起来很有希望。我的似乎没有这样的转换问题，但有人经历过我认为是层偏移问题。我在这里实现了他们的解决方案:

function redraw() {
    var lat_tmp = map.getCenter().lat;
    var lng_tmp = map.getCenter().lng;
    map.setView([-66.22149259832975, -1.142578125]);
    setTimeout(function () {
        waitForTilesToLoad()
    }, 50000);
    map.setView([lat_tmp, lng_tmp]);
}

但是还是不行，所以我还在努力解决这个问题。我遇到的并不是图层偏移问题，而是图层裁剪问题。

Answer 1

最近有同样的问题，在尝试管理 html2canvas 时也转到了相同的引用主题。

在我的例子中(也许你也是)， map 是动态的并且包含太多的图 block 和元素类型(市场集群、饼图等)。它被 CraigVA 提供的技巧搞砸了。

最后，我尝试了其他几个插件，发现这个非常令人满意:

Leaflet Easy Print

没有故障，干净的 png 导出。