রেন্ডারিংয়ের ধরন (রাস্টার ও ভেক্টর)

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

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

ডিফল্ট রেন্ডারিংয়ের ধরন

আপনার ইমপ্লিমেন্টেশনের উপর নির্ভর করে ম্যাপের ডিফল্ট রেন্ডারিংয়ের ধরন আলাদা হয়।

  • <gmp-map> এলিমেন্ট ব্যবহার করে Maps ভেক্টর রেন্ডারিং টাইপে ডিফল্ট হয়ে যায়।

  • google.maps.Map সহ <div> এলিমেন্ট ব্যবহার করা ম্যাপ ডিফল্ট হিসেবে রাস্টার রেন্ডারিংয়ের ধরন ব্যবহার করে।

renderingType ম্যাপ বিকল্প নির্দিষ্ট করে অথবা সংশ্লিষ্ট ম্যাপ আইডিতে বিকল্প সেট করে, ম্যাপের জন্য রেন্ডারিংয়ের ধরন সেট করুন। 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 ম্যাপ বিকল্পটি true-এ সেট করুন অথবা map.setHeadingInteractionEnabled(true)-এ কল করুন।

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

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

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

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

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

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

কোন ধরনের রেন্ডারিং ব্যবহার করা হচ্ছে তা শনাক্ত করুন

কোন রেন্ডারিং টাইপ ব্যবহার করা হয়েছে তা শনাক্ত করতে, ম্যাপ অবজেক্টে getRenderingType() কল করুন, যেমনটি নিম্নলিখিত উদাহরণে দেখানো হয়েছে:

  // Wait for the map to finish loading.
  google.maps.event.addListenerOnce(map, "tilesloaded", () => {
      // Print the rendering type to the console.
      console.log(`${map.getRenderingType()}`);
  });```