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

Question

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

最初使用 imageoverlay 为底图添加图层控件（处理 1 个图层）......

我在页面上添加了一个 id 'newLyer' 的按钮，点击事件处理新图层的创建......即用户可以创建新图层并更新图层控件（现在正在处理 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 的了解。祝你的项目好运，干杯！