ক্যামেরার পথগুলো অ্যানিমেট করুন

প্ল্যাটফর্ম নির্বাচন করুন: অ্যান্ড্রয়েড আইওএস জাভাস্ক্রিপ্ট

আপনার ব্যবহারকারীদের আরও বাস্তবসম্মত অভিজ্ঞতা দেওয়ার জন্য আপনি আপনার 3D ম্যাপে ক্যামেরা পাথ অ্যানিমেশন যোগ করতে পারেন। ক্যামেরা পাথ অ্যানিমেশনগুলো ম্যাপের কোনো একটি নির্দিষ্ট বিন্দুতে যেতে বা তার চারপাশে ঘুরতে পারে।

নিম্নলিখিত উদাহরণটি flyCameraTo এবং flyCameraAround অ্যানিমেশনগুলিকে একত্রিত করে:

পূর্বনির্ধারিত ক্যামেরা পথ

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

Maps JavaScript-এর 3D ম্যাপ নিম্নলিখিত ক্যামেরা পাথগুলো সমর্থন করে:

• flyCameraTo অ্যানিমেশনটি ম্যাপের কেন্দ্র থেকে একটি নির্দিষ্ট গন্তব্যে উড়ে যায়।
• flyCameraAround অ্যানিমেশনটি ম্যাপের কোনো একটি বিন্দুকে কেন্দ্র করে নির্দিষ্ট সংখ্যক বার ঘোরে।

উপলব্ধ দুটি পথকে একত্রিত করে কোনো একটি নির্দিষ্ট লক্ষ্যে উড়ে যাওয়া, সেটিকে কেন্দ্র করে আবর্তন করা এবং তারপর নির্দিষ্ট সময়ে থেমে যাওয়া যেতে পারে।

উড়ে যান

নিম্নলিখিত কোড নমুনাটি ক্যামেরাকে কোনো একটি স্থানে উড়িয়ে নিয়ে যাওয়ার অ্যানিমেশন প্রদর্শন করে:

const map = document.querySelector('gmp-map-3d');

async function init() {
  await google.maps.importLibrary('maps3d');

  map.flyCameraTo({
    endCamera: {
      center: { lat: 37.6191, lng: -122.3816, altitude: 500 },
      altitudeMode: 'RELATIVE_TO_GROUND',
      tilt: 67.5,
      range: 1000
    },
    durationMillis: 5000
  });
}

উড়ে বেড়াও

নিম্নলিখিত কোড নমুনাটি একটি নির্দিষ্ট স্থানে ক্যামেরাকে ঘুরিয়ে আনার অ্যানিমেশন প্রদর্শন করে:

const map = document.querySelector('gmp-map-3d');

async function init() {
  await google.maps.importLibrary('maps3d');

  map.flyCameraAround({
    camera,
    durationMillis: 60000,
    repeatCount: 1
  });
}

অ্যানিমেশন একত্রিত করুন

নিম্নলিখিত কোড নমুনাটি দেখায় কীভাবে অ্যানিমেশনগুলিকে একত্রিত করে ক্যামেরাকে একটি নির্দিষ্ট স্থানে নিয়ে যাওয়া হয় এবং প্রথম অ্যানিমেশনটি শেষ হলে সেই স্থানটির চারপাশে ঘোরানো হয়:

const map = document.querySelector('gmp-map-3d');

async function init() {
  await google.maps.importLibrary('maps3d');

  map.flyCameraTo({
    endCamera: flyToCamera,
    durationMillis: 5000,
  });

  map.addEventListener('gmp-animationend', () => {
    map.flyCameraAround({
      camera: flyToCamera,
      durationMillis: 60000,
      repeatCount: 1
    });
  }, {once: true});
}