← 教程

图层组和图层控制

本教程将向您展示如何将多个图层组合成一个图层组，以及如何使用图层控制使用户能够轻松地在您的地图上切换不同的图层。

图层组

假设您有一堆图层，您希望将它们组合成一个组，以便在代码中将它们作为整体进行处理。

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 的图层，它将您的城市标记组合成一个图层，您可以将它添加到地图中或从地图中删除。

图层控制

Leaflet 具有一个便捷的控制工具，允许您的用户控制他们在您的地图上看到哪些图层。除了向您展示如何使用它之外，我们还将向您展示图层组的另一个有用用途。

图层有两种类型：（1）互斥的底图（一次只能在一个地图上可见），例如瓦片图层，以及（2）叠加层，即您在底图上放置的所有其他内容。在本例中，我们希望拥有两个底图（OpenStreetMap “osm” 和 OpenStreetMap.Hot osmHOT 底图）在它们之间切换，以及一个可以开关的叠加层：我们之前创建的城市标记。

现在，让我们创建这些底图并将默认的底图添加到地图中。

var osm = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
	maxZoom: 19,
	attribution: '© OpenStreetMap'
});

var osmHOT = L.tileLayer('https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png', {
	maxZoom: 19,
	attribution: '© OpenStreetMap contributors, Tiles style by Humanitarian OpenStreetMap Team hosted by OpenStreetMap France'});

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

接下来，我们将创建两个对象。一个将包含我们的底图，另一个将包含我们的叠加层。这些只是带有键值对的简单对象。键设置控制中图层的文本（例如，“OpenStreetMap”），而对应的值是图层的引用（例如，osm）。

var baseMaps = {
	"OpenStreetMap": osm,
	"OpenStreetMap.HOT": osmHOT
};

var overlayMaps = {
	"Cities": cities
};

现在，剩下的就是创建一个 图层控制 并将其添加到地图中。创建图层控制时传递的第一个参数是底图对象。第二个参数是叠加层对象。这两个参数都是可选的：您可以通过省略第二个参数来仅传递一个底图对象，或者通过将 null 作为第一个参数来仅传递一个叠加层对象。在每种情况下，省略的图层类型都不会显示给用户选择。

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

请注意，我们向地图添加了 osm 和 cities 图层，但没有添加 osmHOT。图层控制足够智能，可以检测到我们已经添加了哪些图层，并设置相应的复选框和单选框。

还要注意，当使用多个底图时，只应在实例化时将其中一个添加到地图中，但所有底图都应该在创建图层控制时存在于底图对象中。

您也可以在定义图层对象时设置键的样式。例如，以下代码将使 OpenStreetMap.HOT 地图的标签变为红色。

var baseMaps = {
	"OpenStreetMap": osm,
	"<span style='color: red'>OpenStreetMap.HOT</span>": osmHOT
};

最后，您可以动态地添加或删除底图或叠加层。

var crownHill = L.marker([39.75, -105.09]).bindPopup('This is Crown Hill Park.'),
    rubyHill = L.marker([39.68, -105.00]).bindPopup('This is Ruby Hill Park.');
    
var parks = L.layerGroup([crownHill, rubyHill]);
var openTopoMap = L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', {
	maxZoom: 19,
	attribution: 'Map data: © OpenStreetMap contributors, SRTM | Map style: © OpenTopoMap (CC-BY-SA)'
});

layerControl.addBaseLayer(openTopoMap, "OpenTopoMap");
layerControl.addOverlay(parks, "Parks");

现在，让我们 在单独的页面上查看结果 →