ওপেনলায়ার্স - ধারক পুনরায় আকার দেওয়ার পরে মানচিত্র পুনরায় আঁকুন


25

আমার ওয়েব অ্যাপ্লিকেশনটিতে, আমি ব্যবহারকারীদের মানচিত্রের ধারকটির আকার নির্ধারণ করতে সক্ষম করতে চাই।

কনটেইনারটি সামান্য প্রসারিত হওয়ার সময় সবকিছু ঠিকঠাক কাজ করেছিল (দৃশ্যত এটি হ'ল সীমানার ঠিক পিছনে থাকা টাইলগুলি ইতিমধ্যে লোড করা হয়েছিল)। যাইহোক, যখন ধারকটি উল্লেখযোগ্যভাবে প্রসারিত হয় (নিম্নলিখিত উদাহরণে, 300 থেকে 1000px প্রস্থে) তখন ফাঁকা স্থান বাকী থাকে।

কীভাবে মানচিত্রটিকে পুনরায় আঁকবেন এবং নতুন আকারের সাথে মানিয়ে নেবেন?

redraw()সমস্ত স্তরকে কল করা কোনও লাভ হয়নি। জুম ইন এবং আউট না।

অপেরা, ক্রোম এবং ফায়ারফক্সে বর্ণিত ফলাফলের সাথে আমি এটি পরীক্ষা করেছি। আইই 8-তে, আশ্চর্যের সাথে, সমস্যাটি দেখা দেয় নি এবং মানচিত্রটি স্বয়ংক্রিয়ভাবে রূপান্তরিত হয়।

পরীক্ষার জন্য একটি সরলীকৃত ওয়েবপৃষ্ঠা:

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

উত্তর:


35

মানচিত্রের আকার আপডেট করতে আপনাকে API কল করতে হবে।

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

আমরা এটি কীভাবে করব তা এখানে

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

আপনি দেখতে পান যে আমরা কিছুটা দেরি করেছি এবং সত্যই এর সঠিক কারণটি আমার মনে নেই তবে এপিআইকে নিজের আকার পরিবর্তন করতে ফোন করার আগে আমাদের কিছুটা অপেক্ষা করতে হয়েছিল।


1
ঠিক আছে, আমি বিশ্বাস করি যে বিলম্বটি আপনার অ্যাপ্লিকেশন-নির্দিষ্ট। ;) যাইহোক, আপনাকে ধন্যবাদ, আবারও আমি ডক্সে কিছু মিস করেছি।
ইমপ

1
আমি বিলম্বের কোনও কারণও দেখতে পাচ্ছি না, তাই এটি ছেড়ে দিয়েছি। ধন্যবাদ
zod

