LeafletJS-এ Polyline এবং Polygon দুটি ভিন্ন ধরনের জিওমেট্রিক শেপ (geometric shapes) যা ম্যাপে বিভিন্ন লাইন এবং আঞ্চলিক এলাকা চিহ্নিত করার জন্য ব্যবহৃত হয়। এগুলি ম্যাপের ওপর বিভিন্ন রুট, সীমান্ত, বা এলাকা চিহ্নিত করতে ব্যবহৃত হয় এবং এগুলির সঙ্গে বিভিন্ন ইন্টারঅ্যাকশন বা কাস্টমাইজেশন যোগ করা সম্ভব।
Polyline কী?
Polyline হল একটি রেখা যা দুটি বা তার বেশি পয়েন্টের মধ্যে সংযুক্ত হয়। এটি এক বা একাধিক সরল রেখার সমন্বয়ে তৈরি হয় এবং সাধারণত রুট বা ট্র্যাজেক্টরি দেখানোর জন্য ব্যবহৃত হয়।
Polyline এর কাজ
Polyline সাধারণত ব্যবহার করা হয় কোন দুটি বা তার বেশি পয়েন্টের মধ্যে সংযোগ স্থাপন করতে। উদাহরণস্বরূপ, একটি ট্র্যাভেল রুট বা ভ্রমণ পথ একটি polyline দিয়ে প্রদর্শন করা যেতে পারে।
Polyline তৈরি করার উদাহরণ:
<script>
// ম্যাপ তৈরি করা
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.505, -0.09],
[51.515, -0.1],
[51.525, -0.11]
];
var polyline = L.polyline(latlngs, {color: 'blue'}).addTo(map);
// Polyline-এ পপ-আপ যোগ করা
polyline.bindPopup("এটি একটি Polyline।");
</script>
এখানে:
L.polyline(): এটি Polyline তৈরি করার জন্য ব্যবহৃত হয়। এর মধ্যে পয়েন্টের একটি অ্যারে (latlngs) পাঠানো হয়।color: Polyline এর রঙ নির্ধারণ করে।
Polygon কী?
Polygon একটি বন্ধ রেখা (closed shape) যা একাধিক পয়েন্ট দ্বারা তৈরি হয় এবং এটি একটি ভেতরের এলাকা ধারণ করে। Polygon সাধারণত ম্যাপের ওপর একটি নির্দিষ্ট এলাকা বা অঞ্চলের সীমা চিহ্নিত করতে ব্যবহৃত হয়।
Polygon এর কাজ
Polygon এর মাধ্যমে আপনি যেকোনো এলাকাকে চিহ্নিত করতে পারেন। উদাহরণস্বরূপ, একটি শহরের সীমারেখা বা কোন প্রকল্পের নির্ধারিত এলাকা Polygon দ্বারা চিহ্নিত করা যেতে পারে।
Polygon তৈরি করার উদাহরণ:
<script>
// ম্যাপ তৈরি করা
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.509, -0.08],
[51.503, -0.06],
[51.51, -0.047]
];
var polygon = L.polygon(latlngs, {color: 'green'}).addTo(map);
// Polygon-এ পপ-আপ যোগ করা
polygon.bindPopup("এটি একটি Polygon।");
</script>
এখানে:
L.polygon(): এটি Polygon তৈরি করতে ব্যবহৃত হয়। Polygon-এর পয়েন্টগুলি একটি অ্যারেতে সংরক্ষিত থাকে।color: Polygon-এর সীমারেখার রঙ নির্ধারণ করা হয়।
Polyline এবং Polygon এর মধ্যে পার্থক্য
- Polyline: এটি একটি খালি রেখা, যা দুটি বা তার বেশি পয়েন্টের মধ্যে সংযুক্ত থাকে। এটি সাধারণত রুট, পথ, বা সরল রেখার জন্য ব্যবহৃত হয়।
- Polygon: এটি একটি বন্ধ রেখা, যা পয়েন্টগুলোকে একটি নির্দিষ্ট এলাকা বা আঞ্চলিক সীমার মধ্যে বন্ধ করে। এটি সাধারণত একটি নির্দিষ্ট এলাকা বা অঞ্চল চিহ্নিত করতে ব্যবহৃত হয়।
Polyline এবং Polygon কাস্টমাইজেশন
LeafletJS এ Polyline এবং Polygon কাস্টমাইজ করা সম্ভব। আপনি এর রঙ, প্রস্থ, আকার, শেডিং ইত্যাদি পরিবর্তন করতে পারেন।
Polyline কাস্টমাইজেশন:
<script>
var latlngs = [
[51.505, -0.09],
[51.515, -0.1],
[51.525, -0.11]
];
var polyline = L.polyline(latlngs, {
color: 'red',
weight: 5,
opacity: 0.7,
dashArray: '10, 5' // ড্যাশ লাইনের প্যাটার্ন
}).addTo(map);
</script>
Polygon কাস্টমাইজেশন:
<script>
var latlngs = [
[51.509, -0.08],
[51.503, -0.06],
[51.51, -0.047]
];
var polygon = L.polygon(latlngs, {
color: 'purple',
weight: 3,
fillColor: 'yellow', // ভেতরের রঙ
fillOpacity: 0.5 // ভেতরের আচ্ছাদন
}).addTo(map);
</script>
সারাংশ
Polyline এবং Polygon হল LeafletJS-এ ব্যবহৃত দুটি গুরুত্বপূর্ণ জিওমেট্রিক শেপ, যা ম্যাপে রুট, এলাকা, বা সীমা চিহ্নিত করার জন্য ব্যবহৃত হয়। Polyline একটি সরল রেখা, যা একাধিক পয়েন্টের মধ্যে সংযুক্ত থাকে, যখন Polygon একটি বন্ধ রেখা যা একটি নির্দিষ্ট এলাকা চিহ্নিত করে। আপনি এগুলির রঙ, আকার, এবং অন্যান্য বৈশিষ্ট্য কাস্টমাইজ করে ইন্টারেক্টিভ ম্যাপিং অ্যাপ্লিকেশন তৈরি করতে পারেন।
Read more