Leaflet 地图框和传单绘图仅编辑1组

我想添加多个layergroup或featuregroup对象或其他东西，如果地图上有更好的方法可以在每个对象中包含多个多边形。我希望这些组可以区分，以便它们可以与datatables和传单绘制工具一起使用，这样当我在datatables中选择一行时，使用绘制工具只能编辑或删除相关组中的多边形，并且只能将任何新多边形添加到该组中

我以前只使用了一个多边形和一个featuregroup，但是如何处理多个组呢

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

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

        $('.leaflet-control-zoom').css('margin-top', '45px');

        L.drawLocal.draw.toolbar.buttons.polygon = 'Draw damage area';
        L.drawLocal.edit.toolbar.buttons.edit = 'Edit damage area';
        L.drawLocal.edit.toolbar.buttons.remove = 'Delete damage area';

        if (jsModel.polygonpoints)
        {
            var polygonPoints = jsModel.polygonpoints.split(';');
            if (polygonPoints.length > 0) {
                var polyPoints = [];
                for (var i = 0; i < polygonPoints.length; i++) {
                    var point = polygonPoints[i].split(',');

                    polyPoints.push([parseFloat(point[0]), parseFloat(point[1])]);
                }
                var points = polyPoints;

                var polyOptions = {
                    color: '#f06eaa'
                };

                var polygon;
                if (typeof featureGroup !== "undefined") {
                    polygon = L.polygon(points, polyOptions).addTo(self.featureGroup);
                    self.polygon = polygon;
                }
            }   
        }

我试图在渲染datatable列时添加多边形。这是我到目前为止所拥有的。我在某个地方看到一篇帖子，谈到添加多个绘图工具，然后只提供当前的一个。不确定这是否是一个好方法，但如果是，我可以在按钮的数据绘制控件中使用什么来指向我想要的当前控件

                "columns": [
                {
                    "render": function (data, type, row) {
                        var featureGroup = L.featureGroup().addTo(map);
                        var drawControl = new L.Control.Draw({
                            edit: {
                                featureGroup: featureGroup
                            },
                            draw: {
                                marker: false,
                                polygon: true,
                                polyline: false,
                                rectangle: false,
                                circle: false
                            }
                        }).addTo(map);

                        for (var al = 0; al < row.areaList.length; al++)
                        {
                            var polyPoints = [];
                            for (var ap = 0; ap < row.areaList[al].areaPointList.length; ap++)
                            {
                                if (row.areaList[al].areaPointList[ap].x == 0 && row.areaList[al].areaPointList[ap].y == 0)
                                {
                                    if (polyPoints.length != 0)
                                    {
                                        //add polygon to map
                                        L.polygon(polyPoints).addTo(featureGroup);
                                        polyPoints.length = 0;
                                    }
                                }
                                else
                                {
                                    polyPoints.push([parseFloat(row.areaList[al].areaPointList[ap].x), parseFloat(row.areaList[al].areaPointList[ap].y)]);
                                }
                            }
                        }
                        return "<button type='button' class='btn-zoom' data-draw-control='" + drawControl + "'><i class='fa fa-search'></i></button";
                    }
                }

---

首先创建两个FeatureGroup和一个layercontrol，以便您可以在它们之间切换：

var layerControl = new L.Control.Layers({
    'FeatureGroup 1': new L.FeatureGroup(),
    'FeatureGroup 2': new L.FeatureGroup()
}).addTo(map);

现在，在这两者之间切换，映射将触发一个basemapchanged事件，该事件包含当前选定的featuregroup，并将其存储在变量中：

var currentFeatureGroup;

map.on('baselayerchange', function (e) {
    currentFeatureGroup = e.layer;
});

绘制某个对象时，地图将触发另一个事件，您可以在其中处理绘制的要素。创建一个函数，返回当前选定的featuregroup并将其存储到：

function getCurrentFeatureGroup () {
    return currentFeatureGroup;
}

map.on('draw:created', function (e) {
    var featureGroup = getCurrentFeatureGroup();
    if (featureGroup instanceof L.FeatureGroup) {
        featureGroup.addLayer(e.layer);
    } else {
        alert('Please select a featuregroup');
    }
});

---

下面是一个关于Plunker的概念示例：

这正是我想要的，但我希望其他多边形组始终可见，但一次只能编辑一个组。用户将绘制区域，并需要查看所有内容，以便它们不会意外重叠。我添加了一些代码，以显示我在呈现datatables列时尝试执行的操作。