1
@ ভাদিম গ্রেট আনসার, তবে আমার পক্ষে কাজ করে না। আমার কোডটি মানচিত্রের মতো body onload=init()এবং initপ্রাথমিককরণ। এটা কি এই কারণে? এছাড়াও, এটি প্রতিক্রিয়াশীল ডিজাইনের জন্য একটি ভাল সমাধান হতে পারে? window.onload=window.onresize=function(){//resize here। ধন্যবাদ
শুক্রবার

আমি অবাক হয়েছি যদি সেটটাইমআউটটি প্রতি 200 মিটারে কল করার চেষ্টা করা হয়েছিল। দুর্ভাগ্যক্রমে এটি কিছুটা জটিল, setIntervalপ্রতি 200 এমএস চালিত এমন একটি হওয়া দরকার , তারপরে var didResizeসেট করা একটি বুলিয়ান থাকে true onresize()এবং falseপরে সেট করা map.updateSize()হয়।
অ্যান্ড্রুব

1
সেটটাইমআউটটি সম্ভবত মানচিত্রটি লোড হয়েছে এবং বাকী ডোমটি রেন্ডার হয়েছে তা নিশ্চিত করেছিল। মেরিনেট ভিউ লাইফসাইক্যালটি সম্পর্কে আমার বোঝার অভাবের কারণে আমি বর্তমানে একই হ্যাকটি ব্যবহার করছি।
ca0v

8

হ্যাঁ, ভাদিম যেমন বলেছেন (তবুও দেরি কেন না!) নথিপত্র হিসাবে মানচিত্র.আপডেটসাইজ () ব্যবহার করুন

আমি সাধারণত মানচিত্রে একটি পূর্ণস্ক্রিন টগল বোতামটি রাখি যা মানচিত্রের ধারকটির CSS শ্রেণিতে স্যুইচ করে এবং তারপরে আপডেটসাইজ () এ কল করে কাজ করে

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

এটি আমার পক্ষে কাজ করা একমাত্র উত্তর ছিল
ম্যাথিউ লক

2

প্রথম (সঠিক) উত্তরের আরও একটি মন্তব্য:

উইন্ডো.স্রাইজ ইভেন্টের জন্য অপেক্ষা করতে থাকলে সময়সীমা-ইভেন্টের প্রয়োজন। অন্যথায় যদি কোনও ব্যবহারকারী উইন্ডোটিকে পুনরায় আকার দিতে শুরু করেন (ফায়ারফক্সের জন্য আমার এটি প্রয়োজন) তবে মানচিত্রটি প্রতি মিলিসেকেন্ডকে পুনরায় আকার দেওয়া হবে। অতএব আপনি যদি উইন্ডো আকারের জন্য পরীক্ষা করতে চান, তবে সময়সীমাটি বেশ কার্যকর শ্রদ্ধা। প্রয়োজন ছিল। দেখুন: /programming/5489946/jquery-how-to-wait-for-the-end-or-resize-event-and-only-then-perform-an-ac বা jQuery এর পুনরায় আকার দেওয়ার শেষ ঘটনা

(দুঃখিত, আমি একটি মন্তব্য যোগ করতে পারি না, সুতরাং অন্য উত্তর)


1

আমি এখানে বর্ণিত সমস্ত জিনিস চেষ্টা করেছিলাম কিন্তু কিছুই আমার পক্ষে কার্যকর হয়নি। সুতরাং, আমি বুঝতে পেরেছিলাম যে আমি যখন মানচিত্রে একটি 'পূর্ণ-স্ক্রিন' শ্রেণি স্থাপন করছিলাম তখন পুনরায় আকারের ইভেন্টটি বরখাস্ত করা হয়নি। আমি এটি দিয়ে এটি ঠিক করি:

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

1

উপরে সেটটাইমআউটটি যেভাবে ব্যবহার করা হয়েছে তা আমার কাছে খুব একটা বোঝায় না (সম্ভবত কোনও পুরানো ওএল সংস্করণের জন্য একটি কার্যকারণ), তবে সেটটাইমআউটটি ম্যাপ.আপডেটসাইজে () এবং অন্যান্য সংযুক্ত কোডের মতো কলগুলির সংখ্যা হ্রাস করতে ব্যবহার করা যেতে পারে like এই:

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

0

আমি মনে করি মানচিত্র ডিভের স্টাইলটি স্বয়ংক্রিয়ভাবে মানচিত্র প্যানেলের আকার পরিবর্তন করবে।

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

আমি এটি আপনাকে সাহায্য করে আশা করি...


কন্টেইনারটির আকারের বৈশিষ্ট্যগুলি পরিবর্তন করার পরে মানচিত্রটি কাজ করে তবে আঁকা বৈশিষ্ট্যের জন্য নয়। আপডেটসাইজ যুক্ত করা () বৈশিষ্ট্যগুলি দৃশ্যমান তা নিশ্চিত করুন।
Kode

0

এটি আমার পক্ষে কাজ করছে:

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

$ নেক্সটিকটি গুরুত্বপূর্ণ কারণ এটি মানচিত্রের ধারকটির নতুন আকারটি বিবেচনায় নেওয়ার আগে পরবর্তী রিফ্রেশের জন্য অপেক্ষা করতে দেয়।

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.