الطرُز

اختيار النظام الأساسي: Android‏ iOS‏ JavaScript‏

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

يجب أن تتوافق النماذج مع السمات الأساسية لـ glTF PBR. لا تتوفّر أي إضافات أو خصائص إضافات.

إضافة نموذج

تأخذ دالة الإنشاء Model3DElement مجموعة من Model3DElementOptions تحدّد إحداثيات LatLng للنموذج ومجموعة من المَعلمات لدعم تحديد موضع النموذج.

تتيح النماذج الخيارات التالية:

  • ‫position: موقع النموذج معبَّر عنه بإحداثيات LatLng.
  • ‫orientation: دوران نظام إحداثيات النموذج يتم تطبيق عمليات التدوير بالترتيب التالي: التمايل ثم الإمالة ثم الاتجاه.
  • ‫scale: لتغيير حجم النموذج في مساحة الإحداثيات تكون القيمة التلقائية 1.
  • ‫altitudeMode: كيفية تفسير الارتفاع المعبَّر عنه في position
  • ‫src: عنوان URL الخاص بالنموذج

يوضّح المثال التالي كيفية إضافة نموذج إلى الخريطة وتعديله باستخدام بعض خيارات التخصيص المتاحة:

async function init() {
    // Import the needed libraries.
    const { Map3DElement, Model3DElement } =
        await google.maps.importLibrary('maps3d');

    const map = new Map3DElement({
        center: { lat: 39.1178, lng: -106.4452, altitude: 4395.4952 },
        range: 1500,
        tilt: 74,
        heading: 0,
        mode: 'HYBRID',
    });

    const model = new Model3DElement({
        src: 'https://maps-docs-team.web.app/assets/windmill.glb',
        position: { lat: 39.1178, lng: -106.4452, altitude: 4495.4952 },
        orientation: { heading: 0, tilt: 270, roll: 90 },
        scale: 0.15,
        altitudeMode: 'CLAMP_TO_GROUND',
    });

    document.body.append(map);
    map.append(model);
}

void init();

إضافة نموذج تفاعلي

تتيح النماذج أيضًا التفاعل. يغيّر المثال التالي حجم النموذج عند النقر عليه.

async function init() {
    // Import the needed libraries.
    const { Map3DElement, Model3DInteractiveElement } =
        await google.maps.importLibrary('maps3d');

    const map = new Map3DElement({
        center: { lat: 39.1178, lng: -106.4452, altitude: 4395.4952 },
        range: 1500,
        tilt: 74,
        heading: 0,
        mode: 'HYBRID',
    });

    const model = new Model3DInteractiveElement({
        src: 'https://maps-docs-team.web.app/assets/windmill.glb',
        position: { lat: 39.1178, lng: -106.4452, altitude: 4495.4952 },
        orientation: { heading: 0, tilt: 270, roll: 90 },
        scale: 0.15,
        altitudeMode: 'CLAMP_TO_GROUND',
    });

    model.addEventListener('gmp-click', function () {
        this.scale = Math.random() * (0.5 - 0.1) + 0.1;
    });

    document.body.append(map);
    map.append(model);
}

void init();