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

Stack Overflow用户

提问于 2014-08-16 02:19:04

回答 1查看 2.2K关注 0票数 1

我正在使用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>

leaflet

javascript

maps

回答 1

Stack Overflow用户

发布于 2015-04-15 14:44:51

这只是你错过了在任何绘图完成时向drawnItems添加层。只需将代码中的"map“替换为"drawnItems”即可，如下所示：

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

});

享受吧！

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/25331909

复制

相似问题

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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