如何使用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/

當我點擊“拍攝快照”按鈕時，出現以下錯誤：

未捕獲的TypeError：無法在'CanvasRenderingContext2D'上執行'drawImage'：提供的值不是'（HTMLImageElement或HTMLVideoElement或HTMLCanvasElement或ImageBitmap）'

我見過傳單圖像自述文件： https ： //github.com/mapbox/leaflet-image/blob/gh-pages/README.md

哪個州

您必須設置L_PREFER_CANVAS = true; 這樣矢量圖層是用Canvas而不是SVG或VML繪制的。

但它沒有說明在哪里設定。 我嘗試在我的segLayer上設置它，在地圖上，只是全局但它不能修復錯誤。 我究竟做錯了什么？

Answer 1

Mapbox 靜態地圖API將用於異步圖像提取。

使用此鏈接和MapID，您還可以看到地圖圖像預覽。

有關如何將靜態地圖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> 

Answer 2

解釋在這里

不幸的是，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>