css - 图像缺少图 block 和 svg

Question

我正在使用 Html2Canvas 和传单。当我向左、向右、向上或向下平移 map 然后导出时，我得到一张缺少图 block 的图像。我的叠加层也不再存在。但是，如果我不平移，我就会得到叠加层。这是丢失的瓷砖的图片。

有谁知道如何解决这个问题吗？

这是我的代码

//CSS
/* Map */
 #map {
    height: 440px;
}
//HTML 
<div id="map"></div>
<div id="exportDiv">
    <button id="btnClickHere" type="button">Click Me!</button>
</div>
//Javascript
      var tilesReady;

    $(document).ready(function () {
        buildMap();

        $("#btnClickHere").on("click", function () {
           exportMap();
        });
    });
    function exportMap() {
        //get transform value
        html2canvas($("#map")[0], {
            useCORS: true,
            background: "#E8F0F6",
            onrendered: function (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
        });
    }
    function buildMap() {
        tilesReady = false;
        map = L.map('map', {
            center: [28.418749, -81.581211],
            zoom: 12
        });
        var data = [{
            "coords": [28.3710, -81.5500],
                "time": 1
        }, {
            "coords": [28.4186, -81.5811],
                "time": 2
        }, {
            "coords": [28.3570, -81.5561],
                "time": 3
        }];
        var layers =    L.tileLayer('http://{s}.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.png', {
            attribution: "Map: Tiles Courtesy of MapQuest (OpenStreetMap, CC-BY-SA)",
            subdomains: ["otile1", "otile2", "otile3", "otile4"],
            maxZoom: 18,
            minZoom: 2
        }).addTo(map);
        /* Initialize the SVG layer */
        map._initPathRoot();
        /* We simply pick up the SVG from the map object */
        var svg = d3.select("#map").select("svg"),
            g = svg.append("g");
        /* Add a LatLng object to each item in the dataset */
        data.forEach(function (d) {
            d.LatLng = new L.LatLng(d.coords[0],
            d.coords[1]);
        });
        var feature = g.selectAll("circle")
            .data(data)
            .enter().append("circle")
            .style("stroke", "black")
            .style("opacity", '.6')
            .style("fill", "red")
            .attr("r", 20);
        map.on("viewreset", update);
        update();
     function update() {
            feature.attr("transform",
            function (d) {
                return "translate(" + map.latLngToLayerPoint(d.LatLng).x + "," + map.latLngToLayerPoint(d.LatLng).y + ")";
            });
        }
    }

Answer 1

我认为您需要等到所有图 block 都加载到图 block 层上，然后才能开始捕获过程。见

http://leafletjs.com/reference.html#tilelayer-load

使用 layer.on('load', callback) 附加事件