Javascript 如何使用geoJSON图层捕获传单/地图盒图像？

我在这里以基本传单图像为例：

并通过在地图中添加一个非常简单的geoJSON层对其进行了修改：

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

当我点击“拍摄快照”按钮时，出现以下错误：

未捕获类型错误：未能对“CanvasRenderingContext2D”执行“drawImage”：提供的值不是类型“（HTMLImageElement或HTMLVideoElement或HtmlCanvaSeElement或ImageBitmap）”

我已经看过传单图片自述：

哪个州

必须将L_preference_CANVAS设置为true；因此，矢量层是在画布中绘制的，而不是SVG或VML

但它没有说在哪里设置。我试着在我的segLayer上、地图上以及全球范围内设置它，但它并没有修复错误。我做错了什么？解释是

不幸的是，JSFIDLE不允许共享解决方案（因为您无法编写脚本标记） 因此，您必须在自己的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>

L_preference_CANVAS=true；

Mapbox将用于异步图像获取

使用，还可以查看地图图像预览

有关如何将静态映射API与GeoJSON结合使用的信息，请参见本文

添加更新的

L.mapbox.accessToken='pk.eyj1ijoizgf2awrsb3r0iiiiiiysi6ijdlnmu1zwuymde5mdcwmdq5ytnin2yizktizkg5in0.sDTxz1C0DTl3UH7AguCBXg'；
var snapshot=document.getElementById（'snapshot'）；
var map=L.mapbox.map（'map'，'mapbox.streets'）
.setView（[38.88995，-77.00906]，15）；
变量数据={“类型”：“特征集合”，“特征”：[{“类型”：“特征”，“属性”：{“线”：85，“Seg”：873}，“几何”：{“类型”：“线串”，“坐标”：[-105.68659973,43.22522736]，-105.67418671,43.14464951]，-105.67417145,43.14464569]}}；
var dataJson=JSON.parse（数据）；
var segLayer=L.geoJson（dataJson）；
segLayer.addTo（map）；
fitBounds（segLayer.getBounds（））；
document.getElementById（'snap'）。addEventListener（'click'，function（）{
var center=map.getCenter（）
log（map.getCenter（））；
var jsonData={
“类型”：“功能”，
“财产”：{
“笔划宽度”：4，
“笔划”：“ff4444”，
“笔划不透明度”：0.5
},
“几何学”：{
“类型”：“行字符串”，
“坐标”：[
[-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.\u zoom+”/500x300.png？访问令牌=pk.eyj1ijoizgf2awrsb3r0iiiijdlnmu1zwuymde5mdcwmdq5ytnin2izktg5in0.sdtxz1dtl3uh7agucbxg”；
console.log（imageUrl）；
var img=document.createElement（'img'）；
var dimensions=map.getSize（）；
img.宽度=尺寸x；
img高度=尺寸y；
img.src=imageUrl；
snapshot.innerHTML=''；
snapshot.appendChild（img）；
});
body{margin:0；padding:0；}
#映射{位置：绝对；顶部：0；底部：0；宽度：100%；}
.ui按钮{
位置：绝对位置；
顶部：10px；
右：10px；
z指数：1000；
}
#地图{
宽度：50%；
}
#快照{
位置：绝对位置；
顶部：0；底部：0；右侧：0；
宽度：50%；
}

拍快照
我感谢您非常详细的回答，使用静态api是非常有趣的。我以后可能会进一步探讨这个选项，但另一个答案是我一直在寻找的，以使我当前的解决方案尽可能容易地工作。不管怎样，我还是要投票支持你的答案。