OpenLayers-コンテナーのサイズ変更後のマップの再描画

25

私のWebアプリケーションでは、ユーザーがマップコンテナーのサイズを設定できるようにします。

コンテナをわずかに拡張したときにすべてが正常に機能しました（これは、境界線のすぐ後ろにあるタイルが既に読み込まれているためです）。ただし、コンテナが大幅に拡張された場合（次の例では、幅が300〜1000ピクセル）、空白が残ります。

マップを再描画して新しいサイズに適応させる方法は？

redraw()すべてのレイヤーを呼び出すことは役に立ちませんでした。ズームインもズームアウトもしませんでした。

Opera、Chrome、Firefoxで説明した結果でこれをテストしました。IE8では、驚くべきことに、問題は発生せず、マップは自動的に適合しました。

テスト用の簡略化されたWebページ：

<html>
  <head>
    <style>
      #mapbox { 
        width: 300px;
        height: 500px;
        border: 1px solid black;
      }
    </style>

    <script src="http://openlayers.org/api/OpenLayers.js"></script>
  </head>

  <body>
    <div id="mapbox"></div>
    <input type="button" id="test" value="resize">

    <script>    
      var map = new OpenLayers.Map('mapbox');
      map.addLayer(new OpenLayers.Layer.OSM());      

      map.setCenter(
        new OpenLayers.LonLat(1000000, 7000000), 5);

      document.getElementById('test').onclick = function() {
        document.getElementById('mapbox').style.width = '1000px';
      }
    </script>
  </body>
</html>

openlayers-2 javascript

— インプ
ソース

35

マップサイズを更新するには、APIを呼び出す必要があります。

http://dev.openlayers.org/docs/files/OpenLayers/Map-js.html#OpenLayers.Map.updateSize

これが私たちのやり方です

window.onresize = function()
{
  setTimeout( function() { map.updateSize();}, 200);
}

少し遅れていることがわかりますが、正直なところ、正確な理由は覚えていませんが、APIを呼び出してサイズを変更するまで少し待つ必要がありました。

— ヴァディム
ソース

1

さて、遅延はアプリケーション固有のものだと思います。;）とにかく、ありがとう、もう一度ドキュメントで何かを見逃した。

— インプ

1

また、遅延の理由も見当たらないため、省略しました。ありがとう

— -zod

1

@Vadim素晴らしいanserですが、私にはうまくいきません。私のコードは似てbody onload=init()おりinit、マップを初期化します。それが原因ですか？また、これはレスポンシブデザインの優れたソリューションでしょうか？window.onload=window.onresize=function(){//resize here。ありがとう

— slevin

setTimoutは、200ミリ秒ごとにのみ呼び出すようにしようとしたのだろうか。残念ながら、もう少し複雑で、setInterval200ミリ秒ごとに実行するが必要です。次に、ブール値var didResizeを設定しtrue onresize()、に設定しfalse、map.updateSize()呼び出した後に設定します。

— アンドリュー14

1

setTimeoutは、マップがロードされ、domの残りがレンダリングされることを保証する可能性がありました。現在、マリオネットビューのライフサイクルを理解していないため、同じハックを使用しています。

— ca0v

8

ヴァディムが言うようにはい、（いないことを確認なぜ遅れも！）map.updateSize（）を使用してドキュメントを

通常、マップにフルスクリーントグルボタンを配置します。これは、マップコンテナーのcssクラスを切り替えてからupdateSize（）を呼び出すだけで機能します

function toggleFullScreen(mapContainer) {
    if ($(mapContainer).hasClass("normal")) {
        $(mapContainer).addClass("fullscreen").removeClass("normal");
    } else {
        $(mapContainer).addClass("normal").removeClass("fullscreen");
    }
    map.updateSize();
}

— アンディブ
ソース

2

エレガントではありませんが、私にとってはうまくいきました

window.onresize = function(event)
{
   map.zoomOut(); map.zoomIn();
}

— JFHack
ソース

これは私のために働いた唯一の答えでした

— マシューロック

2

最初の（正しい）答えに対する別のコメント：

window.resizeイベントを待つ場合、timeout-Eventが必要です。それ以外の場合、ユーザーがウィンドウのサイズ変更を開始すると、マップはミリ秒ごとにサイズ変更されます（Firefoxに必要でした）。したがって、Window-sizeを確認する場合、タイムアウトは非常に便利です。必要です。参照：https : //stackoverflow.com/questions/5489946/jquery-how-to-wait-for-the-end-or-resize-event-and-only-then-perform-an-acまたはjQueryサイズ変更終了イベント

（申し訳ありませんが、コメントを追加することはできませんので、別の回答を追加してください）

— レオーレ
ソース

1

ここで説明したすべてのことを試しましたが、何もうまくいきませんでした。そのため、「フルスクリーン」クラスをマップに配置したときに、サイズ変更イベントが発生しなかったことに気付きました。私はこれを修正します：

$(window).trigger('resize');

— nicolasaiz173
ソース

1

上記のsetTimeoutの使用方法は私にはあまり意味がありません（古いOLバージョンの回避策かもしれません）が、setTimeoutを使用してmap.updateSize（）の呼び出し数や、この：

$(window).resize(function () {
  if (window.resizeMapUpdateTimer) {
    clearTimeout(window.resizeMapUpdateTimer)
  }
  window.resizeMapUpdateTimer= setTimeout(function () {
    // Update container size
    map.updateSize()
  }, 200)
})

— サイモン・ハチソン
ソース

0

マップdivのスタイルを自動的に変更すると、マップパネルのサイズが変更されると思います。

document.getElementById("map-panel").style.width = "500px";

私はそれがあなたを助けることを願っています...

— アラゴン
ソース

サイズ変更時にコンテナのサイズ属性を変更すると、マップに対して機能しますが、描画された機能に対しては機能しません。updateSize（）を追加すると、機能が表示されるようになります。

— コーデ

0

これは私のために働いています：

this.$nextTick(
    function() {
        OL_MAP_INSTANCE.updateSize();
    }
);

$ nextTickは、マップコンテナの新しいサイズを考慮する前に次の更新を待機できるため、重要です。

— 医師
ソース