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

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

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

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

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

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

    const { Map, RenderingType } = await google.maps.importLibrary("maps");
    
  2. মানচিত্র শুরু করার সময়, RenderingType.VECTOR বা RenderingType.RASTER উল্লেখ করতে renderingType বিকল্পটি ব্যবহার করুন :

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

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

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

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

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

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

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

এরপরে, আপনার তৈরি করা মানচিত্র ID দিয়ে আপনার মানচিত্র আরম্ভ করার কোড আপডেট করুন। আপনি মানচিত্র ব্যবস্থাপনা পৃষ্ঠায় আপনার মানচিত্র IDs খুঁজে পেতে পারেন. এখানে দেখানো হিসাবে mapId প্রপার্টি ব্যবহার করে ম্যাপ ইনস্ট্যান্টিয়েট করার সময় একটি ম্যাপ আইডি প্রদান করুন:

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

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

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

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

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

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

    const { Map, RenderingType } = await google.maps.importLibrary("maps");
    
  2. মানচিত্র শুরু করার সময়, RenderingType.VECTOR বা RenderingType.RASTER উল্লেখ করতে renderingType বিকল্পটি ব্যবহার করুন :

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

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

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

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

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

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

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

এরপরে, আপনার তৈরি করা মানচিত্র ID দিয়ে আপনার মানচিত্র আরম্ভ করার কোড আপডেট করুন। আপনি মানচিত্র ব্যবস্থাপনা পৃষ্ঠায় আপনার মানচিত্র IDs খুঁজে পেতে পারেন. এখানে দেখানো হিসাবে mapId প্রপার্টি ব্যবহার করে ম্যাপ ইনস্ট্যান্টিয়েট করার সময় একটি ম্যাপ আইডি প্রদান করুন:

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