传单中的图层控制，没有底图选项答案

【问题标题】：layer control in leaflet with no basemap option传单中的图层控制，没有底图选项
【发布时间】：2026-01-12 05:30:01
【问题描述】：

在这方面是全新的。尝试使用开放的街道地图底图激活图层控件。我不需要切换底图，但我确实需要打开/关闭图层。示例传单教程仅展示了如何将不同的底图用作图层。

到目前为止，我的代码如下所示：

<html>

<head>
  <title>Solomon Islands Tourist Map</title>
  <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />

  <script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js'></script>
  <script type='text/javascript' src='http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js?2'></script>
  <script src="jquery-2.1.1.min.js"></script>
</head>

<body>



  <div id="map" style="height: 100%; border: 1px solid #AAA;"></div>
  <script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
  <script>
    var Islands = new L.LayerGroup();

    L.marker([-9.616, 159.85]).addTo(Islands);

    var Basemap = L.tileLayer('http://{s}.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.png', {
      attribution: '&copy; <a href="http://osm.org/copyright" title="OpenStreetMap" target="_blank">OpenStreetMap</a> contributors | Produced by <a href="http://haloscotia.com/index.html" title="Halo Scotia" target="_blank">Halo Scotia</a><a href="http://haloscotia.com/index.html" title="Halo Scotia" target="_blank"><img src="HaloScotia.png" alt="Halo Scotia" style="width:120px;height:30px;"></a>',
      subdomains: ['otile1', 'otile2', 'otile3', 'otile4']
    }).addTo(map);

    var map = L.map('map', {
      center: [-9.616, 159.85],
      minZoom: 6,
      zoom: 6
      layers: [Islands, Basemap]
    });

    var Base = {
      "Basemap": Basemap
    };

    var overlays = {
      "Islands": Islands
    };


    L.control.layers(null, overlays).addTo(map);
  </script>

</body>

</html>

....一点也不快乐：/我如何将叠加层作为图层？

【问题讨论】：

如果我知道了，您现在只想使用您的“Islands”图层，或者能够删除和添加“Islands”和“Basemap”图层，是吗？？

标签： leaflet controls layer

【解决方案1】：

zoom: 6 后面缺少逗号 (,)。

在分配后一个变量并创建映射之前，您不能将Basemap 添加到map。只需删除.addTo(map)。

您最后的代码指令L.control.layers(null, overlays).addTo(map); 将正确创建一个图层控件，没有单选按钮来切换底图，但带有复选框来显示/隐藏您的叠加层。

var Islands = new L.LayerGroup();

L.marker([-9.616, 159.85]).addTo(Islands);

var Basemap = L.tileLayer('http://{s}.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="http://osm.org/copyright" title="OpenStreetMap" target="_blank">OpenStreetMap</a> contributors | Produced by <a href="http://haloscotia.com/index.html" title="Halo Scotia" target="_blank">Halo Scotia</a><a href="http://haloscotia.com/index.html" title="Halo Scotia" target="_blank"><img src="HaloScotia.png" alt="Halo Scotia" style="width:120px;height:30px;"></a>',
  subdomains: ['otile1', 'otile2', 'otile3', 'otile4']
})/*.addTo(map)*/;

var map = L.map('map', {
  center: [-9.616, 159.85],
  minZoom: 0,
  zoom: 6,
  layers: [Islands, Basemap]
});

var Base = {
  "Basemap": Basemap
};

var overlays = {
  "Islands": Islands
};


L.control.layers(null, overlays).addTo(map);

演示：http://plnkr.co/edit/KbnQr6CBbAXHKrSVCPze?p=preview

【讨论】：