Leaflet

Question

我正在制作公交路线图，并且有几条路线可供用户打开和关闭。我想弄清楚如何 zoom/pan 以便所选路线（或路线）在选择时完全显示在屏幕上。（有些在初始缩放级别下不在屏幕上）。

到目前为止，这是魔术：

var busRoute10 = L.geoJson([route10, busStop3, busStop4],{onEachFeature: onEachFeature});
var busRoute11 = L.geoJson([route11, busStop19, busStop16, busStop18, busStop22],{onEachFeature: onEachFeature});
var busRoute12 = L.geoJson([route12, busStop23, busStop42, busStop43, busStop15, busStop28, busStop27, busStop22, busStop16],{onEachFeature: onEachFeature});
var busRoute13 = L.geoJson([route13, busStop44, busStop31, busStop25, busStop26, busStop36],{onEachFeature: onEachFeature});


var baseLayers = {
"Route 10": busRoute10,
"Route 11": busRoute12,
"Route 12<hr>": busRoute14,
"Route 13": busRoute20,
};

L.control.layers(null, baseLayers, {collapsed: false}).setPosition ('topright').addTo(map);

我尝试了 map.fitBounds 的多种组合，但似乎无法理解。

另外，请问有没有办法给控制框加上标题和字幕？我想让控件看起来像：

天
[]10号公路
[]11号公路
夜
[]12 号公路...等等

Answer 1

您应该在地图的 "overlayadd" 事件上附加一个侦听器。然后您可以使用 event.layer.getBounds() 执行 map.fitBounds()，因为您的层是 GeoJSON 组。

至于在图层控件中组织图层，默认控件无法实现。但是你可以看看 Leaflet plugins.

Leaflet - Zoom/Pan 切换图层时图层范围

Leaflet - Zoom/Pan to Layer Extent when Toggling Layers

fitbounds