Mapbox 和 Leaflet Draw 仅编辑 1 组

Question

如果地图上有更好的方法可以包含多个多边形，我想添加多个图层组或要素组对象或其他东西。我希望这些组是可区分的，以便它们可以与数据表和传单绘图工具结合使用，这样当我在数据表中选择一行时，只能使用绘图工具和任何新的绘图工具编辑或删除相关组中的多边形多边形仅添加到该组中。

我之前只使用一个多边形和一个要素组来完成此操作，但是如何处理多个组？

            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;
                }
            }   
        }

我正在尝试在渲染我的数据表列期间添加多边形。这是我到目前为止所拥有的。我在某处看到了一篇关于添加多个绘图工具然后只提供当前可用的帖子。不确定这是否是一种好方法，但如果是，我可以在按钮的“数据绘制控件”中使用什么来指向我想要成为当前的那个？

                "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";
                    }
                }

Answer 1

首先创建两个功能组和一个图层控件，以便您可以在它们之间切换：

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

现在你在这两者之间切换，地图会触发一个basemapchanged 事件，其中包含当前选定的特征组，并将其存储在一个变量中：

var currentFeatureGroup;

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

当您绘制某些东西时，地图会触发另一个事件，您可以在其中处理绘制的特征。创建一个返回当前选择的特征组并将其存储到其中的函数：

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 上的概念示例：http://plnkr.co/edit/9ZEjuP?p=preview