OpenLayers একটি শক্তিশালী জাভাস্ক্রিপ্ট টুল যা আমাদেরকে একটি ওয়েবসাইটে সব ধরনের মানচিত্র তৈরি এবং প্রদর্শন করতে সক্ষম করে। এই নিবন্ধটি আপনাকে একটি বিন্দু এবং একটি লাইন স্ট্রিং বৈশিষ্ট্য যুক্ত করতে নির্দেশনা দেবে, তারপর তাদের অনুমানগুলিকে স্থানাঙ্ক ব্যবহার করতে রূপান্তরিত করবে, তারপর স্তরের স্টাইল সেট করে কিছু রঙ যুক্ত করুন।
অনুগ্রহ করে মনে রাখবেন যে এই নিবন্ধটি অনুসরণ করার জন্য আপনার একটি ওয়েবপৃষ্ঠায় একটি কার্যকরী ওপেন লেয়ার মানচিত্র ইনস্টল করা দরকার। যদি আপনার না থাকে, তাহলে দেখুন কিভাবে OpenLayers 3 ব্যবহার করে একটি মানচিত্র তৈরি করা যায়।
ধাপ
3 এর অংশ 1: পয়েন্ট এবং লাইন স্ট্রিং বৈশিষ্ট্য যোগ করা
ধাপ 1. একটি বিন্দু বৈশিষ্ট্য তৈরি করুন।
আপনার কোডে নিচের লাইনটি অনুলিপি করুন
উপাদান:
var point_feature = নতুন ol. Feature ({});
ধাপ 2. বিন্দুর জ্যামিতি সেট করুন।
ওপেনলেয়ার্সকে পয়েন্টটি কোথায় রাখতে হবে তা বলার জন্য, আপনাকে একটি জ্যামিতি তৈরি করতে হবে এবং এটিকে একটি স্থানাঙ্ক দিতে হবে, যা [দ্রাঘিমাংশ (E-W), অক্ষাংশ (N-S)] আকারে একটি অ্যারে। নিম্নলিখিত কোডটি এটি তৈরি করে এবং বিন্দুর জ্যামিতি সেট করে:
var point_geom = নতুন ol.geom. Point ([20, 20]); point_feature.setGeometry (point_geom);
ধাপ 3. একটি লাইন স্ট্রিং বৈশিষ্ট্য তৈরি করুন।
রেখার স্ট্রিংগুলি সরলরেখার মধ্যে বিভক্ত। আমরা সেগুলি ঠিক পয়েন্টের মতো তৈরি করি, কিন্তু আমরা লাইন স্ট্রিংয়ের প্রতিটি বিন্দুর জন্য এক জোড়া স্থানাঙ্ক প্রদান করি:
var linestring_feature = new ol. Feature ({geometry: new ol.geom. LineString (
ধাপ 4. একটি ভেক্টর স্তরে বৈশিষ্ট্য যুক্ত করুন।
বৈশিষ্ট্যগুলিকে মানচিত্রে যোগ করার জন্য, আপনাকে সেগুলিকে একটি উৎসে যুক্ত করতে হবে, যা আপনি একটি ভেক্টর স্তরে যোগ করেন, যা আপনি তারপর মানচিত্রে যোগ করতে পারেন:
var vector_layer = new ol.layer. Vector ({source: new ol.source. Vector ({features: [point_feature, linestring_feature]})}) map.addLayer (vector_layer);
3 এর 2 অংশ: সমন্বয় ব্যবহার করার জন্য বৈশিষ্ট্যগুলির জ্যামিতিকে রূপান্তর করা
যেকোনো শক্তিশালী ম্যাপিং সফটওয়্যারের মতো, ওপেনলেয়ার ম্যাপগুলিতে তথ্য প্রদর্শনের বিভিন্ন উপায় সহ বিভিন্ন স্তর থাকতে পারে। কারণ পৃথিবী একটি গ্লোব এবং সমতল নয়, যখন আমরা আমাদের সমতল মানচিত্রে এটি প্রদর্শন করার চেষ্টা করি, তখন সফটওয়্যারটিকে সমতল মানচিত্রের সাথে মেলাতে অবস্থানগুলি সামঞ্জস্য করতে হবে। মানচিত্রের তথ্য প্রদর্শনের এই বিভিন্ন উপায় বলা হয় অনুমান । একই মানচিত্রে একটি ভেক্টর স্তর এবং একটি টাইল স্তর একসাথে ব্যবহার করার অর্থ হল আমাদের স্তরগুলিকে এক অভিক্ষেপ থেকে অন্য অভিক্ষেপে রূপান্তর করতে হবে।
ধাপ 1. একটি অ্যারে মধ্যে বৈশিষ্ট্য রাখুন।
আমরা যে বৈশিষ্ট্যগুলিকে একসঙ্গে একটি অ্যারেতে রূপান্তরিত করতে চাই সেগুলি স্থাপন করে শুরু করি যার মাধ্যমে আমরা পুনরাবৃত্তি করতে পারি।
var বৈশিষ্ট্য = [point_feature, linestring_feature];
ধাপ 2. ট্রান্সফর্ম ফাংশন লিখুন।
OpenLayers- এ, আমরা প্রতিটি বৈশিষ্ট্যের জ্যামিতি বস্তুর উপর রূপান্তর () ফাংশন ব্যবহার করতে পারি। এই রূপান্তর কোডটি এমন একটি ফাংশনে রাখুন যা আমরা পরে কল করতে পারি:
ফাংশন transform_geometry (উপাদান) {var current_projection = new ol.proj. Projection ({code: "EPSG: 4326"}); var new_projection = tile_layer.getSource ()। getProjection (); element.getGeometry ()। রূপান্তর (current_project, new_projection);); }
ধাপ 3. বৈশিষ্ট্যগুলিতে রূপান্তর ফাংশনটি কল করুন।
এখন কেবল অ্যারের মাধ্যমে পুনরাবৃত্তি করুন।
features.forEach (transform_geometry);
3 এর অংশ 3: ভেক্টর লেয়ারের স্টাইল সেট করা
মানচিত্রে প্রতিটি বৈশিষ্ট্য কেমন দেখাচ্ছে তা পরিবর্তন করতে, আমাদের একটি স্টাইল তৈরি এবং প্রয়োগ করতে হবে। শৈলীগুলি রঙ, আকার এবং পয়েন্ট এবং লাইনের অন্যান্য বৈশিষ্ট্যগুলি পরিবর্তন করতে পারে এবং তারা প্রতিটি পয়েন্টের জন্য ছবিও প্রদর্শন করতে পারে, যা কাস্টমাইজড মানচিত্রের জন্য খুব সহজ। এই বিভাগটি প্রয়োজনীয় নয়, তবে এটি মজাদার এবং দরকারী।
ধাপ 1. ফিল এবং স্টোক তৈরি করুন।
একটি ফিল স্টাইল অবজেক্ট এবং একটি আধা-স্বচ্ছ লাল রঙ এবং একটি স্ট্রোক (লাইন) স্টাইল তৈরি করুন যা একটি শক্ত লাল রেখা:
var fill = নতুন ol.style. Fill ({color: [180, 0, 0, 0.3]}); var স্ট্রোক = নতুন ol.style. Stroke ({color: [180, 0, 0, 1], প্রস্থ: 1});
ধাপ 2. স্টাইল তৈরি করুন এবং স্তরে প্রয়োগ করুন।
OpenLayers শৈলী বস্তু বেশ শক্তিশালী, কিন্তু আমরা শুধুমাত্র এখন জন্য ফিল এবং স্ট্রোক সেট করতে যাচ্ছি:
var style = new ol.style. Style ({image: new ol.style. Circle ({fill: fill, stroke: strock, radius: 8}), fill: fill, stroke: stroke}); vector_layer.setStyle (শৈলী);
