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

Question

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

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

我在点击事件发生的页面添加了一个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 函数创建将添加到地图的新层，但我如何添加这一层进入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 的了解。祝你的项目好运，干杯！

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

How to add layers and update layer control dynamically : leaflet

javascript

jquery

google-maps

leaflet

angular-leaflet-directive