問題

誰かがマップに追加するときにデフォルトでリーフレットオーバーレイをOFFに設定する方法を理解するのを手伝ってもらえますか?たとえば、以下のコードに示すように、地図上にCITIESレイヤーをOFFに設定します。ポイントは、デフォルトでSTATESレイヤーと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);
 

  ベストアンサー

最初に地図に追加するべきではありません。そのコードの前に、都市層を初期化して地図に追加します。それ以外の場合は、地図上にはありません。例えば:

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

//Or

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

これをレイヤーコントロールに追加すると、すでにマップに追加されているため、チェックボックスはコントロールによって自動的にチェックされます。

明確化のためのコメントの後に追加された例。 1つのレイアーグループがマップに追加され、もう1つは追加されません。どちらもレイヤーコントロールに追加されます。マップに追加されたもののみがコントロールでチェックされます。

 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/[email protected]/dist/leaflet.css" />
  </head>
  <body>
    <div id="leaflet"></div>
    <script type="application/javascript" src="//unpkg.com/[email protected]/dist/leaflet.js"></script>
  </body>
</html> 

  同じタグがついた質問を見る

javascriptcsshtml5leaflet