リーフレット1.0 fitBoundsがajaxの読み込みで期待どおりに機能しない

Question

私のリーフレットに問題があります。

私は、ajaxでロードされた複数のgeoJsonファイル（7つまで）を持っています。すべてのファイルがロードされた後にfitBoundsにしたいと思います。

私はこのようなものを持っている：

function BoundsObject() { 
    this.boundsArray = []; 
} 

function addGeoJsonToMap(map, geojson, boundsObject) { 
var newLayer = L.geoJson(geojson); 
map.addLayer(newLayer); 
var current_bounds = newLayer.getBounds(); 
    var southwest = current_bounds.getSouthWest(); 
    var northeast = current_bounds.getNorthEast(); 
    boundsObject.boundsArray.push([[southwest.lat, southwest.lng], [northeast.lat, northeast.lng]]); 
} 
function downloadFile(fileurl, map, boundsObject) { 
return $.ajax({ 
     url: url, 
     dataType: "json"}).done(function(geojson) { 
     if (geojson) { 
      addgeojsontomap(map, geojson, boundsObject); 
     } 
    }); 
} 

これは私のマップがどのように見えるかです：

<div id="someid" class="my-leaflet-map" data-urls="encodedurlformaps" data-height="800px"></div> 

そして、私は初期化時にマップを構築しよう：

$(function() { 
var gps_data = []; 

$(".my-leaflet-map").each(function(){ 
     var data = $(this).data(); 
     if (data['urls']) { 
      data['urls'] = window.decodeURIComponent(data['urls']).split(','); 
      data['map_id'] = $(this).attr("id"); 
      $(this).css("height", data['height']); 
      gps_data.push(data); 
     } 
    }); 
if (gps_data.length > 0) { 
     for (var i=0; i<gps_data.length; ++i){ 
      var ajax_calls = []; 
      var boundsObjectForEachMap = new BoundsObject(); 
     var map = L.map(gps_data[i]['map_id']); 
     L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { 
       attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' 
}).addTo(map); 
      for (var j=0; j<gps_data[i]['urls'].length; ++j){ 
       ajax_calls.push(
        downloadFile(
         gpx_data[i]['urls'][j], map, boundsObject) 
       ); 
      } 
     $.when.apply(this, ajax_calls).done(function(){ 
      map.fitBounds(boundsObject.boundsArray); 
     } 
     } 
    } 
} 

それをlocalhostマップを使って作業しています...インターネットにプッシュすると動作しません。 私は境界を持っている：（そう多分にGeoJSONがキャッシュ内にある） ウェブブラウザをリフレッシュ

：

[[29.9264, -118.24368], 
[34.14555, -90.07148], 
[25.76168, -90.07153], 
[30.79488, -80.19179], 
[25.76168, -81.73198], 
[36.85298, -75.97028], 
[38.90716, -77.03691], 
[40.7349, -74.0057], 
[36.83468, -77.5785], 
[38.90719, -75.97798], 
[23.18892, -118.24368], 
[34.12527, -102.55278], 
[3.45165, -102.55971], 
[23.64973, -76.53199], 
[-50.09649, -81.22001], 
[3.45165, -67.20001]] 

まず時間が、それは、そのようなfitBoundsを与える開い

私の推測では、それはあるかもしれないということです遅延したAJAXの何かが間違っていますが、私は何を知りません ここにこれが生産中です： http://velomelon.com/our-route/

ありがとうございました！

Answer 1

記録的には、OPの詳細はLeaflet issue #4739にあります。

ないあなたがやろうとしている正確に何をしてください、リーフレットは正確にあなたのコードは、それが何を要求するように動作しますように私には思える：

• コードは、それぞれが異なるマーカーを返す、いくつかのAJAX要求を送信します南北アメリカのさまざまな場所でポリラインを作成できます。各AJAX成功で
• 、コードのみを受信した層の上にfitBoundsを行う（にGeoJSON応答から変換された）したがって

var newLayer = L.geoJson(geojson); 
map.fitBounds(newLayer.getBounds()); 

• 、アメリカにわたって異なる場所にマップパン、これを与え"ランダム"の印象fitBounds効果。
• 最後に、最後のAJAXリクエストが解決され、すべてのリクエストに遅延されたjQuery.whenが実行され、マップがすべてのレイヤに適合します。あなたの中間ステップのためにそう

map.fitBounds(boundsObjectForEachMap.featureGroup.getBounds()); 

、なぜ単にフィッティング境界あなたの更新boundsObjectForEachMap.featureGroupに、マップではなく、それが最後に受信しただけで何よりも、あなたはすでに受け取ったものをすべて表示されるように？ そのようにして、最後のAJAXリクエストデータに属する小さな部分だけでなく、「ランダム」な場所に徐々に縮小してコンテンツを表示します。最後のAJAXの成功は、データ/層のあなたの全体のセットを完了し、そのfitBoundsしたがって、すでにあなたの全体の内容が表示されますので、

また、あなたは、jQuery.whenにあなたの最後のfitBoundsを取り除くことができるようになります。

JSFiddle更新：この最後のAJAX呼び出しは常に最後と呼ばれるが、この最終関数で呼び出さfitBoundsが常に動作していない（が、エラーを返していない）されたクロム/ Firefoxでhttp://jsfiddle.net/nyhh0g2w/22/