Question

我正在使用leaflet.snap（http://makinacorpus.github.io/Leaflet.Snap/），它允许我在绘制多边形时将点捕捉到线 - 这正是我需要的。但是我很难设法将多边形设置为可编辑。

这是我的代码，它使用Leaflet.Snap，允许绘制但不能编辑多边形。任何让多边形可编辑的帮助都非常感谢。

 <!DOCTYPE html>
<html>
<head>
    <title>Leaflet Snap Test</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Leaflet -->
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
    <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
       <style>
     .leaflet-editing-icon.marker-snapped {
        background-color: yellow;
    }
 </style>

    <link rel="stylesheet" href="http://makinacorpus.github.io/Leaflet.Snap/Leaflet.draw/dist/leaflet.draw.css" />
    <script src="http://makinacorpus.github.io/Leaflet.Snap/Leaflet.draw/dist/leaflet.draw.js"></script>
    <script src="http://makinacorpus.github.io/Leaflet.Snap/Leaflet.GeometryUtil/dist/leaflet.geometryutil.js"></script>
    <script src="http://makinacorpus.github.io/Leaflet.Snap/leaflet.snap.js"></script>
</head>
<body>
<div id="map" class="map" style="height: 500px; width: 800px"></div>
<script>
var theTileLayer = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: 'Map data &copy; 2013 OpenStreetMap contributors',
});
var map = L.map('map').setView([45.4835656, -122.7332588], 12).addLayer(theTileLayer);
    var guideLayers = new Array();
    var drawnItems = new L.FeatureGroup();
    map.addLayer(drawnItems);
 var drawControl = new L.Control.Draw({
position: 'topright',
draw: {
    polyline: false,
    polygon: {
        shapeOptions: {
            color: '#009900'
        }
     },
    circle: false, // Turns off this drawing tool
    rectangle: false,
    marker: false
      },
    edit: {
    featureGroup: drawnItems, //REQUIRED!!
    remove: true
    }
        });
    map.addControl(drawControl);


// Editing lines works fine on the sample (http://makinacorpus.github.io/Leaflet.Snap/) but not below.

   drawControl.setDrawingOptions({
        polygon: { guideLayers: guideLayers, snapDistance: 15 },
   });

    map.on('draw:created', function (e) {
        var layer = e.layer;
        map.addLayer(layer);
        guideLayers.push(layer);

    });
</script>
</body>
</html>

Answer 1

只是你错过了在任何绘图完成时将图层添加到drawingItems。只需在代码中将“map”替换为“drawnItems”，如下所示，它将起作用：

map.on('draw:created', function (e) {
    var layer = e.layer;
    drawnItems.addLayer(layer);
    guideLayers.push(layer);

});

享受！

在leaflet.js和leaflet.snap中编辑多边形

1 个答案: