代码之家 › 专栏 › 技术社区 › neubert

更改JS中的默认图层

leaflet

neubert · 技术社区 · 3 年前

在里面 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
    };

我也试图扭转这种局面,但没有成功。

我甚至试着重新命名图层的名称,认为这可能是按字母顺序进行的,但没有这样的运气。

有什么想法吗?

0 回复 | 直到 3 年前

kboul 3 年前

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

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