web-dev-qa-db-ja.com

Leaflet.js-geoJSON座標をマップビューに合わせる

外部JSONファイルからのポイントとラインストリングを含むleaflet.jsマップがあります。

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

地図は緯度と経度0,0を中心に配置されます。マップの中心とズームがJSONのすべてのポイントに合うように設定するにはどうすればよいですか？

javascriptgeojson
19
James

getBoundsメソッドを持つFeatureGroupにすべてのレイヤーを追加できます。したがって、myMap.fitBounds(myFeatureGroup.getBounds());とだけ言うことができるはずです。

L.FeatureGroupのgetBoundsメソッドは、少なくとも現時点では、マスターブランチ（最新バージョンの0.3.1ではない）でのみ使用できます。

21
Jason

私と同様のケース。 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());
    }

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

5
Kedar.Aitawdekar

出発地から目的地までのユーザーの道順を表示するときに、これを行う必要がありました。方向のリストをdirectionLatLngsというL.LatLngの配列に格納します。

map.fitBounds(directionLatLngs);

これが機能するのは、map.fitBoundsがL.LatLngBoundsの配列であるL.LatLngオブジェクトを受け取るためです。

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

1
jeff_kile