Mapbox和Leaflet Draw仅可编辑1组 [英] Mapbox and Leaflet Draw edit only 1 group

问题描述

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

I want to add multiple layergroup or featuregroup objects or something else if there's a better way on a map that can contain multiple polygons in each. I want these groups to be distinguishable so they can be used in conjunction with datatables and the leaflet draw tool so that when I select a row within datatables, only the polygons within the related group can be edited or deleted using the draw tool and any new polygons are only added to that group.

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

I've done this before with only a single polygon and one featuregroup, but how do I handle multiple groups?

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

我正在尝试在渲染数据表列时添加多边形.到目前为止，这就是我所拥有的.我在某处看到一则帖子，内容涉及添加多个绘图工具，然后仅使当前的可用.不知道这是否是一个好方法，但是如果是这样，我可以在按钮的数据绘制控件"中使用什么来指向我想要成为当前对象的那个?

I'm trying to add the polygons during a render of my datatable columns. Here is what I have so far. I saw a post somewhere that talked about adding multiple draw tools and then only make the current one available. Not sure if this is a good way to do it, but if it is, what can I use in my button's "data-draw-control" to be able to point to the one I want to be current?

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

推荐答案

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

First create two featuregroups and a layercontrol so you can toggle between them:

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

现在，您在这些之间进行切换，地图将触发一个basemapchanged事件，该事件包含当前选定的要素组，并将其存储在变量中:

Now then you toggle between those, the map fires a basemapchanged event which contains the currently selected featuregroup, store that in a variable:

var currentFeatureGroup;

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

绘制某些内容时，地图会触发另一个事件，您可以在其中处理绘制的特征.创建一个函数，该函数返回当前选定的要素组并将其存储在其中:

When you draw something, the map fires another event where you can process the drawn feature. Create a function that returns the currently selected featuregroup and store it into that:

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 =预览

Here's an example of the concept on Plunker: http://plnkr.co/edit/9ZEjuP?p=preview

这篇关于Mapbox和Leaflet Draw仅可编辑1组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！