问题描述
我在这里采用了基本的传单图像示例： ：
并通过向地图添加一个非常简单的geoJSON图层来修改它：
var dataJson = JSON.parse(data);
var segLayer = L.geoJson(dataJson);
segLayer.addTo(map);
map.fitBounds(segLayer.getBounds());
当我点击“拍摄快照”按钮时，出现以下错误：
未捕获的TypeError：无法在'CanvasRenderingContext2D'上执行'drawImage'：提供的值不是'（HTMLImageElement或HTMLVideoElement或HTMLCanvasElement或ImageBitmap）'
我见过传单图像自述文件： ：
哪个州
您必须设置L_PREFER_CANVAS = true; 这样矢量图层是用Canvas而不是SVG或VML绘制的。
但它没有说明在哪里设定。 我尝试在我的segLayer上设置它，在地图上，只是全局但它不能修复错误。 我究竟做错了什么？
1楼
Mapbox 将用于异步图像提取。
使用和您还可以看到地图图像预览。
有关如何将静态地图API与GeoJSON一起使用，请参阅此 。
添加您更新的
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>
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>