Leaflet.js - 地図ビュー上のgeoJSON座標に合わせる

Question

私は、外部のJSONファイルから得たポイントと線ストリングを持つleaflet.jsマップを持っています。

追加した場合： map.setView（new L.LatLng（0,0）、10）;

地図の緯度と経度を0,0に合わせます。マップセンターとズームがJSONのすべてのポイントにフィットするように設定するにはどうすればよいですか？

Answer 1

getBoundsメソッドを持つFeatureGroupにすべてのレイヤーを追加できます。したがって、あなたはちょうど言うことができるはずです

L.FeatureGroupのgetBoundsメソッドは、少なくとも（少なくとも最新のバージョンではなく）0.3.1のmasterブランチでのみ利用できます。

Answer 2

自分の出発地から目的地までの道順をユーザーに示すときにこれを行う必要がありました。私は、あなたは、単にmap.fitBoundsがL.LatLng

http://leafletjs.com/reference.html#latlngbounds

Answer 3

同様の配列だけでL.LatLngBoundsオブジェクトを取るので、これは動作します

map.fitBounds(directionLatLngs); 

を呼び出すことができますdirectionLatLngsと呼ばれるL.LatLngの配列に方向の私のリストを保存します私の場合。 マーカをすべてGeoJsonから描画しました。だから私はボタンをクリックすると繰り返し呼び出される関数を書いた。それがあなたの要求に合っていれば試してみてください。

function bestFitZoom() 
    { 
     // declaring the group variable 
     var group = new L.featureGroup; 

     // map._layers gives all the layers of the map including main container 
     // so looping in all those layers filtering those having feature 
     $.each(map._layers, function(ml){ 

      // here we can be more specific to feature for point, line etc.    
      if(map._layers[].feature) 
      { 
       group.addLayer(this) 
      } 
     }) 

     map.fitBounds(group.getBounds()); 
    } 

マップ/マーカーの状態が変更されても、マーカー/レイヤーの最新/現在の状態が取得されることを最大限に活用することができます。このメソッドが呼び出されるたびに、すべてのレイヤーが適度なズームレベルで表示されます。