在图层控件中设置 Leaflet Overlay Off

2022-01-12 00:00:00 leaflet javascript html css

有人可以帮我弄清楚如何在将传单添加到地图时默认设置OFF吗?例如，在地图上设置CITIES图层OFF，如下面的代码所示.关键是默认情况下只有 STATES 层 ON 和 CITIES OFF.

Could someone help me to figure out how to set a leaflet overlay OFF by default when adding it to the map, please? For instance, setting the CITIES layer OFF on the map, as shown in the code below. The point is to have only the STATES layer ON and the CITIES OFF by default.

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

推荐答案

你不应该首先将它添加到地图中.在您发布该代码之前的某处，您初始化了城市图层并将其添加到地图中.否则它不会出现在地图上.例如:

You should not add it to the map in the first place. Somewhere before that code you posted you initialize the cities layer and add it to the map. Otherwise it wouldn't be on the map. For example:

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

//Or

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

现在，当您将其添加到图层控件时，控件会自动选中它的复选框，因为它已经添加到您的地图中.

Now when you add that to your layer control it's checkbox is automaticly checked by the control because it's already added to your map.

在注释后添加示例以进行澄清.这是一个添加到地图的图层组，另一个没有.两者都添加到图层控件中.在控件中只检查添加到地图的那个:

Example added after comment for clarification. Here is one layergroup added to the map and the other is not. Both are added to the layer control. Only the one that is added to the map is checked in the control:

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>

相关文章