圖像缺失瓷磚和svg

我使用Html2Canvas和傳單。當我向左，向右，向上或向下平移地圖，然後導出時，我會得到一張我失蹤的地圖。此外，我的疊加層不再存在。但是，如果我不平移，我會覆蓋覆蓋。這是缺少瓷磚的照片。 enter image description here 圖像缺失瓷磚和svg

有沒有人知道如何解決這個問題？

這裏是我的代碼

//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 + ")"; 
      }); 
     } 
    }

來源

2015-04-29 JPiasente

我們就需要看你的代碼必須在回答這個機會。 –

請編輯問題並在其中添加代碼，而我並不只是指實際的代碼。 –

我認爲你需要等到所有的磚平鋪層上加載在開始拍攝過程之前。見

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

附上事件與layer.on（「負荷」，回調）

來源

2015-04-29 20:46:00 snkashis

我在小提琴中添加了該代碼，但仍然收到缺失的貼圖。我用它裏面的代碼更新了小提琴版本https://jsfiddle.net/japiasente/7ybndo5L/ – JPiasente

好的，所以我最初的答案不會幫助你，因爲我更多地閱讀了這段代碼。當我製作屏幕截圖時，我會在底部留下額外空間的圖像，並將一些疊加圓圈切掉。我在mac中使用chrome。你遇到什麼問題？ – snkashis

使用鉻給我缺少的瓷磚，當使用Firefox時，我得到的瓷磚，但我失去了svg覆蓋。在IE瀏覽器它不會導出，因爲我調用toDataURL。 – JPiasente

圖像缺失瓷磚和svg

回答

相關問題