ম্যাপবক্স বা লিফলেটে সমস্ত চিহ্নিতকারীকে ফিট করার জন্য জুম করুন

Question

ম্যাপবক্সে বা মানচিত্রে সমস্ত চিহ্নিতকারী দেখতে আমি কীভাবে সেট করব লিফলেটে ? গুগল ম্যাপস এপিআই এর মতো কি bounds?

উদাহরণ:

var latlngbounds = new google.maps.LatLngBounds();
for (var i = 0; i < latlng.length; i++) {
  latlngbounds.extend(latlng[i]);
}
map.fitBounds(latlngbounds);

Answer 1

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

map.fitBounds(group.getBounds());

আরও তথ্যের জন্য ডকুমেন্টেশন দেখুন ।

Comments

এই সমাধানটির সমস্যাটি হ'ল এটি কখনও কখনও উত্তর-উত্তর চিহ্নিতকারীকে কেটে ফেলতে পারে, যেহেতু চিহ্নিতকারী তার স্থানাঙ্কগুলির দ্বারা প্রদত্ত সীমা ছাড়িয়ে যায়।

— অ্যারোনবাউমান

@ ব্যবহারকারী317946 থেকে: "মানচিত্র.ফিটবাউন্ডস (মার্কার্স.জেটবাউন্ডস ()। প্যাড (0.5%); এখন আইকনগুলি কাটা যাবে না: :-)"

— এলপ্যাপ

আমি খুশি হ'ল চাকাটি পুনর্বহাল করার আগে আমি এটি গুগল করেছিলাম। ধন্যবাদ

— শহীদগণ

যদি কারও কাছে এটি সুস্পষ্ট না হয় ... আপনি বেশিরভাগ লিফলেট বস্তুর সীমা পেতে পারেন। map.fitBounds (circle.getBounds ()); উদাহরণ স্বরূপ.

— রাভেন্দারস্কি

আপনি markers.getBounds().pad(<percentage>)যদি কোনও নির্দিষ্ট শতাংশের দ্বারা সীমানা প্রসারিত করতে চান তবে আপনি ব্যবহার করতে পারেন তবে প্যাডেলগুলিতে প্যাডিং সেট করার জন্য আপনি প্যাডিং বিকল্পটি ফিটবাউন্ডগুলিতেও পাস করতে পারেন। markers.getBounds(), {padding: L.point(20, 20)})

— অ্যালেক্স গেরেরো

Answer 2

'উত্তর' আমার কিছু কারণে কাজ করে নি। সুতরাং এখানে আমি শেষ করে যাচ্ছি:

////var group = new L.featureGroup(markerArray);//getting 'getBounds() not a function error.
////map.fitBounds(group.getBounds());
var bounds = L.latLngBounds(markerArray);
map.fitBounds(bounds);//works!

Comments

এটি করার চেষ্টা করা হচ্ছে তবে ত্রুটি হওয়া: LngLatLikeআর্গুমেন্টটি অবশ্যই একটি LngLat উদাহরণ, একটি বিষয় হিসাবে নির্দিষ্ট করা উচিত {lng: <lng>, lat: <lat>}, বা [<lng>, <lat>] এর একটি অ্যারে। কোন ধারণা?

— retvoid

Answer 3

var markerArray = [];
markerArray.push(L.marker([51.505, -0.09]));
...
var group = L.featureGroup(markerArray).addTo(map);
map.fitBounds(group.getBounds());

Comments

এটি অ্যাডটো (মানচিত্র) ছাড়াই কাজ করে: মানচিত্র.ফিটবাউন্ডস (এল.ফাইচারগ্রুপ (মার্কারআরে) .গেটবাউন্ডস ()); এই কোন পার্থক্য করতে হবে?

— লুকাস স্টেফেন

Answer 4

লিফলেটে ল্যাটলংবাউন্ডস রয়েছে যা গুগল ম্যাপের মতোই একটি বর্ধিত ফাংশনও রয়েছে।

