使用 html2canvas 在 google 地图上下载 d3.js 叠加层的能力

Question

对于这个项目，我有一个用户调出了一个 Google 地图，上面有一个 d3.js 叠加层。然后用户应该能够将带有叠加层的地图下载为 .png 文件供他们使用。问题是 d3.js 叠加层没有出现在下载中。请注意，我已经用 Google 地图覆盖修改了另一个 fiddle，因为我不允许显示实际数据和地图，但我已经添加了对 html2canvas 的调用来演示我的问题

JSFiddle

     $("#btnClickHere").on("click", function() {
            //get transform value
            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($("#map")[0], {
                useCORS: true,
                background: "#E8F0F6",
                onrendered: function(canvas) {

                    $(".gm-style>div:first>div").css({
                        left: 0,
                        top: 0,
                            "transform": transform
                    });

                    //     $this.appendChild(canvas);

                    var a = document.createElement('a');
                    a.download = name;
                    a.href = canvas.toDataURL('image/png');
                    document.body.appendChild(a);
                    a.click();


                },
                width: 800,
                height: 500,
            });
        });

Answer 1

你的SVG定位很奇怪：

.SvgOverlay svg {
  position: absolute;
  top: -4000px;
  left: -4000px;
  width: 8000px;
  height: 8000px;
}

我最初认为它就在页面之外。搬起来果然不错：

.SvgOverlay svg {
   position: absolute;
   top: 0px;
   left: 0px;
 }

给它合适的尺寸：

var svg = layer.append("svg").attr("width",500).attr("height",500);

并移除奇怪的重新定位：

return [pixelCoordinates.x, pixelCoordinates.y];

它覆盖在 png 中，已更新 fiddle here。

编辑

哦还有一件事，看起来您需要在元素上显式设置样式以将它们带入结果 canvas。更新上面的link。

.attr("d", path)
.style("fill", "orange").style("stroke-width", 2).style("fill-opacity",0.3).style("stroke","orange");

使用 html2canvas 在 google 地图上下载 d3.js 叠加层的能力

The ability to download an d3.js overlay on a google map using html2canvas

jquery

google-maps

d3.js

html2canvas