LeafletJS এ Polyline এবং Polygon হল দুটি গুরুত্বপূর্ণ জিওমেট্রিক শেপ, যেগুলি ম্যাপে লাইন এবং পলিগনের আকারে বিভিন্ন এলাকা বা পথ চিহ্নিত করতে ব্যবহৃত হয়। এই শেপগুলি ম্যাপে ভিজুয়ালাইজ করার জন্য ব্যবহার করা হয় এবং ব্যবহারকারীদের আরও বিশদভাবে তথ্য দেখাতে সহায়তা করে।
Polyline তৈরি করা
Polyline হল একাধিক পয়েন্টের মধ্যে একটানা লাইন, যা দুটি বা তার বেশি পয়েন্টের সংযোগ দিয়ে তৈরি হয়। এটি সাধারণত রুট, পথ বা কোনো নির্দিষ্ট সীমানা চিহ্নিত করার জন্য ব্যবহৃত হয়।
Polyline তৈরি করার উদাহরণ:
var map = L.map('map').setView([51.505, -0.09], 13); // ম্যাপ ইনিশিয়ালাইজ করা
// OpenStreetMap এর বেস লেয়ার যোগ করা
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
// Polyline তৈরি করা
var latlngs = [
[51.5, -0.09],
[51.51, -0.1],
[51.52, -0.11]
];
var polyline = L.polyline(latlngs, {color: 'blue'}).addTo(map);
// Polyline উপর পপ-আপ যোগ করা
polyline.bindPopup("এটি একটি Polyline।");
এখানে, L.polyline() ফাংশন ব্যবহার করে তিনটি পয়েন্টের মধ্যে একটি লাইন তৈরি করা হয়েছে, এবং color অপশন দিয়ে লাইনটির রঙ নির্ধারণ করা হয়েছে।
Polygon তৈরি করা
Polygon হল একটি ক্লোজড শেপ, যা একাধিক পয়েন্টের দ্বারা তৈরি হয় এবং এটি একটি পলিগনাল এলাকার মধ্যে সমস্ত পয়েন্টের সংযোগ স্থাপন করে। সাধারণত এটি কোনও এলাকা চিহ্নিত করতে বা বিশেষ স্থান প্রদর্শন করতে ব্যবহৃত হয়।
Polygon তৈরি করার উদাহরণ:
var map = L.map('map').setView([51.505, -0.09], 13); // ম্যাপ ইনিশিয়ালাইজ করা
// OpenStreetMap এর বেস লেয়ার যোগ করা
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
// Polygon তৈরি করা
var latlngs = [
[51.5, -0.09],
[51.51, -0.1],
[51.52, -0.11],
[51.5, -0.12]
];
var polygon = L.polygon(latlngs, {color: 'green'}).addTo(map);
// Polygon উপর পপ-আপ যোগ করা
polygon.bindPopup("এটি একটি Polygon।");
এখানে, L.polygon() ফাংশন ব্যবহার করে চারটি পয়েন্টের মধ্যে একটি ক্লোজড শেপ তৈরি করা হয়েছে, এবং color অপশন দিয়ে পলিগনের রঙ নির্ধারণ করা হয়েছে।
Polyline এবং Polygon কাস্টমাইজেশন
LeafletJS এ Polyline এবং Polygon এর বৈশিষ্ট্যগুলি আরও কাস্টমাইজ করা যায়, যেমন তাদের স্টাইল (রঙ, প্রস্থ, আউটলাইন), ড্যাশড লাইন, ফিল কালার ইত্যাদি।
১. Polyline স্টাইল কাস্টমাইজ করা
var polyline = L.polyline(latlngs, {
color: 'red',
weight: 5,
opacity: 0.7,
dashArray: '10, 5' // ড্যাশড লাইন
}).addTo(map);
২. Polygon স্টাইল কাস্টমাইজ করা
var polygon = L.polygon(latlngs, {
color: 'blue',
weight: 3,
opacity: 0.5,
fillColor: 'yellow',
fillOpacity: 0.2
}).addTo(map);
এখানে, weight দিয়ে লাইন বা পলিগনের প্রস্থ নির্ধারণ করা হয়েছে, opacity দিয়ে তার স্বচ্ছতা নির্ধারণ করা হয়েছে, এবং fillColor দিয়ে পলিগনের ভিতরের রঙ নির্ধারণ করা হয়েছে।
ইভেন্ট হ্যান্ডলিং
Polyine এবং Polygon এর উপর ইভেন্ট হ্যান্ডলিংও যোগ করা যেতে পারে, যেমন ক্লিক ইভেন্ট বা হভার ইভেন্ট।
উদাহরণ:
polygon.on('click', function() {
alert("Polygon এ ক্লিক করা হয়েছে!");
});
এখানে, পলিগনের উপর ক্লিক করলে একটি এলার্ট প্রদর্শিত হবে।
সারাংশ
LeafletJS এ Polyline এবং Polygon তৈরি করা সহজ এবং এটি ম্যাপে বিভিন্ন ধরনের জিওমেট্রিক শেপ ব্যবহার করে তথ্য প্রদর্শন করতে সহায়ক। আপনি সহজেই এই শেপগুলির মধ্যে পয়েন্ট সংযোগ করে রুট, এলাকা বা সীমা চিহ্নিত করতে পারেন এবং বিভিন্ন স্টাইল ও ইভেন্ট হ্যান্ডলিং দ্বারা তাদের কাস্টমাইজ করতে পারেন।
Read more
