リーフレットマップは常に同じWMSタイルレイヤーの中央にロードされるとは限りません

Question

AngularJSとLeafletJSライブラリを使用したIonicフレームワークを使用してアプリケーションを開発しています。

地図を初めて読み込むときは、正しく中央揃えで表示されます。

しかし、アプリの別のビューに変更してマップビューに戻ると、WMSタイルレイヤーの表示が中央からずれるため、マップの左上隅に表示されている少ししか表示されません。

ここでは、マップを作成し、WMSのタイルレイヤをロードするコードの抜粋です：

function crearPlano($scope, $http, infoService, sharedProperties, poisService, createModal) { 

    var building = localStorage.building, 
     floor = localStorage.planta, 
     floor_id = building + floor, 
     building_id = floor_id.replace(/\./g,"_").toLowerCase(); 

    var parameters = 
    [ 
     'proyecto/ows', 
     'service=WFS', 
     'version=1.0.0', 
     'request=GetFeature', 
     'typeName=proyecto:'+building_id, 
     'srsName=epsg:4326', 
     'outputFormat=application/json' 
    ] 
    var url = APP_CONSTANTS.URI_Geoserver_1 + 'proyecto/ows?' + parameters.join('&'); 

    $.ajax({ 
     url : url, 
     type: 'GET', 
     dataType : 'json', 
     crossDomain: true, 
     headers: { 'Access-Control-Allow-Origin': '*' }, 
     success: function(data) { 
      handleJson(data, sharedProperties, poisService, createModal, function(map){ 
       sharedProperties.setMap(map); 
      }); 
     } 
    }); 

    function handleJson(data, floor_id, sharedProperties, poisService, createModal, callback) { 
     console.log("handleJson", data, floor_id); 
     var map = sharedProperties.getMap(), 
      coordinates = data.features[0].geometry.coordinates[0][0][0], 
      floorCoordinates = new L.latLng(coordinates[1], coordinates[0]); 

     //Remove previous plan layers 
     if(!(typeof map == 'undefined')) { map.remove(); } 

     var imageLayer = new L.tileLayer.wms(APP_CONSTANTS.URI_Geoserver_2 + "sigeuz/wms", 
     { 
      layers: 'sigeuz:vista_plantas', 
      maxZoom: 25, 
      zIndex: 5, 
      viewparams : 'PLANTA:'+floor_id, 
      format: 'image/png', transparent: true, attribution: floor_id 
     }); 

     console.log("Before create map --> Center", JSON.stringify(floorCoordinates)); 
     console.log("Before create map --> MaxBounds", JSON.stringify(L.geoJson(data).getBounds())); 

     map= new L.map('plan' 
      ,{ 
       crs: L.CRS.EPSG3857, 
       layers: [imageLayer] 
      } 
     ).setView(floorCoordinates, 20); 

     console.log("After create map --> Center", JSON.stringify(plano.getCenter())); 
     console.log("After create map --> Bounds", JSON.stringify(plano.getBounds())); 

     callback(map); 
    } 
} 

はなぜ地図の読み込み中は、初回のみを中心としたが、後にずれていますか？

作成したマップの作成およびマップのデータにパラメータとして渡されたデータをデバッグするために、コードにコンソールログを追加しました。このようにして、前に説明した両方の状況で何かが変更されたかどうかを比較できます。図から分かるように

Before create map --> Center {"lat":41.64063807836347,"lng":-0.90146666131869} 
Before create map --> MaxBounds {"_southWest":{"lat":41.64061302810611,"lng":-0.9015017606364195},"_northEast":{"lat":41.64079735418267,"lng":-0.9012732012812255}} 

After create map --> Center {"lat":41.6406381751715,"lng":-0.9014656782889374} 
After create map --> Bounds {"_southWest":{"lat":41.64032848115259,"lng":-0.9017432869219788},"_northEast":{"lat":41.640947867702096,"lng":-0.9011880696558963}} 


Before create map --> Center {"lat":41.64063807836347,"lng":-0.90146666131869} 
Before create map --> MaxBounds {"_southWest":{"lat":41.64061302810611,"lng":-0.9015017606364195},"_northEast":{"lat":41.64079735418267,"lng":-0.9012732012812255}} 

After create map --> Center {"lat":41.64063807836347,"lng":-0.90146666131869} 
After create map --> Bounds {"_southWest":{"lat":41.640637639043334,"lng":-0.9014663100242616},"_northEast":{"lat":41.640637639043334,"lng":-0.9014663100242616}} 

、地図作成に中心点と最大境界として渡されたデータは、両方の場合で同じであるが、マップが作成された後、マップ座標の中心と：これは結果であります第1の状況から第2の状況への境界が少し異なる。

私はそれがなぜ変わるか分かりません。

Answer 1

地図コンテナが潜在的にサイズを変更するたびにinvalidateSize()を実行します。これには、jquery、ionicなどを介して隠す/表示することが含まれます。