OpenLayers - कंटेनर आकार बदलने के बाद नक्शा फिर से तैयार करना

25

अपने वेब एप्लिकेशन में, मैं उपयोगकर्ताओं को मैप कंटेनर का आकार सेट करने में सक्षम करना चाहता हूं।

कंटेनर के थोड़ा विस्तारित होने पर सबकुछ ठीक हो गया (जाहिरा तौर पर यह इसलिए है क्योंकि सीमा के ठीक पीछे की टाइलें पहले से ही भरी हुई थीं)। हालांकि, जब कंटेनर में काफी विस्तार किया जाता है (निम्न उदाहरण में, चौड़ाई में 300 से 1000 पीएक्स तक), तो खाली जगह बची है।

नक्शे को कैसे फिर से तैयार किया जाए और नए आकार के अनुकूल बनाया जाए?

redraw()सभी परतों पर कॉल करने से मदद नहीं मिली। न ही अंदर-बाहर झूम रहे थे।

मैंने ओपेरा, क्रोम और फ़ायरफ़ॉक्स में वर्णित परिणामों के साथ इसका परीक्षण किया। 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

मैप का आकार अपडेट करने के लिए आपको एपीआई को कॉल करना होगा।

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

यहाँ हम इसे कैसे करते हैं

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

आप देख सकते हैं कि हमने थोड़ी देरी की, और ईमानदारी से मुझे सही कारण याद नहीं है, लेकिन हमें खुद को आकार बदलने के लिए एपीआई कॉल करने से पहले इसे थोड़ा इंतजार करना पड़ा।

— Vadim
स्रोत

1

खैर, मेरा मानना है कि देरी आपकी एप्लिकेशन-विशिष्ट है। ;) वैसे भी, धन्यवाद, एक बार फिर मैंने डॉक्स में कुछ याद किया।

— Imp

1

मैं भी देरी का कोई कारण नहीं देखता, इसलिए इसे छोड़ दिया। धन्यवाद

— Zod

1

@Vadim ग्रेट एसेर, लेकिन मेरे लिए काम नहीं करता है। मेरा कोड मानचित्र की तरह है 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

सेट टाइमआउट यह सुनिश्चित करने की संभावना था कि मानचित्र लोड किया गया था और शेष डोम का प्रतिपादन किया गया था। मैं वर्तमान में Marionette view lifecycle की समझ में कमी के कारण उसी हैक का उपयोग कर रहा हूं।

— ca0v

8

हाँ, map.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
स्रोत

यह एकमात्र उत्तर था जो मेरे लिए काम करता था

— मैथ्यू लॉक

2

पहले (सही) उत्तर के लिए एक और टिप्पणी:

यदि आप window.resize इवेंट की प्रतीक्षा करते हैं, तो टाइमआउट-ईवेंट की आवश्यकता है। अन्यथा यदि उपयोगकर्ता विंडो (जैसे फ़ायरफ़ॉक्स के लिए आवश्यक हो) का आकार बदलना शुरू कर देता है तो नक्शा हर मिलीसेकंड का आकार बदल जाएगा। इसलिए यदि आप विंडो-आकार की जांच करना चाहते हैं, तो टाइमआउट काफी उपयोगी है। जरूरत है। देखें: /programming/5489946/jquery-how-to-wait-for-the-end-or-resize-event-and-only-then-perform-an-ac या jQuery आकार अंत घटना

(क्षमा करें, मैं एक टिप्पणी नहीं जोड़ सकता, इसलिए एक और उत्तर)

— leole
स्रोत

1

मैंने यहां वर्णित सभी चीजों की कोशिश की लेकिन मेरे लिए कुछ भी काम नहीं किया। इसलिए, मुझे अहसास हुआ कि जब मैं मैप में 'फुल-स्क्रीन' क्लास लगा रहा था, तो रिसाइज इवेंट को निकाल नहीं दिया गया था। मैं इसे ठीक करता हूं:

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

— nicolasaiz173
स्रोत

1

जिस तरह से सेटटाइमआउट का उपयोग किया जाता है, उससे मुझे कोई मतलब नहीं है (शायद पुराने 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";

मुझे उम्मीद है इससे आपको मदद मिली होगी...

— आरागॉन
स्रोत

कंटेनर के आकार की विशेषताओं को बदलने पर, नक्शे के लिए काम करता है, लेकिन खींची गई सुविधाओं के लिए नहीं। अद्यतन जोड़ना () सुनिश्चित करें कि सुविधाएँ दिखाई दे रही हैं।

— कोडे

0

यह मेरे लिए काम कर रहा है:

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

$ अगली टिक महत्वपूर्ण है क्योंकि यह मानचित्र कंटेनर के नए आकार को ध्यान में रखने से पहले अगले ताज़ा होने की प्रतीक्षा करने की अनुमति देगा।

— चिकित्सक
स्रोत