1.5. 图层组和图层控件¶
本教程将展示如何将多个层组合成一组层，以及如何使用层控件来允许用户在地图上的不同层之间轻松切换。
| Show the example |
1.5.1. 图层组¶
假设有一组层，并且希望在代码中组合并处理它们：
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类执行以下操作，而不是直接将它们添加到地图：
var cities = L.layerGroup([littleton, denver, aurora, golden]);
很简单！现已有一个 cities 将城市徽标合并到一个层中的层，以便可立即在地图中添加或删除。
1.5.2. 图层控制¶
Leaflet是一个很好的小控件，允许用户控制他们在地图上看到的层。除了演示如何使用它之外，还将演示图层组的另一种方便用法。
有两种类型的层：
互斥的基础图层(一次只能在地图上看到一个)，例如切片图层
覆盖所有放置在基础层上的层。
其他内容。在本例中，我们希望切换两个基本层(灰度和颜色基本图)，以及切换和关闭一个覆盖层(先前创建的城市标记)。
现在，让我们创建基础层并将默认层添加到地图：
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]
});
接下来创建两个对象。一个包含基本层，一个包含覆盖层。这些只是具有键/值对的简单对象。键设置控件中的层的文本(例如“Streets”)，对应的值是相反的层(例如， streets )。
var baseMaps = {
"Grayscale": grayscale,
"Streets": streets
};
var overlayMaps = {
"Cities": cities
};
现在，只需创建一个Layer控件并将其添加到地图中。创建Layer控件时传递的第一个参数是基本层对象，第二个参数是Overlay对象。这两个参数都是可选的：当省略第二个参数时，只能传递基本层对象，或者如果只想传递Overlay对象，则可以将NULL作为第一个参数传递。在任何一种情况下，省略的层类型都不会出现供用户选择。
L.control.layers(baseMaps, overlayMaps).addTo(map);
请注意，我们添加了 grayscale 层和 cities 层，但没有 streets 。层控制足够智能，可以检测已添加了哪些层，并设置相应的单选按钮和复选框。
还请注意，当使用多个基本层时，只需要在实例化时将其中一个添加到地图中，但当创建Layer控件时，所有这些基本层对象都应该存在。
最后，在为层定义对象时，可以为对象的键定义样式。例如，此代码将使灰度贴图的标签变为灰色：
var baseMaps = {
"<span style='color: gray'>Grayscale</span>": grayscale,
"Streets": streets
};
现在，让我们使用一个单独的页面查看结果：./leavlet_layer_control/example.html