使用Leaflet Draw多边形进行错误渲染

Question

我有以下多边形：

  

{ “类型”： “多边形”， “坐标”：[[[ - 95.1470947265625,42.2685019842801]，[ - 94.9493408203125,42.2400409352592]，[ - 94.866943359375,42.3213241404624]，[ - 95.0372314453125,42.4349444401055]，[ - 95.1470947265625， 42.2685019842801]]]}

此多边形在http://geojsonlint.com/中正确呈现。但是当我在我的页面上呈现它时，它看起来像这样。

以下是用于呈现此对象的完整代码：

var geometry = {"type":"Polygon","coordinates":[[[-95.1470947265625,42.2685019842801],   [-94.9493408203125,42.2400409352592],[-94.866943359375,42.3213241404624],[-95.0372314453125,42.4349444401055],[-95.1470947265625,42.2685019842801]]]};
var mmp_polygon = geometry;
geometry.crs = {"type": "name", "properties": {"name": "EPSG:4326"}};
$('#feeding_operation_map_coords_as_geojson').val(JSON.stringify(geometry));

var map = L.mapbox.map('map', 'examples.map-9ijuk24y')
        .setView([41.9022517010637, -93.7140816297676], 8);

var featureGroup = L.featureGroup().addTo(map);

var drawControl = new L.Control.Draw({
    draw: {
        marker: false,
        rectangle: false,
        polyline: false,
        circle: false
    },
    edit: {
        featureGroup: featureGroup
    }
}).addTo(map);


var line_points = mmp_polygon.coordinates[0];

// Mapbox wants lat and long swapped
line_points.forEach(function (entry) {
    entry.reverse();
});


// Define polyline options
// http://leafletjs.com/reference.html#polyline
var polyline_options = {
    color: '#000'
};

// Defining a polygon here instead of a polyline will connect the
// endpoints and fill the path.
// http://leafletjs.com/reference.html#polygon
var polygon = L.polygon(line_points, polyline_options).addTo(featureGroup);

bounds = featureGroup.getBounds();
console.log("bounds");
console.log(JSON.stringify(bounds));
map.fitBounds(bounds, {padding: [50, 50]})

Answer 1

加载地图后，setView会导致加载一组不同于fitBounds的切片。我评论了setView并得到了适当的瓷砖加载。这是我的编辑live demo including source code。