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

我试图在渲染我的数据表列时添加多边形。这是我到目前为止所拥有的。我看到某个帖子谈到添加多个绘图工具，然后只提供当前的一个。不确定这是否是一个好方法，但如果是，我可以在我的按钮＆＃34;数据绘制控件＆＃34;中使用什么？能够指向我想成为最新的那个吗？

                "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

Mapbox和Leaflet Draw仅编辑1组

1 个答案: