如何动态添加图层和更新图层控件：传单

Question

我正在使用lealflet api，用户可以在其中绘制形状以映射（图像）...

最初使用imageoverlay为基础地图添加了图层控件（处理1层）。

我在页面上添加了一个id为“ newLyer”的按钮，其中click事件处理了新图层的创建.....即用户可以创建新图层并更新图层控件（现在正在处理2层）。

我已经使用了几种方法来创建图层并添加到控件中，但是失败了。

向layerGroup添加新图层

var layerGroup = new L.LayerGroup(),
                    imageOverlayUrl = 'aa.jpg',
                    // New imageoverlay added to the layergroup
                    imageOverlay = new L.ImageOverlay(imageOverlayUrl, bounds).addTo(layerGroup),
                    // New featuregroup added to the layergroup
                    featureGroup = new L.FeatureGroup().addTo(layerGroup);

我需要在其中添加控件的LayerControl（如果我正确的话）

        var layerControl = new L.control.layers({
            'Main': layerGroup,
            //here i need to add new layer control
            }, null, { collapsed: false }).addTo(map);

到目前为止具有静态代码的OnClick函数，将在单击时执行

        $('#newLayer').click(function addNewLayer() {
            // Second layergroup not added to the map yet
            var layerGroupNew = new L.LayerGroup(),
                imageOverlayUrlNew = 'bb.png',
                // New imageoverlay added to the second layergroup
                imageOverlayNew = new L.imageOverlay(imageOverlayUrlNew, bounds).addTo(layerGroup2),
                // New featuregroup added to the second layergroup
                featureGroupNew = new L.FeatureGroup().addTo(layerGroupNew);
        });

简而言之

最初，我有一个带有其控件的图层，现在onclick函数会创建一个新图层，该图层将添加到地图中，但是我如何将该图层添加到layerControl中。

如果有人对如何进行此类操作有任何想法，请提供帮助，或者，任何形式的帮助或参考都将不胜感激。

Answer 1

如果您查看L.Control.Layers的文档：

http://leafletjs.com/reference.html#control-layers

您将看到L.Control.Layers具有addBaseLayer方法：

http://leafletjs.com/reference.html#control-layers-addbaselayer

将具有给定名称的基础层（单选按钮项）添加到控件。

因此，您可以执行以下操作：

layerControl.addBaseLayer(newBaseLayer, 'My New BaseLayer');

而且你很好。 如您所见，如果您要查看参考资料 ，则可以免去发布此问题的麻烦。 宣传单据非常详细。 通过两次完整阅读文档，我已经了解了有关Leaflet的大部分知识。 祝您项目顺利，加油！