OpenLayers - kabı yeniden boyutlandırdıktan sonra haritayı yeniden çizme

25

Web uygulamamda, kullanıcıların harita konteynerinin boyutunu ayarlamasını sağlamak istiyorum.

Konteyner hafifçe genişlediğinde her şey yolunda gitti (görünüşe göre bunun nedeni sınırın hemen arkasındaki taşların zaten yüklü olmasıydı). Bununla birlikte, kap önemli ölçüde genişletildiğinde (aşağıdaki örnekte, 300 ila 1000 piksel genişliğinde), boşluk kalmıştır.

Harita yeniden çizilir ve yeni boyuta uyarlanır?

redraw()Tüm katmanları aramak yardımcı olmadı. Yakınlaştırma ve uzaklaştırma da.

Bunu Opera, Chrome ve Firefox'ta açıklanan sonuçlarla test ettim. IE8'de, şaşırtıcı bir şekilde, sorun oluşmadı ve harita otomatik olarak uyarlandı.

Test için basitleştirilmiş bir web sayfası:

<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

— ith
kaynak

35

Harita boyutunu güncellemek için API'yi aramanız gerekir.

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

İşte nasıl yapıyoruz?

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

Biraz geciktiğimizi görebiliyorsunuz ve dürüst olmak gerekirse bunun nedenini tam olarak hatırlamıyorum, ancak kendisini yeniden boyutlandırması için API'yi çağırmadan önce biraz beklememiz gerekti.

— Vadim
kaynak

1

Gecikme uygulamanıza özel olduğuna inanıyorum. ;) Her neyse, teşekkür ederim, bir kez daha doktora bir şey özledim.

— Imp

1

Ayrıca gecikme için bir sebep göremiyorum, bu yüzden bıraktım. Thanks

— zod

1

@ Fadim Büyük anser, ama benim için çalışmıyor. Kodum gibidir body onload=init()ve initharitayı başlatır. Bu yüzden mi? Ayrıca, bu duyarlı tasarım için iyi bir çözüm olabilir mi? window.onload=window.onresize=function(){//resize here. Thanks

— slevin

SetTimout'un sadece her 200ms'de bir araya getirme girişimi olduğunu merak ediyorum. Ne yazık ki biraz daha karmaşıktır, setIntervalher 200 ms'de bir çalışan olması gerekir , daha sonra ayarlanmış ve sonra çağırılmış bir boole sahibi var didResizeolmak gerekir . true onresize()falsemap.updateSize()

— andrewb,

1

SetTimeout haritanın yüklenmesini ve domun geri kalanının oluşturulmasını sağlamıştır. Halen, Marionette görüş yaşam döngüsünün anlaşılmadığı için aynı hack kullanıyorum.

— ca0v

8

Vadim diyor Evet, (değil emin niçin gecikme de!) Map.updateSize () kullanın belgelere

Genelde haritalara bir tam ekran geçiş düğmesi koyarım, bu sadece harita kabının css sınıfını değiştirip ardından updateSize () öğesini çağırarak çalışır.

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

— AndyB
kaynak

2

Zarif değil, ama benim için iyi çalıştı

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

— JFHack
kaynak

bu benim için çalışan tek cevaptı

— Matthew Lock

2

İlk (doğru) cevaba bir başka yorum:

Window.resize olayını beklerseniz zaman aşımı olayı gereklidir. Aksi halde, bir kullanıcı pencereyi yeniden boyutlandırmaya başlarsa her milisaniyede bir harita yeniden boyutlandırılır (Firefox için gerekli). Bu nedenle, Pencere boyutunu kontrol etmek istiyorsanız, zaman aşımı süresi oldukça yararlı olacaktır. gerekli. Bakınız: /programming/5489946/jquery-how-to-wait-for-the-end-or-resize-event-and-only-then-perform-an-ac veya jQuery resize son etkinliği

(üzgünüm, yorum ekleyemiyorum, bu nedenle başka bir cevap)

— leole
kaynak

1

Burada anlatılan her şeyi denedim ama hiçbir şey benim için işe yaramadı. Böylece, haritaya 'tam ekran' bir sınıf koyarken resize olayının başlatılmadığını fark ettim. Bunu şu şekilde düzeltirim:

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

— nicolasaiz173
kaynak

1

SetTimeout uygulamasının yukarıda kullanıldığı yöntem bana pek bir şey ifade etmiyor (belki de daha eski bir OL sürümü için geçici bir çözüm olabilir), ama setTimeout, map.updateSize () işlevine yapılan arama sayısını ve benzeri diğer kodları azaltmak için kullanılabilir bu:

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

— Simon Hutchison
kaynak

0

Harita div stilini otomatik olarak değiştirmenin harita panelinin boyutunu değiştireceğini düşünüyorum.

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

umarım sana yardımcı olur ...

— Aragon
kaynak

Kapsayıcıların boyut niteliklerini değiştirmenin yeniden boyutlandırılması harita için işe yarar ancak çizilmiş özellikler için uygun değildir. UpdateSize () eklenmesi özelliklerin görünür olmasını sağlar.

— Aralık'ta

0

Bu benim için çalışıyor:

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

$ NextTick önemlidir, çünkü harita konteynerinin yeni boyutunu hesaba katmadan önce bir sonraki yenilemeyi bekleyecektir.

— doktor
kaynak