http://leafletjs.com/reference.html#latlngbounds

সুতরাং আপনি সহজভাবে ব্যবহার করতে পারেন:

var latlngbounds = new L.latLngBounds();

বাকিটা ঠিক একই রকম।

Comments

ধন্যবাদ! আমার জন্য উপরের উত্তর অনুসারে সমাধানটি 'গেটবাউন্ডস' () ফাংশন নয় returning সুতরাং আমি আপনার পরামর্শ অনুসারে আমার কোড পরিবর্তন করেছি। আমার নিজের উত্তর এ আছে।

— ইরফানক্লেমসন

Answer 5

লিফলেটটির জন্য, আমি ব্যবহার করছি

    map.setView(markersLayer.getBounds().getCenter());

Comments

ক্রোমে আমি একক চিহ্নিতকারীর সাথে কাজ করতে পেলাম এটিই একমাত্র সমাধান

— টিম স্টাইলস

Answer 6

আপনি কোনও বৈশিষ্ট্যগ্রুপ বা সমস্ত বৈশিষ্ট্যগোষ্ঠীর অভ্যন্তরে সমস্ত বৈশিষ্ট্য সনাক্ত করতে পারেন, দেখুন এটি কীভাবে কাজ করে!

//Group1
m1=L.marker([7.11, -70.11]);
m2=L.marker([7.33, -70.33]);
m3=L.marker([7.55, -70.55]);
fg1=L.featureGroup([m1,m2,m3]);

//Group2
m4=L.marker([3.11, -75.11]);
m5=L.marker([3.33, -75.33]);
m6=L.marker([3.55, -75.55]);
fg2=L.featureGroup([m4,m5,m6]);

//BaseMap
baseLayer = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
var map = L.map('map', {
  center: [3, -70],
  zoom: 4,
  layers: [baseLayer, fg1, fg2]
});

//locate group 1
function LocateOne() {
    LocateAllFeatures(map, fg1);
}

function LocateAll() {
    LocateAllFeatures(map, [fg1,fg2]);
}

//Locate the features
function LocateAllFeatures(iobMap, iobFeatureGroup) {
		if(Array.isArray(iobFeatureGroup)){			
			var obBounds = L.latLngBounds();
			for (var i = 0; i < iobFeatureGroup.length; i++) {
				obBounds.extend(iobFeatureGroup[i].getBounds());
			}
			iobMap.fitBounds(obBounds);			
		} else {
			iobMap.fitBounds(iobFeatureGroup.getBounds());
		}
}

.mymap{
  height: 300px;
  width: 100%;
}

<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"></script>
<link href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" rel="stylesheet"/>

<div id="map" class="mymap"></div>
<button onclick="LocateOne()">locate group 1</button>
<button onclick="LocateAll()">locate All</button>

Answer 7

শুধুমাত্র দৃশ্যমান চিহ্নিতকারীদের ফিট করার জন্য, আমি এই পদ্ধতিটি করেছি।

fitMapBounds() {
    // Get all visible Markers
    const visibleMarkers = [];
    this.map.eachLayer(function (layer) {
        if (layer instanceof L.Marker) {
            visibleMarkers.push(layer);
        }
    });

    // Ensure there's at least one visible Marker
    if (visibleMarkers.length > 0) {

        // Create bounds from first Marker then extend it with the rest
        const markersBounds = L.latLngBounds([visibleMarkers[0].getLatLng()]);
        visibleMarkers.forEach((marker) => {
            markersBounds.extend(marker.getLatLng());
        });

        // Fit the map with the visible markers bounds
        this.map.flyToBounds(markersBounds, {
            padding: L.point(36, 36), animate: true,
        });
    }
}

Answer 8

পরের কোডটি ব্যবহার করা সবচেয়ে ভাল উপায়

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

map.fitBounds(group.getBounds());

Comments

অনুরূপ উত্তর আছে

— এহোয়াহোয়