leaflet图层组和图层控制-关于如何管理图层组和使用图层切换控件的教程。

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

图层组

假设您有一堆想要组合成一个组的层，以便在您的代码中将它们作为一个来处理：

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]);

够简单！现在您有了一个城市图层，它将您的城市标记组合到一个图层中，您可以立即从地图中添加或删除。

图层控制

Leaflet 有一个不错的小控件，可让您的用户控制他们在地图上看到的图层。除了向您展示如何使用它之外，我们还将向您展示图层组的另一种方便用途。有两种类型的图层：(1) 互斥的基础图层（一次只能在地图上看到一个），例如平铺层和 (2) 叠加层，这是您放置在基础层上的所有其他内容。在这个例子中，我们想要有两个基础层（一个灰度和一个彩色基础地图）来切换，以及一个覆盖来打开和关闭：我们之前创建的城市标记。现在让我们创建这些基础图层并将默认图层添加到地图中：

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

var streets = L.tileLayer(mapboxUrl, {id: 'mapbox/streets-v11', tileSize: 512, zoomOffset: -1, attribution: mapboxAttribution});

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

接下来，我们将创建两个对象。一个将包含我们的基础层，一个将包含我们的叠加层。这些只是带有键/值对的简单对象。键设置控件中图层的文本（例如“Streets”），而相应的值是对图层的引用（例如街道）。

var baseMaps = {
    "OpenStreetMap": osm,
    "Mapbox Streets": streets
};

var overlayMaps = {
    "Cities": cities
};

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

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

请注意，我们在地图中添加了 osm 和城市图层，但没有添加街道。图层控件足够智能，可以检测我们已经添加了哪些图层，并设置了相应的复选框和单选框。另请注意，当使用多个基础图层时，在实例化时只应将其中一个添加到地图中，但在创建图层控件时，它们都应存在于基础图层对象中。您还可以在为图层定义对象时设置键的样式。例如，此代码将使灰度图的标签变为灰色：

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

最后，您可以动态添加或删除基础层或叠加层：

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 satellite = L.tileLayer(mapboxUrl, {id: 'MapID', tileSize: 512, zoomOffset: -1, attribution: mapboxAttribution});

layerControl.addBaseLayer(satellite, "Satellite");
layerControl.addOverlay(parks, "Parks");

4.5 2 投票数

文章评分