Question

完全是新的。尝试使用打开的街道地图底图激活图层控件。我不需要切换底图，但我需要打开/关闭图层。示例传单教程仅显示如何使用用作图层的不同底图。

到目前为止，我的代码看起来像这样：

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

....根本没有快乐：/我如何将叠加层作为图层？

Answer 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

传单中的图层控件，没有底图选项

1 个答案: