更改 leafletjs 中的默认图层

Question

在 https://leafletjs.com/examples/layers-control/example.html 中有两个图层 - 灰度和街道。它默认为灰度，但如何将默认设置更改为街道？

在那个例子中是这样的：

    var map = L.map('map', {
        center: [39.73, -104.99],
        zoom: 10,
        layers: [grayscale, cities]
    });

我尝试交换层中变量的顺序，但没有任何效果。

还有这个：

    var baseLayers = {
        "Grayscale": grayscale,
        "Streets": streets
    };

我也尝试过反转它，但没有成功。

我什至尝试重命名图层的名称，认为它可以按字母顺序完成，但没有这样的运气。

有什么想法吗？

Answer 1

这与添加到地图中的图层有关。因此，从地图实例中删除数组图层并将街道图层添加到地图中。这将定义预选图层。

<!DOCTYPE html>
<html>

  <head>

    <title>Layers Control Tutorial - Leaflet</title>

    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />

    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="" />
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>


    <style>
      html,
      body {
        height: 100%;
        margin: 0;
      }

      #map {
        width: 600px;
        height: 400px;
      }

    </style>


  </head>

  <body>

    <div id='map'></div>

    <script>
      var cities = L.layerGroup();

      L.marker([39.61, -105.02]).bindPopup('This is Littleton, CO.').addTo(cities),
        L.marker([39.74, -104.99]).bindPopup('This is Denver, CO.').addTo(cities),
        L.marker([39.73, -104.8]).bindPopup('This is Aurora, CO.').addTo(cities),
        L.marker([39.77, -105.23]).bindPopup('This is Golden, CO.').addTo(cities);


      var mbAttr = 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, ' +
        'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
        mbUrl = 'https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw';

      var map = L.map('map', {
        center: [39.73, -104.99],
        zoom: 10,

      });

      var grayscale = L.tileLayer(mbUrl, {
        id: 'mapbox/light-v9',
        tileSize: 512,
        zoomOffset: -1,
        attribution: mbAttr
      });

      var streets = L.tileLayer(mbUrl, {
        id: 'mapbox/streets-v11',
        tileSize: 512,
        zoomOffset: -1,
        attribution: mbAttr
      }).addTo(map)



      var baseLayers = {
        "Streets": streets,
        "Grayscale": grayscale
      };

      var overlays = {
        "Cities": cities
      };

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

    </script>



  </body>

</html>

更改 leafletjs 中的默认图层

changing the default layer in leafletjs

leaflet