OpenLayers - menggambar ulang peta setelah ukuran kontainer

25

Dalam aplikasi web saya, saya ingin memungkinkan pengguna untuk mengatur ukuran wadah peta.

Semuanya bekerja dengan baik ketika wadah sedikit diperluas (tampaknya ini karena ubin yang berada tepat di belakang perbatasan sudah dimuat). Namun, ketika wadah diperluas secara signifikan (dalam contoh berikut, dari 300 hingga 1000px lebar), ada ruang kosong yang tersisa.

Bagaimana cara membuat peta ulang dan beradaptasi dengan ukuran baru?

Memanggil redraw()semua lapisan tidak membantu. Zooming tidak masuk dan keluar.

Saya menguji ini dengan hasil yang dijelaskan di Opera, Chrome dan Firefox. Di IE8, secara mengejutkan, masalah tidak terjadi dan peta secara otomatis disesuaikan.

Laman web yang disederhanakan untuk pengujian:

<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

— Imp
sumber

35

Anda perlu memanggil API untuk memperbarui ukuran peta.

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

Begini cara kami melakukannya

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

Anda dapat melihat kami melakukan sedikit keterlambatan, dan jujur saya tidak ingat alasan pastinya, tapi kami harus menunggu sebentar sebelum memanggil API untuk mengubah ukurannya sendiri.

— Vadim
sumber

1

Yah, saya percaya penundaan itu khusus untuk aplikasi Anda. ;) Bagaimanapun, terima kasih, sekali lagi saya melewatkan sesuatu di dokumen.

— Imp

1

Saya juga tidak melihat alasan penundaan, jadi tinggalkan saja. Terima kasih

— zod

1

@Adim Great anser, tetapi tidak bekerja untuk saya. Kode saya seperti body onload=init()dan initmenginisialisasi peta. Apakah karena itu? Juga, apakah ini akan menjadi solusi yang baik untuk desain responsif? window.onload=window.onresize=function(){//resize here. Terima kasih

— slevin

Saya bertanya-tanya apakah setTimout merupakan upaya membuatnya hanya memanggil setiap 200 ms. Sayangnya ini sedikit lebih rumit, perlu memiliki setIntervalyang berjalan setiap 200 ms, kemudian memiliki boolean var didResizeyang diatur ke true onresize(), dan diatur ke falsesetelah map.updateSize()dipanggil.

— andrewb

1

SetTimeout kemungkinan akan memastikan peta dimuat dan sisa dom diberikan. Saat ini saya menggunakan hack yang sama karena kurangnya pemahaman saya tentang siklus hidup tampilan Marionette.

— ca0v

8

Ya, menggunakan map.updateSize () sebagai Vadim mengatakan (juga tidak yakin mengapa penundaan!) Dokumentasi

Saya biasanya meletakkan tombol toggle layar penuh pada peta, yang berfungsi hanya dengan mengganti kelas css dari wadah peta dan kemudian memanggil updateSize ()

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

— andyb
sumber

2

Tidak elegan, tetapi itu bekerja dengan baik untuk saya

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

— JFHack
sumber

ini adalah satu-satunya jawaban yang berhasil untuk saya

— Matthew Lock

2

Komentar lain untuk jawaban pertama (benar):

Timeout-Event diperlukan jika Anda menunggu window.resize event. Kalau tidak, peta akan diubah ukurannya setiap milidetik jika pengguna mulai mengubah ukuran jendela (saya membutuhkannya untuk Firefox). Karena itu jika Anda ingin memeriksa ukuran Window, maka batas waktu resp sangat berguna. dibutuhkan. Lihat: /programming/5489946/jquery-how-to-wait-for-the-end-or-resize-event-and-only-then-perform-an-ac atau jQuery mengubah ukuran acara akhir

(maaf, saya tidak bisa menambahkan komentar, karena itu jawaban lain)

— leole
sumber

1

Saya mencoba semua hal yang dijelaskan di sini tetapi tidak ada yang berhasil untuk saya. Jadi, saya menyadari bahwa ketika saya meletakkan kelas 'layar penuh' ke peta, acara pengubahan ukuran tidak dipecat. Saya memperbaikinya dengan:

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

— nicolasaiz173
sumber

1

Cara setTimeout digunakan di atas tidak masuk akal bagi saya (mungkin solusi untuk versi OL yang lebih lama), tetapi setTimeout dapat digunakan untuk mengurangi jumlah panggilan ke map.updateSize (), dan kode terkait lainnya seperti ini:

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

— Simon Hutchison
sumber

0

Saya pikir mengubah gaya div peta secara otomatis akan mengubah ukuran panel peta.

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

Saya harap ini membantu Anda ...

— Aragon
sumber

Mengubah ukuran mengubah atribut ukuran kontainer berfungsi untuk peta, tetapi tidak untuk fitur yang digambar. Menambahkan updateSize () memastikan bahwa fitur terlihat.

— kode

0

Ini bekerja untuk saya:

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

$ NextTick penting karena akan memungkinkan untuk menunggu refresh berikutnya sebelum memperhitungkan ukuran baru dari wadah peta.

— Dokter
sumber