Leaflet与leaflet-provider图层控件默认地图未选中问题求助

嗨，我来帮你捋清楚这个问题的原因和解决办法～

问题根源 #

你现在遇到的情况，是因为你创建了两个完全独立的OpenTopoMap图层实例：

• 一个是通过L.tileLayer.provider('OpenTopoMap').addTo(map)直接添加到地图上的
• 另一个是放在baseMaps对象里给图层控件用的

Leaflet的图层控件只会关联那些被注册到控件内的图层实例，你直接加到地图的那个和控件里的不是同一个对象，所以控件自然不会默认选中对应的选项。不过因为两个图层都是同一个瓦片源，所以你手动选中控件里的OpenTopoMap时，看起来地图没变化——本质是替换成了另一个一模一样的图层而已。

解决办法 #

很简单，只需要复用同一个图层实例就行：先把默认图层的实例存到变量里，然后既把它加到地图，也把它放进baseMaps对象中。

修改后的代码 #

var map = L.map('osm_map', { zoom: 4, zoomControl: false, minZoom: 2, maxZoom: 18 });

// 先创建默认图层的实例并保存
var openTopoMapLayer = L.tileLayer.provider('OpenTopoMap');

var baseMaps = {
    'OpenTopoMap': openTopoMapLayer, // 复用同一个实例
    'OpenStreetMap.France': L.tileLayer.provider('OpenStreetMap.France')
};

openTopoMapLayer.addTo(map); // 使用同一个实例添加到地图
L.control.layers(baseMaps).addTo(map);
L.control.zoom({position: 'topleft'}).addTo(map);

L.marker([57.150,-6.100]).addTo(map);
L.marker([57.500,-6.450]).addTo(map);

map.fitBounds([
    [57.150,-6.100],
    [57.500,-6.450]
]);

这样修改后，图层控件里的OpenTopoMap选项和地图上加载的是同一个图层实例，控件就会自动默认选中这个选项了，切换其他图层的功能也能正常工作。

内容的提问来源于stack exchange，提问作者vincent3569