عناصر التحكّم في الخريطة الثلاثية الأبعاد واستكشافها

نظرة عامة على عناصر التحكّم

تحتوي الخرائط المعروضة من خلال "خرائط ثلاثية الأبعاد لصور واقعية" في Maps JavaScript API على عناصر واجهة مستخدم تتيح للمستخدمين التفاعل مع الخريطة. تُعرف هذه العناصر باسم عناصر التحكّم ويمكنك اختيار تضمينها في واجهة المستخدم أو عدم تضمينها. في حال إيقاف عناصر التحكّم في واجهة المستخدم، سيظل بإمكان المستخدم التنقّل في الخريطة باستخدام اختصارات لوحة المفاتيح.

تتيح "خرائط ثلاثية الأبعاد لصور واقعية" في Maps JavaScript API أيضًا توجيه المستخدمين في الخريطة باستخدام مسارات الكاميرا المضبوطة مسبقًا. ويمكن تخصيص هذه المسارات ودمجها لإنشاء تجارب ثلاثية الأبعاد غنية.

عناصر التحكّم في الاستكشاف

تعرض الصورة التالية مجموعة عناصر التحكّم التلقائية التي تعرضها "خرائط ثلاثية الأبعاد لصور واقعية" في Maps JavaScript API:

في ما يلي قائمة بالمجموعة الكاملة من عناصر التحكّم في "خرائط ثلاثية الأبعاد لصور واقعية" في Maps JavaScript:

• يعرض عنصر التحكّم في التكبير/التصغير الزرَّين "+" و "-" لتغيير مستوى التكبير/التصغير في الخريطة.
• يتيح لك التحكّم في الإمالة تغيير إمالة الكاميرا.
• يتيح لك عنصر التحكّم في التدوير تغيير اتجاه الكاميرا.
• يعرض عنصر التحكّم في التنقّل أزرار "→" و"←" و"↑" و "↓" لتغيير مركز الخريطة.

يوضّح نموذج الرمز التالي كيفية تفعيل عناصر التحكّم في الاستكشاف أو إيقافها:

مسارات الكاميرا المُعدّة مسبقًا

توفّر "خرائط ثلاثية الأبعاد لصور واقعية" في Maps JavaScript مسارَين مُعدّين مسبقًا للكاميرا. يمكن تخصيص مسارات الكاميرا من خلال تغيير مدة الرسوم المتحركة (وبالتالي زيادة السرعة أو تقليلها)، أو من خلال الجمع بينها لإنشاء تجارب سينمائية أكثر.

تتيح "خرائط ثلاثية الأبعاد لصور واقعية" في Maps JavaScript مسارات الكاميرا التالية:

• تنتقل الرسوم المتحركة 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});
}

الخطوات التالية

• كيفية تقييد الخريطة والكاميرا
• كيفية الاستماع إلى تفاعل المستخدم والتعامل معه