3D মানচিত্র নিয়ন্ত্রণ এবং অনুসন্ধান

নিয়ন্ত্রণ ওভারভিউ

ম্যাপ জাভাস্ক্রিপ্ট এপিআই-এ ফটোরিয়ালিস্টিক 3D মানচিত্রের মাধ্যমে প্রদর্শিত মানচিত্রের সাথে ব্যবহারকারীর মিথস্ক্রিয়া সমর্থন করার জন্য UI উপাদান রয়েছে। এই উপাদানগুলি নিয়ন্ত্রণ হিসাবে পরিচিত এবং আপনি সেগুলিকে UI-তে অন্তর্ভুক্ত করতে বা না করতে পারেন৷ আপনি যদি UI নিয়ন্ত্রণগুলি দমন করেন, ব্যবহারকারী এখনও কীবোর্ড শর্টকাট ব্যবহার করে মানচিত্রের চারপাশে নেভিগেট করতে পারেন।

Maps JavaScript API-এ ফটোরিলিস্টিক 3D মানচিত্রও প্রিসেট ক্যামেরা পাথ ব্যবহার করে ম্যাপের চারপাশে আপনার ব্যবহারকারীদের গাইড করা সমর্থন করে। সমৃদ্ধ 3D অভিজ্ঞতা তৈরি করতে এই পথগুলি কাস্টমাইজ করা এবং একত্রিত করা যেতে পারে।

অনুসন্ধান নিয়ন্ত্রণ

নিম্নলিখিত চিত্রটি মানচিত্র জাভাস্ক্রিপ্ট API-এ ফটোরিয়ালিস্টিক 3D মানচিত্র দ্বারা প্রদর্শিত নিয়ন্ত্রণের ডিফল্ট সেট দেখায়:

উপস্থিত নিয়ন্ত্রণ সহ মানচিত্রের চিত্র

নিচে Maps JavaScript-এ ফটোরিয়ালিস্টিক 3D ম্যাপে নিয়ন্ত্রণের সম্পূর্ণ সেটের একটি তালিকা রয়েছে:

  • জুম নিয়ন্ত্রণ মানচিত্রের জুম স্তর পরিবর্তন করার জন্য "+" এবং "-" বোতাম প্রদর্শন করে।
  • টিল্ট কন্ট্রোল আপনাকে ক্যামেরার কাত পরিবর্তন করতে দেয়।
  • ঘোরান নিয়ন্ত্রণ আপনাকে ক্যামেরার শিরোনাম পরিবর্তন করতে দেয়।
  • সরান নিয়ন্ত্রণ মানচিত্রের কেন্দ্র পরিবর্তনের জন্য "←", "→", "↑", এবং "↓" বোতাম প্রদর্শন করে।

নিম্নলিখিত কোড নমুনা টগলিং অনুসন্ধান নিয়ন্ত্রণ প্রদর্শন করে:

জাভাস্ক্রিপ্ট 

const map = new Map3DElement({
  center: { lat: 37.819852, lng: -122.478549, altitude: 2000 },
  tilt: 75,
  heading: 330,
  mode: MapMode.SATELLITE,
  defaultUIDisabled: true,
});

এইচটিএমএল 

<gmp-map-3d
  mode="hybrid"
  range="639.274301042242"
  tilt="64.92100184857551"
  center="34.0768990953219,-118.47450491266041,292.9794737933403"
  heading="-61.02026752077781"
  default-ui-disabled
></gmp-map-3d>

প্রিসেট ক্যামেরা পাথ

ম্যাপ জাভাস্ক্রিপ্টে ফটোরিয়ালিস্টিক 3D মানচিত্র দুটি প্রিসেট ক্যামেরা পাথ প্রদান করে। ক্যামেরা পাথগুলি অ্যানিমেশনের সময়কাল পরিবর্তন করে (যার ফলে গতি বৃদ্ধি বা হ্রাস) বা আরও সিনেমাটিক অভিজ্ঞতা তৈরি করতে তাদের একত্রিত করে কাস্টমাইজ করা যেতে পারে।

ম্যাপ জাভাস্ক্রিপ্টে ফটোরিয়ালিস্টিক 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 },
      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,
    rounds: 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-animation-end', () => {
    map.flyCameraAround({
      camera: flyToCamera,
      durationMillis: 60000,
      rounds: 1
    });
  }, {once: true});
}

পরবর্তী পদক্ষেপ