الطرُز

اختيار النظام الأساسي: 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();