গতিবদ্ধভাবে একটি বাউন্ডিং বাক্সের উপর ভিত্তি করে জুম স্তর সেট করুন

Question

আমার একটি লিফলেট মানচিত্র রয়েছে যার আকার ব্রাউজার উইন্ডোর আকারের উপর নির্ভর করে। আমি চাই যে জুম স্তরটি গতিশীলভাবে চয়ন করা উচিত যাতে বাউন্ডিং বাক্সটির সম্পূর্ণতা দেখানোর সময় এটি যতটা সম্ভব জুম করা যায়।

এই মুহূর্তে, আমার কাছে মাত্র জুম লেভেলের হার্ডকোড এবং সেন্টার পয়েন্টটি গড় পয়েন্টের ভিত্তিতে রয়েছে।

map = new L.Map('map', {
  center: new L.LatLng(
    latitudeSum/locations.length,
    longitudeSum/locations.length
  )
  zoom: 9
})

পরিবর্তে, আমি এটিকে একটি বাউন্ডিং বাক্স (দুটি দ্বীপপুঞ্জ) দিতে চাই এবং উইন্ডোর আকারের ভিত্তিতে জুম স্তরটি বেছে নিতে চাই।

Answer 1

আপনি কেবল ব্যবহার করতে পারেন:

var group = new L.featureGroup([marker1, marker2, marker3]);

map.fitBounds(group.getBounds());

Comments

দরকারী উত্তর - এটি কেন্দ্রীকরণ এবং জুম করার জন্য সেরা উপায় - আমি কেবল একটি ম্যানুয়াল গণনা দিয়ে কেন্দ্রীভূত হওয়ার আগে। ফিটবাউন্ডগুলি আমার দরকার উত্তরটি ছিল তবে আমি বুঝতে পেরেছিলাম যে আপনি কেবল দু'টি স্থানাঙ্কের মধ্যে ফিটবাউন্ডগুলিতে প্রবেশ করতে পারেন এবং এটি সম্পন্ন করতে পারেন।

— মাইক ম্যাকেকে

আপনি যদি ইতিমধ্যে চিহ্নিতকারী তৈরি না করেন তবে অবশ্যই পরবর্তী উত্তরটি ব্যবহার করুন।

— অ্যান্ডি

Answer 2

@ ফরহাতের উত্তরটি ব্যবহার করে , আমি বুঝতে পেরেছিলাম যে আমার যা দরকার তা হ'ল অ্যারে পাস করা:

map.fitBounds([
  [-4.8587000, 39.8772333],
  [-6.4917667, 39.0945000]
])

Comments

এটি সম্ভবত প্রান্তের কাছাকাছি একটি সঠিক বর্গাকার বন্ধনী অনুপস্থিত। আপনি কেন আমার সম্পাদনাটি উল্টিয়েছিলেন তা নিশ্চিত নয়।

— জানু কিউ পেবলিক

আপনি বন্ধনী সম্পর্কে ঠিক বলেছেন - ধন্যবাদ। আমি এটা ঠিক করব। আপনার সম্পাদনায় যদিও অতিরিক্ত কমা ছিল।

— মাইক ম্যাকে

বিকাশকারী.মোজিলা.আর.ইন- ইউএস / ডকস / ওয়েব / জাভা স্ক্রিপ্ট / রেফারেন্স /… কোডটিও আসলে ট্রেলিং কমা দিয়ে পরীক্ষিত। (কারণ জীবন pointlessly উল্লেখযোগ্যভাবে বিন্যাসে পার্থক্য লাইনের বিরক্ত করার জন্য খুবই ছোট।)

— জানুয়ারী Kyu Peblik

Answer 3

map.fitBounds() এছাড়াও যদি আপনি গুগল ম্যাপ পলিনাইনগুলির সাথে কাজ করছেন তবে দুর্দান্ত কাজ করে:

<!-- required for Leaflet Polyline support -->
<script type="text/javascript" src="https://cdn.rawgit.com/jieter/Leaflet.encoded/68e78190/Polyline.encoded.js"
crossorigin=""></script>

---

// polylines require backslashes to be escaped (Jinja example)
let encodedRoute = '{{ activity.strava_data['map']['polyline']|replace("\\", "\\\\")|safe }}';
let coordinates = L.Polyline.fromEncoded(encodedRoute).getLatLngs();
let map = L.map('map').fitBounds(coordinates);

Comments

কেন এই উত্তর নিচে ভোট দেওয়া হয়েছিল?

— লিগি

Answer 4

এইভাবেই আমি @ মাইক ম্যাককে ধন্যবাদ জানিয়েছি! ;)

নোট করুন যে আমি অভ্যন্তরীণ প্যাডিং হিসাবে কর্ডগুলিতে আরও কয়েকটি অতিরিক্ত সংযোজন করেছি, তাই চিহ্নিতকারীরা মানচিত্রের পাশের অংশে ঠিক নেই। এই উপায়টি সৌন্দর্যমণ্ডিত দেখাচ্ছে looks

const [ ...coordinates ] = locations.map(marker => [ marker.coordinates.latitude + 
0.055, marker.coordinates.longitude + 0.055 ])

map.fitBounds([ ...coordinates ])

ভ্যু.জেএস ওয়ে:

mounted () {
   this.$nextTick(() => {
        this.initialZoom()
   })
}


methods: {
   initialZoom () {
       const map = this.$refs.myMap.mapObject
       const [ ...coordinates ] = this.locations.map(marker => [                                  
                                          marker.coordinates.latitude + 0.055,
                                          marker.coordinates.longitude + 0.055 
                                   ]) 

map.fitBounds([ ...coordinates ])