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

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

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

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

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

تعرض الصورة التالية المجموعة التلقائية من عناصر التحكّم التي تعرِضها ميزة "الخرائط الثلاثية الأبعاد ذات المظهر الواقعي" في واجهة برمجة التطبيقات JavaScript لـ "خرائط Google":

صورة خريطة تتضمّن عناصر تحكّم

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

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

يوضّح نموذج الرمز البرمجي التالي كيفية تبديل عناصر التحكّم في الاستكشاف:

JavaScript

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

HTML

<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>

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

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

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

  • تطير رسوم 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});
}

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