রেন্ডারিং টাইপ (রাস্টার এবং ভেক্টর)

Maps JavaScript API মানচিত্রের দুটি ভিন্ন বাস্তবায়ন অফার করে: রাস্টার এবং ভেক্টর। রাস্টার মানচিত্রটি ডিফল্টরূপে লোড করা হয় এবং পিক্সেল-ভিত্তিক রাস্টার চিত্র টাইলসের একটি গ্রিড হিসাবে মানচিত্রটি লোড করে, যা Google Maps প্ল্যাটফর্ম সার্ভার-সাইড দ্বারা তৈরি করা হয়, তারপর আপনার ওয়েব অ্যাপে পরিবেশিত হয়। ভেক্টর মানচিত্রটি ভেক্টর-ভিত্তিক টাইলসের সমন্বয়ে গঠিত, যা ক্লায়েন্ট-সাইডের লোডের সময় WebGL ব্যবহার করে আঁকা হয়, এটি একটি ওয়েব প্রযুক্তি যা ব্রাউজারকে ব্যবহারকারীর ডিভাইসে GPU অ্যাক্সেস করতে দেয় যাতে 2D এবং 3D গ্রাফিক্স রেন্ডার করা যায়। সর্বোত্তম ব্যবহারকারীর অভিজ্ঞতার জন্য ভেক্টর মানচিত্রের ধরণটি সুপারিশ করা হয়, কারণ এটি উন্নত ভিজ্যুয়াল বিশ্বস্ততা প্রদান করে এবং মানচিত্রে টিল্ট এবং হেডিং নিয়ন্ত্রণ করার ক্ষমতা প্রদান করে। ভেক্টর মানচিত্র বৈশিষ্ট্য সম্পর্কে আরও জানুন।

renderingType map বিকল্পটি নির্দিষ্ট করে অথবা সংশ্লিষ্ট মানচিত্র আইডিতে বিকল্পটি সেট করে একটি মানচিত্রের জন্য রেন্ডারিং প্রকার সেট করুন। renderingType বিকল্পটি একটি মানচিত্র আইডি কনফিগার করে তৈরি যেকোনো রেন্ডারিং প্রকার সেটিংসকে ওভাররাইড করে।

renderingType বিকল্পটি নির্দিষ্ট করুন

আপনার মানচিত্রের জন্য রাস্টার অথবা ভেক্টর রেন্ডারিং টাইপ নির্দিষ্ট করতে renderingType বিকল্পটি ব্যবহার করুন (কোনও মানচিত্র আইডি প্রয়োজন নেই)। div উপাদান এবং জাভাস্ক্রিপ্ট ব্যবহার করে লোড করা মানচিত্রের জন্য, ডিফল্ট রেন্ডারিং টাইপ হল google.maps.RenderingType.RASTER । renderingType বিকল্পটি সেট করতে এই পদক্ষেপগুলি নিন:

  1. RenderingType লাইব্রেরি লোড করুন; Maps লাইব্রেরি লোড করার সময় এটি করা যেতে পারে:

    const { Map, RenderingType } = await google.maps.importLibrary("maps");

  2. মানচিত্রটি শুরু করার সময়, renderingType বিকল্পটি ব্যবহার করে RenderingType.VECTOR অথবা RenderingType.RASTER উল্লেখ করুন:

    map = new Map(
  document.getElementById('map'),
  {
    zoom: 4,
    center: position,
    renderingType: RenderingType.VECTOR,
  }
);

যখন ভেক্টর ম্যাপ রেন্ডারিং টাইপ সেট করা থাকে, তখন আপনাকে প্রয়োজনীয় বৈশিষ্ট্যগুলির জন্য বিকল্পগুলি সেট করতে হবে।

  • টিল্ট সক্ষম করতে, tiltInteractionEnabled ম্যাপ বিকল্পটি true তে সেট করুন অথবা map.setTiltInteractionEnabled(true) কল করুন।
  • প্যানিং সক্ষম করতে, headingInteractionEnabled map বিকল্পটি true তে সেট করুন অথবা map.setHeadingInteractionEnabled(true) কল করুন।

<gmp-map> এলিমেন্ট ব্যবহার করে লোড করা ম্যাপের জন্য, ডিফল্ট রেন্ডারিং টাইপ হল google.maps.RenderingType.VECTOR , যেখানে টিল্ট এবং হেডিং কন্ট্রোল সক্ষম করা আছে। <gmp-map> এলিমেন্ট ব্যবহার করে রেন্ডারিং টাইপ সেট করতে, rendering-type অ্যাট্রিবিউট ব্যবহার করুন।

রেন্ডারিং টাইপ সেট করতে একটি ম্যাপ আইডি ব্যবহার করুন

আপনি একটি মানচিত্র আইডি ব্যবহার করে রেন্ডারিং টাইপও নির্দিষ্ট করতে পারেন। একটি নতুন মানচিত্র আইডি তৈরি করতে, ক্লাউড-ভিত্তিক মানচিত্র স্টাইলিং ব্যবহার করা - একটি মানচিত্র আইডি পান - এর ধাপগুলি অনুসরণ করুন। মানচিত্রের ধরণটি জাভাস্ক্রিপ্টে সেট করতে ভুলবেন না এবং একটি বিকল্প ( ভেক্টর বা রাস্টার ) নির্বাচন করুন। মানচিত্রে টিল্ট এবং ঘূর্ণন সক্ষম করতে টিল্ট এবং ঘূর্ণন চেক করুন। এটি করার ফলে আপনি প্রোগ্রাম্যাটিকভাবে এই মানগুলি সামঞ্জস্য করতে পারবেন এবং ব্যবহারকারীরা সরাসরি মানচিত্রে টিল্ট এবং শিরোনাম সামঞ্জস্য করতে পারবেন। যদি টিল্ট বা শিরোনাম ব্যবহার আপনার অ্যাপকে প্রতিকূলভাবে প্রভাবিত করে, তাহলে টিল্ট এবং ঘূর্ণন চেক না করে রাখুন যাতে ব্যবহারকারীরা টিল্ট এবং ঘূর্ণন সামঞ্জস্য করতে সক্ষম না হন।

ভেক্টর ম্যাপ আইডি তৈরি করুন

এরপর, আপনার তৈরি করা ম্যাপ আইডি দিয়ে আপনার ম্যাপ ইনিশিয়ালাইজেশন কোড আপডেট করুন। আপনি ম্যাপ ম্যানেজমেন্ট পৃষ্ঠায় আপনার ম্যাপ আইডিগুলি খুঁজে পেতে পারেন। এখানে দেখানো mapId প্রপার্টি ব্যবহার করে ম্যাপটি ইনস্ট্যান্ট করার সময় একটি ম্যাপ আইডি প্রদান করুন:

map = new google.maps.Map(document.getElementById('map'), {
  center: {lat: -34.397, lng: 150.644},
  zoom: 8,
  mapId: 'MAP_ID'
});