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

当我点击 "Take a snapshot" 按钮时，出现以下错误：

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 不允许分享解决方案（因为你不能写脚本标签）所以你必须在你自己的网络服务器上这样做。

<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 and 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>

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

How to capture a leaflet / mapbox image with a geoJSON layer?

javascript

canvas

leaflet

mapbox