Question

对于这个项目，我有一个用户在其上面显示带有d3.js叠加层的Google地图。然后，用户应该能够将覆盖图下载为.png文件以供其使用。问题是d3.js叠加层没有出现在下载中。注意我已经修改了另一个谷歌地图叠加小提琴，因为我不允许显示实际的数据和地图，但我已经添加了对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中，更新了小提琴here。

<强> EDITS

哦，还有一件事，看起来你需要在元素上显式设置样式，以便将它们带入生成的画布中。更新上面的链接。

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

能够使用html2canvas在谷歌地图上下载d3.js叠加层

1 个答案: