web-dev-qa-db-ja.com

コンテナのサイズ変更時にリーフレットマップのサイズを変更する

リーフレットマップを含む_<div>_があります。特定のイベントが発生すると、_<div>_の高さが変更されます。古いセンターがサイズ変更された小さいまたは大きいマップの中央にくるように、マップを周囲の_<div>_の新しい寸法にサイズ変更したいです。 invalidateSize()関数を使用してみましたが、まったく機能しないようです。 _map-container-resize_イベントの後にマップのサイズを変更して中央に配置するにはどうすればよいですか？

_$mapContainer.on('map-container-resize', function () {
   map.invalidateSize(); // doesn't seem to do anything
});
_

より多くのコンテキストを与えるために編集：

マップコンテナーの初期スタイルは

_#map-container {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;

    transition: height 0.5s ease-in-out;
}
_

ユーザーが特定のボタンをクリックすると、ページの下部に別のパネルが表示され、マップコンテナーの高さが100％未満（たとえば80％）に減少します。

このボタンをクリックすると、map-container-resizeイベントがトリガーされるため、マップのサイズを変更し、古い（つまり、サイズ変更が行われる前の）中心にセンターを合わせることができます。次に、マップ自体も初期の高さの80％にサイズ変更する必要があります。

invalidateSizeのAPiドキュメントは、私が欲しかったもののようです：

「マップコンテナーのサイズが変更されたかどうかを確認し、変更された場合はマップを更新します[...]」

ただし、invalidateSizeの呼び出しの前後にgetSize関数の出力を見てみると、違いはありません。マップは古いサイズのままです。

javascriptresizeleaflet
39
rkcpi

問題は、#map-containerdivのサイズ変更がcss遷移を介して行われることです。 invalidateSizeの呼び出しが発生したため、リーフレットマップが周囲のdivの寸法の変更を認識できない場合、移行はまだ開始されておらず、終了もされていません。

map-container-resizeイベントを遅延させてトリガーすると、問題は解決しました。こちらです ：

setTimeout(function(){ map.invalidateSize()}, 400);
66
rkcpi

L.Map.invalidateSize()は、コンテナサイズが変更されたことをリーフレットマップオブジェクトに通知するだけであるため、より少ないまたはより多くのマップタイルを描画する必要があります。実際には寸法は変更されません。含む<div>、およびマップを移動しません。自分でやるべきです。

14
Ilja Zverev

受け入れられた答えは、遷移よりも長い睡眠に依存しているという点で、少しハッキーです。

this がうまくいくことがわかりました：

$("body").on($.support.transition.end, '#main-navbar .nav-collapse', function(event){    
    console.log("end of the animation");
});
6
user1650892

サイズ変更後、これを使用します

map.invalidateSize()

https://github.com/Leaflet/Leaflet/issues/69

2
Mahdi Bashirpour

VueJS、Leaflet 1.2.0を実行しているこの問題に遭遇しました。上記の他のように、サイズ変更は完全に表示されませんでした。 VueJS内での私のソリューションは、nextTick関数を呼び出すことでした：

  var vm = this
  var container = vm.$refs.container
  vm.mapStyle.width = `${vm.getElementContentWidth(container)}px`
  vm.mapStyle.height = `${vm.getElementContentHeight(container)}px`
  vm.$nextTick(() => {
    if (vm.map) vm.map.invalidateSize()
    if (vm.layerBase) vm.layerBase.redraw()
  })

純粋なjavascriptは

1
Disarticulate