ক্যামেরার দৃশ্য এবং সীমানা সীমাবদ্ধ করুন

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

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

নিম্নলিখিত উদাহরণটিতে এমন একটি মানচিত্র দেখানো হয়েছে যেখানে ক্যামেরার চলাচল সীমিত করার জন্য অবস্থানের সীমানা নির্ধারণ করা হয়েছে:

মানচিত্রের সীমানা সীমাবদ্ধ করুন

আপনি bounds অপশন সেট করে ক্যামেরার ভৌগোলিক সীমানা সীমাবদ্ধ করতে পারেন।

নিম্নলিখিত কোড নমুনাটি ম্যাপের সীমানা সীমাবদ্ধ করার পদ্ধতি প্রদর্শন করে:

async function init() {
  const { Map3DElement, MapMode } = await google.maps.importLibrary("maps3d");

  const map = new Map3DElement({
    center: { lat: 37.7704, lng: -122.3985, altitude: 500 },
    tilt: 67.5,
    mode: MapMode.HYBRID,
    bounds: {south: 37, west: -123, north: 38, east: -121}
  });

init();
}

ক্যামেরা সীমাবদ্ধ করুন

আপনি নিম্নলিখিত বিকল্পগুলির যেকোনো একটি সেট করে ক্যামেরার চলাচল সীমাবদ্ধ করতে পারেন:

• maxAltitude
• minAltitude
• maxHeading
• minHeading
• maxTilt
• minTilt

নিম্নলিখিত কোড নমুনাটি ক্যামেরা সীমাবদ্ধ করার পদ্ধতি প্রদর্শন করে:

async function init() {
  const { Map3DElement, MapMode } = await google.maps.importLibrary("maps3d");

  const map = new Map3DElement({
    center: { lat: 37.7704, lng: -122.3985, altitude: 500 },
    tilt: 67.5,
    mode: MapMode.HYBRID,
    minAltitude: 1,
    maxAltitude: 1000,
    minTilt: 35,
    maxTilt: 55
  });

 document.body.append(map);
}

init();

মানচিত্র এবং ক্যামেরার সীমানা সীমাবদ্ধ করুন

আপনি একই সাথে ম্যাপ এবং ক্যামেরা উভয়ের সীমানা সীমাবদ্ধ করতে পারেন। নিম্নলিখিত কোড নমুনাটি ম্যাপ এবং ক্যামেরা উভয়ের সীমানা সীমাবদ্ধ করার পদ্ধতি প্রদর্শন করে:

async function init() {
  const { Map3DElement, MapMode } = await google.maps.importLibrary("maps3d");

  const map = new Map3DElement({
    center: { lat: 37.7704, lng: -122.3985, altitude: 500 },
    tilt: 67.5,
    mode: MapMode.HYBRID,
    minAltitude: 1,
    maxAltitude: 1000,
    minTilt: 35,
    maxTilt: 55,
    bounds: {south: 37, west: -123, north: 38, east: -121}
  });

 document.body.append(map);
}

init();

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

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});
}

অঙ্গভঙ্গি পরিচালনা নিয়ন্ত্রণ করুন

যখন কোনো ব্যবহারকারী মানচিত্রযুক্ত একটি পৃষ্ঠা স্ক্রোল করেন, তখন স্ক্রোল করার ফলে অনিচ্ছাকৃতভাবে মানচিত্রটি জুম হয়ে যেতে পারে। আপনি gestureHandling ম্যাপ অপশনটি সেট করার মাধ্যমে এই আচরণটি নিয়ন্ত্রণ করতে পারেন।

অঙ্গভঙ্গি পরিচালনা: cooperative

"সহযোগী" অঙ্গভঙ্গি নিয়ন্ত্রণ ব্যবস্থা ব্যবহারকারীকে ম্যাপের জুম বা প্যানকে প্রভাবিত না করেই পৃষ্ঠাটি স্ক্রল করার সুযোগ দেয়। জুম করার জন্য, ব্যবহারকারীরা কন্ট্রোল, দুই-আঙুলের অঙ্গভঙ্গি (টাচস্ক্রিন ডিভাইসের জন্য), অথবা স্ক্রল করার সময় CMD/CTRL চেপে ধরে রাখতে পারেন।

নিম্নলিখিত কোডটি জেসচার হ্যান্ডলিংকে 'কোঅপারেটিভ' মোডে সেট করার পদ্ধতি প্রদর্শন করে:

new Map3DElement({
  center: { lat: 37.729901343702736, lng: -119.63788444355905, altitude: 1500 },
  tilt: 70,
  heading: 50,
  range: 4000,
  gestureHandling: 'COOPERATIVE',
});

অঙ্গভঙ্গি পরিচালনা: greedy

"গ্রিডি" জেসচার হ্যান্ডলিং সমস্ত স্ক্রোল ইভেন্ট এবং টাচ জেসচারে সাড়া দেয়।

অঙ্গভঙ্গি পরিচালনা: auto

"অটো" জেসচার হ্যান্ডলিং ম্যাপের আচরণ পরিবর্তন করে, যা নির্ভর করে ম্যাপটি একটি <iframe> এর মধ্যে আছে কি না এবং পেজটি স্ক্রলযোগ্য কি না তার উপর।

• যদি ম্যাপটি একটি <iframe> এর মধ্যে থাকে, তাহলে জেসচার হ্যান্ডলিং 'কোঅপারেটিভ' হবে।
• যদি ম্যাপটি কোনো <iframe> মধ্যে না থাকে, তাহলে জেসচার হ্যান্ডলিং "গ্রিডি" হবে।