图层组和分层控制

本教程将向您展示如何多个图层组合并成一组图层,以及如何使用图层控件来允许用户轻松切换地图上的不同图层。

查看本实例

图层组

假设你有一堆图层,你想在你的代码中把它们合成一组来处理:

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)覆盖层,这是在基础层上放置的所有其他内容。在这个例子中,我们希望有两个基本层(灰度和彩色的基础地图)来切换,以及一个覆盖层来(我们之前创建的城市标记)切换和关闭。

现在让我们创建基本层并在地图上添加默认的层:

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
};

现在,只需要创建一个层控件并将其添加到地图中。创建层控件时传递的第一个参数是基本层对象,第二个参数是覆盖层对象。这两个参数都是可选的:当第二个参数被省略时,您只能传递基本层对象,或者通过将null作为第一个参数传递,如果您只想传递覆盖层对象。无论哪种情况,省略层类型都不会出现供用户选择。

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

注意,我们在地图中添加了grayscale层和cities层,但没有添加streets。层控制足够智能,可以检测我们已经添加了哪些层,并设置了对应的单选框和复选框。

还要注意,当使用多个基本层时,在实例化时只需要在地图添加其中之一即可,但是在创建图层控件时,所有这些基本层对象都应该存在。

最后,在为图层定义对象时,可以为对象的键定义样式。例如,此代码将使灰度地图的标签变为灰色:

var baseMaps = {
    "<span style='color: gray'>Grayscale</span>": grayscale,
    "Streets": streets
};

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