本文用于介绍如何将多个layers组合成一个以及如果使用layers control让用户轻松的在地图上切换不同的图层。

Layer Group

        假设你有一些想要合并为一组的layer，在代码中统一处理这些layer：

var littleton = L.marker([39.61, -105.02]).bindPopup('This is Littleton, CO.'),
    denver    = L.marker([39.74, -104.99]).bindPopup('This is Denver, CO.'),
    aurora    = L.marker([39.73, -104.8]).bindPopup('This is Aurora, CO.'),
    golden    = L.marker([39.77, -105.23]).bindPopup('This is Golden, CO.');

        你可以使用如下的LayerGroup类，而不是将它们逐一直接添加到map上。

var cities = L.layerGroup([littleton, denver, aurora, golden]);

        注：添加LayerGroup的另外一种方法：

var cities = new L.layerGroup();
L.marker([39.61, -105.02]).bindPopup('This is Littleton, CO.').addTo(cities);
L.marker([39.74, -104.99]).bindPopup('This is Denver, CO.').addTo(cities);
L.marker([39.73, -104.8]).bindPopup('This is Aurora, CO.').addTo(cities);
L.marker([39.77, -105.23]).bindPopup('This is Golden, CO.').addTo(cities);

        就是这么简单！现在你拥有了一个cities图层，该图层将你的城市marker整合到一起，你可以在地图上一起添加或者删除它们。

Layers Control

        Leaflet拥有小巧的控件允许用户控制他们可以在地图上看见那些图层。接下来我们不仅要向你展示如何使用Layer Control控件，还要向你展示Layer Group的另一种便利的用法。

        有两种类型的图层：（1）base layer—互斥的图层（在地图上同一时间只能有一个图层可见），比如tile layers；

                                            （2）overlay—在base layer之上放置的其他东西。

        在该例子中，我们打算使用两个base layer（一个灰色基础图和一个彩色基础图）以及一个可打开/关闭和overlay：就是前面我们创建的城市marker。

        现在让我们在地图创建这些base layser并设置一个默认的。

var grayscale = L.tileLayer(mapboxUrl, {id: 'MapID', attribution: mapboxAttribution}),
    streets   = L.tileLayer(mapboxUrl, {id: 'MapID', attribution: mapboxAttribution});

var map = L.map('map', {
    center: [39.73, -104.99],
    zoom: 10,
    layers: [grayscale, cities]
});

        接下来，我们创建两个对象：一个包含base layer，另一个包含overlay。这些只是简单的键/值对类型对象。关键字设置控件中图层的文字（比如“Streets”），值是前面创建的图层变量（比如steets）。

var baseMaps = {
    "Grayscale": grayscale,
    "Streets": streets
};

var overlayMaps = {
    "Cities": cities
};

        剩下的就是创建Layers Control控件并将它添加到地图上。第一个参数是base layer对象，第二个参数是overlay对象。两个参数都是可选的：你可以仅仅传递一个base layer对象，也可以单单传递一个overlay对象，第一个参数传入null。这样的话省略的图层类型将不会出现在用户的选择列表中。

L.control.layers(baseMaps, overlayMaps).addTo(map);

        这样我们就添加了grayscale和cities图层，而没有添加strees图层。layers control控件能够检测出已添加的图层，并且设置相应的多选框和单选框。

        需要注意的是当使用多重base layers时，同一时间地图上只能添加其中一个，但是在创建layers control控件时需要全部添加在base layers对象中。

原文：http://leafletjs.com/examples/layers-control/

转载自：https://blog.csdn.net/naipeng/article/details/53640480