OpenLayers - วาดแผนที่ใหม่หลังจากปรับขนาดคอนเทนเนอร์

25

ในเว็บแอปพลิเคชันของฉันฉันต้องการให้ผู้ใช้กำหนดขนาดของคอนเทนเนอร์แผนที่

ทุกอย่างทำงานได้ดีเมื่อมีการขยายคอนเทนเนอร์เล็กน้อย (เห็นได้ชัดว่านี่เป็นเพราะกระเบื้องที่อยู่ด้านหลังขอบถูกโหลดแล้ว) อย่างไรก็ตามเมื่อคอนเทนเนอร์ถูกขยายอย่างมีนัยสำคัญ (ในตัวอย่างต่อไปนี้จากความกว้าง 300 ถึง 1000px) จะมีพื้นที่ว่างเหลือ

จะทำให้แผนที่วาดใหม่และปรับให้เข้ากับขนาดใหม่ได้อย่างไร?

การโทรredraw()ทุกชั้นไม่ได้ช่วยอะไร ไม่ได้ซูมเข้าและออก

ฉันทดสอบสิ่งนี้ด้วยผลลัพธ์ที่อธิบายไว้ใน Opera, Chrome และ Firefox ใน IE8 น่าแปลกใจที่ปัญหาไม่เกิดขึ้นและแผนที่ปรับโดยอัตโนมัติ

หน้าเว็บแบบง่ายสำหรับการทดสอบ:

<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 เพื่อปรับขนาดตัวเองเล็กน้อย

— Vadim
แหล่งที่มา

1

ฉันเชื่อว่าการล่าช้าเป็นแอปพลิเคชันของคุณโดยเฉพาะ ;) อย่างไรก็ตามขอบคุณอีกครั้งฉันพลาดบางสิ่งบางอย่างในเอกสาร

— Imp

1

ฉันก็ไม่เห็นเหตุผลใด ๆ สำหรับความล่าช้าดังนั้นจงทิ้งมันไว้ ขอบคุณ

— zod

1

@Vadim Great anser แต่ไม่ได้ผลสำหรับฉัน รหัสของฉันเป็นเหมือนbody onload=init()และinitเริ่มต้นแผนที่ เป็นเพราะสิ่งนั้นหรือ นี่จะเป็นวิธีแก้ปัญหาที่ดีสำหรับการออกแบบที่ตอบสนองหรือไม่ window.onload=window.onresize=function(){//resize here. ขอบคุณ

— slevin

ฉันสงสัยว่า setTimout เป็นความพยายามในการโทรหาทุก ๆ 200ms น่าเสียดายที่มันซับซ้อนกว่านี้เล็กน้อยต้องมีตัวsetIntervalที่ทำงานทุก ๆ 200 มิลลิวินาทีจากนั้นมีบูลีนvar didResizeที่ตั้งค่าเป็นtrue onresize()และตั้งค่าเป็นfalseหลังจากmap.updateSize()นั้น

— andrewb

1

setTimeout มีแนวโน้มที่จะมั่นใจได้ว่าแผนที่ได้รับการโหลดและมีการสร้างส่วนที่เหลือของ dom ปัจจุบันฉันใช้แฮ็คเดียวกันเนื่องจากขาดความเข้าใจเกี่ยวกับวงจรชีวิตของ Marionette

— ca0v

8

ใช่ใช้ map.updateSize () เป็น Vadim กล่าว (ยังไม่แน่ใจว่าทำไมล่าช้า!) เอกสาร

ฉันมักจะใส่ปุ่มสลับหน้าจอแบบเต็มหน้าจอบนแผนที่ซึ่งใช้งานได้ง่ายโดยการสลับคลาส css ของคอนเทนเนอร์แผนที่แล้วเรียก updateSize ()

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

— andyb
แหล่งที่มา

2

ไม่หรูหรา แต่ก็ใช้ได้ดีสำหรับฉัน

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

— JFHack
แหล่งที่มา

นี่เป็นคำตอบเดียวที่ทำงานให้ฉัน

— Matthew Lock

2

ความคิดเห็นอื่นสำหรับคำตอบแรก (ถูกต้อง):

หมดเวลา - กิจกรรมจำเป็นถ้าคุณรอเหตุการณ์ window.resize มิฉะนั้นจะมีการปรับขนาดแผนที่ทุกมิลลิวินาทีหากผู้ใช้เริ่มปรับขนาดหน้าต่าง (ฉันต้องการสำหรับ Firefox) ดังนั้นหากคุณต้องการตรวจสอบขนาดของหน้าต่างการหมดเวลานั้นค่อนข้างมีประโยชน์ จำเป็น ดู: /programming/5489946/jquery-how-to-wait-for-the-end-or-resize-event-and-onth-perform-an-acหรือjQuery ปรับขนาดเหตุการณ์สิ้นสุด

(ขออภัยฉันไม่สามารถเพิ่มความคิดเห็นดังนั้นคำตอบอื่น)

— leole
แหล่งที่มา

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)
})

— Simon Hutchison
แหล่งที่มา

0

ฉันคิดว่าการเปลี่ยนรูปแบบของแผนที่ div โดยอัตโนมัติจะเปลี่ยนขนาดของแผงแผนที่

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

ฉันหวังว่ามันจะช่วยคุณ ...

— อารากอน
แหล่งที่มา

ในการปรับขนาดการเปลี่ยนแปลงคุณสมบัติขนาดภาชนะที่ใช้งานได้สำหรับแผนที่ แต่ไม่ได้สำหรับคุณสมบัติการวาด การเพิ่ม updateSize () ให้แน่ใจว่าคุณสมบัติจะมองเห็น

— kode

0

นี่ใช้ได้สำหรับฉัน:

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

$ nextTick สำคัญมากเพราะจะรอการรีเฟรชครั้งต่อไปก่อนที่จะพิจารณาขนาดใหม่ของคอนเทนเนอร์แผนที่

— คุณหมอ
แหล่งที่มา