如何使用geoJSON圖層捕獲傳單/地圖盒圖像？

Question

我已經採取了這裏的基本單張圖像例如： https://www.mapbox.com/mapbox.js/example/v1.0.0/leaflet-image/

而且通過添加一個非常簡單的GeoJSON的層到地圖修改了它：

var dataJson = JSON.parse(data); 
var segLayer = L.geoJson(dataJson); 
segLayer.addTo(map); 
map.fitBounds(segLayer.getBounds()); 

https://jsfiddle.net/fexymjy3/10/

當我打的「拍快照」按鈕，出現以下錯誤：

Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(HTMLImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap)'

我見過的單張圖像自述： https://github.com/mapbox/leaflet-image/blob/gh-pages/README.md

其中規定

You must set L_PREFER_CANVAS = true; so that vector layers are drawn in Canvas rather than SVG or VML.

但它並沒有說哪裏來設置。我試過將它設置在我的segLayer上，在地圖上，並在全球範圍內，但它不能解決這個錯誤。我究竟做錯了什麼？

Answer 1

的解釋是here

不幸的是，的jsfiddle不允許共享解決方案（因爲你不能寫腳本標籤） 所以，你必須做的是，在自己的Web服務器。

<script>L_PREFER_CANVAS = true;</script> 
<script src="http://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js"></script> 
<script src='https://api.tiles.mapbox.com/mapbox.js/v2.2.1/mapbox.js'></script> 
<script src='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-image/v0.0.4/leaflet-image.js'></script> 

Answer 2

Mapbox static maps API將用於異步圖像抓取。

使用This link和MapID你也可以看到你的地圖圖像預覽。

查看此example瞭解如何使用靜態地圖API和GeoJSON。

添加您的更新JSFiddle

L.mapbox.accessToken = 'pk.eyJ1IjoiZGF2aWRsb3R0IiwiYSI6IjdlNmU1ZWUyMDE5MDcwMDQ5YTNiN2IyZTIzYjZkNTg5In0.sDTxz1C0DTl3UH7AguCBXg'; 
 

 
var snapshot = document.getElementById('snapshot'); 
 
var map = L.mapbox.map('map', 'mapbox.streets') 
 
    .setView([38.88995, -77.00906], 15); 
 

 
var data = '{"type":"FeatureCollection","features":[{"type":"Feature","properties":{"Line":85,"Seg":873},"geometry":{"type":"LineString","coordinates":[[-105.68659973,43.22522736],[-105.67418671,43.14464951],[-105.67417145,43.14464569]]}}]}'; 
 

 
var dataJson = JSON.parse(data); 
 
var segLayer = L.geoJson(dataJson); 
 

 
segLayer.addTo(map); 
 

 
map.fitBounds(segLayer.getBounds()); 
 

 
document.getElementById('snap').addEventListener('click', function() { 
 

 
    var center = map.getCenter() 
 
    console.log(map.getCenter()); 
 

 

 
    var jsonData = { 
 
     "type": "Feature", 
 
     "properties": { 
 
      "stroke-width": 4, 
 
      "stroke": "#ff4444", 
 
      "stroke-opacity": 0.5 
 
     }, 
 
     "geometry": { 
 
      "type": "LineString", 
 
      "coordinates": [ 
 
       [-105.68659973, 43.22522736], 
 
       [-105.67418671, 43.14464951], 
 
       [-105.67417145, 43.14464569] 
 
      ] 
 
     } 
 
    }; 
 

 
    var encodedData = encodeURIComponent(JSON.stringify(jsonData)); 
 

 
    console.log(encodedData); 
 

 
    var imageUrl = "https://api.tiles.mapbox.com/v4/mapbox.streets/geojson(" + encodedData + ")/" + center.lng + "," + center.lat + "," + map._zoom + "/500x300.png?access_token=pk.eyJ1IjoiZGF2aWRsb3R0IiwiYSI6IjdlNmU1ZWUyMDE5MDcwMDQ5YTNiN2IyZTIzYjZkNTg5In0.sDTxz1C0DTl3UH7AguCBXg"; 
 

 
    console.log(imageUrl); 
 

 
    var img = document.createElement('img'); 
 
    var dimensions = map.getSize(); 
 
    img.width = dimensions.x; 
 
    img.height = dimensions.y; 
 
    img.src = imageUrl; 
 
    snapshot.innerHTML = ''; 
 
    snapshot.appendChild(img); 
 

 
});

body { margin:0; padding:0; } 
 
    #map { position:absolute; top:0; bottom:0; width:100%; } 
 

 
.ui-button { 
 
    position:absolute; 
 
    top:10px; 
 
    right:10px; 
 
    z-index:1000; 
 
    } 
 
#map { 
 
    width:50%; 
 
    } 
 
#snapshot { 
 
    position:absolute; 
 
    top:0;bottom:0;right:0; 
 
    width:50%; 
 
    }

<link rel="stylesheet" type="text/css" href="https://api.tiles.mapbox.com/mapbox.js/v2.2.1/mapbox.css"/> 
 
<script type="text/javascript" src="https://api.tiles.mapbox.com/mapbox.js/v2.2.1/mapbox.js"></script> 
 
<script type="text/javascript" src="https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-image/v0.0.4/leaflet-image.js"></script> 
 
<button id='snap' class='ui-button'>Take a snapshot</button> 
 
<div id='snapshot'></div> 
 
<div id='map'></div>