Leaflet - Zoom/Schwenken auf Layer-Extent beim Umschalten von Layern

Question

Ich arbeite an einer Bus-Routenkarte und habe mehrere Routen, die Benutzer ein- und ausschalten können. Ich möchte herausfinden, wie man zoomen/schwenken kann, so dass die ausgewählte Route (oder Routen) vollständig auf dem Bildschirm angezeigt wird, wenn sie ausgewählt wird. (Einige sind außerhalb des Bildschirms mit der anfänglichen Zoomstufe).

Hier ist die Magie so weit:

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); 

ich mehrere Kombinationen von map.fitBounds ausprobiert habe, und kann einfach nicht scheinen, es zu bekommen.

Gibt es auch eine Möglichkeit, der Kontrollbox einen Titel und Untertitel hinzuzufügen? Ich möchte die contols haben wie folgt aussehen:

Tag
[] Route 10
[] Route 11
Nacht
[] Route 12 ... etc

Answer 1

Sie sollten einen Hörer anhängen auf der Karte "overlayadd" Ereignis. Dann können Sie Ihre map.fitBounds() mit der event.layer.getBounds() tun, da Ihre Ebenen GeoJSON-Gruppen sind.

Zum Organisieren Ihrer Ebenen im Ebenen-Steuerelement ist dies mit dem Standard-Steuerelement nicht möglich. Aber Sie können einen Blick auf Leaflet plugins werfen.