Leaflet - масштабирование / панорамирование до экстента слоя при переключении слоев

Question

Я работаю над картой автобусных маршрутов, и у меня есть несколько маршрутов, которые пользователи могут включать и выключать. Я хотел бы выяснить, как увеличить / панорамировать, чтобы выбранный маршрут (или маршруты) были полностью на экране при выборе. (некоторые за кадром с начальным уровнем масштабирования).

Вот волшебство до сих пор:

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" событие. Тогда вы можете сделать свой map.fitBounds() с использованием event.layer.getBounds(), так как ваши слои являются группами GeoJSON.

Что касается организации ваших слоев в Layers Control, это невозможно при использовании элемента управления по умолчанию. Но вы можете взглянуть на плагины Leaflet.