在图层控件中设置Leaflet Overlay Off

时间:2017-09-04 21:04:09

标签: javascript css html5 leaflet

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

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

1 个答案:

答案 0 :(得分:8)

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

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);
&#13;
body {
    margin: 0;
}

html, body, #leaflet {
    height: 100%;
}
&#13;
<!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>
&#13;
&#13;
&#13;