时间戳

首页 > 解决方案 > 图层控件的默认项

javascript - 图层控件的默认项

问题描述

我正在尝试将 Leaflet Layers Control 与基础层一起使用，如文档的示例中所示......而且它不起作用

真实案例：

var bing_options = {
    bingMapsKey: BING_KEY,
    attribution: attribMapBase+' BING',
    culture: 'pt'
};
var 
  lay_mapbox = L.tileLayer(MAPBOX_URL+MAPBOX_KEY, {
    attribution: attribMapBase+' MapBOX',
    id: 'mapbox.streets'
  }),
  lay_bing = L.tileLayer.bing(bing_options)
;

var mymap = L.map('mapid', {
    center: [-23.56149,-46.655953],
    zoom: 20,
    layers: [lay_mapbox, lay_bing]
});
L.control.layers({
    "Standard": lay_mapbox,
    "BING": lay_bing
}).addTo(mymap);
lay_mapbox.addTo(mymap); //  set as default... NOT WORKING!

请看最后一条命令的使用，它不起作用。

标签： javascriptleaflet

解决方案

通过您的真实案例MCVE，现在可以了解您的问题并为您提供与您的具体情况相关的帮助。

所以让我们看看提到的文档/教程：（强调我的）

另请注意，当使用多个基础图层时，在实例化时只应将其中一个添加到地图中，但在创建图层控件时，它们都应存在于基础图层对象中。

现在让我们看看有关layers地图实例化选项的文档：

最初将添加到地图的图层数组

所以当你这样做时：

var mymap = L.map('mapid', {
  center: [-23.56149,-46.655953],
  zoom: 20,
  layers: [lay_mapbox, lay_bing] // Offending line
});

...您实际上是在向地图添加多个基础层。由于它们已经在地图上，lay_mapbox.addTo(mymap)因此不会改变任何东西。

只需不要一开始就添加所有这些，然后您可以有选择地选择在启动时应该可见的一个：

var
  lay_mapbox = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
  }),
  lay_bing = L.tileLayer('https://{s}.tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
  });

var mymap = L.map('mapid', {
  center: [-23.56149, -46.655953],
  zoom: 20,
  // layers: [lay_mapbox, lay_bing] // Offending line
});
L.control.layers({
  "Standard": lay_mapbox,
  "BING": lay_bing
}, null, {
  collapsed: false
}).addTo(mymap);
lay_mapbox.addTo(mymap); //  set as default
html,
body,
#mapid {
  margin: 0;
  height: 100%;
}
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet-src.js" integrity="sha512-+ZaXMZ7sjFMiCigvm8WjllFy6g3aou3+GZngAtugLzrmPFKFK7yjSri0XnElvCTu/PrifAYQuxZTybAEkA8VOA==" crossorigin=""></script>

<div id="mapid"></div>

现在可能误导您的是，在上述教程中，该示例使用 maplayers选项最初添加 1 个基础层和 1 个叠加层：

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

...而 Layers Control 提供了 2 个基础层，其中 1 个与上述最初添加的层相同：

var baseMaps = {
  "Grayscale": grayscale, // Initially added to the map
  "Streets": streets // Left alone
};

var overlayMaps = {
  "Cities": cities // Initially added to the map
};

L.control.layers(baseMaps, overlayMaps).addTo(map);

推荐阅读