javascript - 如何动态添加图层和更新图层控件: leaflet

Question

我正在使用 leaflet api，用户可以在其中绘制形状 map (图像)...

最初为 basemap 添加图层控件(处理 1 图层)使用图像叠加......

我在点击事件的页面添加了一个 id 'newLyer' 的按钮处理新图层的创建......即用户可以创建新图层并更新图层控制(现在处理 2 层)....

我使用了多种方法来创建图层并添加到控件但失败了......

向图层组添加新图层

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 函数创建将添加到 map 中的新图层，但我如何添加该层进入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

Adds a base layer (radio button entry) with the given name to the control.

因此你可以这样做:

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

你就可以开始了。如您所见，如果您查看 reference，您就可以省去发布此问题的麻烦。 。传单有很好的记录。我个人对 Leaflet 的了解是通过完整地阅读一次文档来了解的。祝您的项目顺利，干杯!