在图层控制中关闭 Leaflet 叠加层

Question

在图层控制中关闭 Leaflet 叠加层

9

请问有人能帮我解决问题吗？我想知道如何在将叠加层添加到地图上时，默认将其设置为关闭。例如，像下面的代码所示，在地图上将城市层关闭。重点是只有州层打开，而城市层默认为关闭。

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

var overlayMaps = {
    "Cities": cities, // Need to set OFF over the map
    "States": states  // Need to set ON  over the map
};

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

- HelpOverFlow

3个回答

0

如果你想默认关闭图层，可以在将所有图层添加到地图后，将输入元素的选中状态设置为false，并且在点击任意一个图层的输入元素后使其生效。

例如：我只想保留第一个图层，并默认关闭其他图层。

// add the all layer to map
L.control.layers(basemaps, markerGroups).addTo(map);
// this can get all input element of layer
var click_elements = document.getElementsByClassName("leaflet-control-layers-selector");
// set all layers off in addtion to the first layer
for (let i = 1;i < click_elements.length;i++) {
     click = click_elements[i];
     click.checked = false;
}
// and finally, make a click event
var first_layer = click_elements[0];
first_layer.click();

- tommygood

0

我无法投票点赞，但我同意你的贡献，它很有效！我的代码：

var cities = L.layerGroup().addTo(mymap);

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

var poligons = L.layerGroup();
L.polygon([[41.5040,1.8047],[41.5037,1.8237],[41.4935,1.82467],[41.4955,1.80210]]).bindPopup('A great polygon').addTo(poligons);

var overlays = {
    "Cities": cities,
    "<span style='color:red;'>Polígons<span>": poligons
};

L.control.layers(null,overlays,{collapsed:false}).addTo(mymap);

- Jordi Mestres

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- iH8 · Accepted Answer

你不应该在第一次添加到地图上。在您发布的代码之前的某个地方，您初始化城市层并将其添加到地图中。否则它不会显示在地图上。例如：

var cities = new L.GeoJSON(...);
cities.addTo(map);

//Or

var cities = new L.GeoJSON(...);
map.addLayer(cities);

现在，当您将其添加到图层控件中时，由于已经添加到地图中，它的复选框会被控件自动选中。

以下示例是为了澄清评论而添加的。这里有一个添加到地图中的图层组，另一个没有添加。两者都已添加到图层控制器中。只有添加到地图中的那个才会在控制器中被选中：

var map = new L.Map('leaflet', {
    center: [0, 0],
    zoom: 0,
    layers: [
        new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            'attribution': 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'
        })
    ]
});

// LAYERGROUP WITH ADD TO MAP
var layerGroup1 = new L.LayerGroup([
    new L.Marker([25, 25])
]).addTo(map);

// LAYERGROUP WITHOUT ADD TO MAP
var layerGroup2 = new L.LayerGroup([
    new L.Marker([-25, -25])
]);

var layerControl = new L.Control.Layers(null, {
    'Group 1': layerGroup1,
    'Group 2': layerGroup2
}).addTo(map);

body {
    margin: 0;
}

html, body, #leaflet {
    height: 100%;
}

<!DOCTYPE html>
<html>
  <head>
    <title>Leaflet 1.0.3</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link type="text/css" rel="stylesheet" href="//unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
  </head>
  <body>
    <div id="leaflet"></div>
    <script type="application/javascript" src="//unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
  </body>
</html>