リーフレット - レイヤーをトグルするときにレイヤーエクステントをズーム/パンする

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の複数の組み合わせを試してみた、とちょうどそれを得るように見えることはできません。

また、コントロールボックスにタイトルとサブタイトルを追加する方法はありますか？私はcontolsがどのように見えるしたいのですが：

日
[]国道10
[]国道11
をナイト
[]など

Answer 1

ルート12を...あなたはリスナーを添付しなければなりません地図上の"overlayadd"イベント。次に、レイヤーがGeoJSONグループであるため、event.layer.getBounds()を使用してmap.fitBounds()を実行できます。

レイヤーコントロールでレイヤーを整理する場合、デフォルトのコントロールではできません。しかし、Leaflet pluginsを見ることができます。