مدل‌ها

پلاتفرم را انتخاب کنید: Android iOS JavaScript

مدل‌ها دارایی‌های سه‌بعدی هستند که می‌توانند به صحنه اضافه شوند تا اشیاء را نشان دهند. «نقشه‌های سه‌بعدی» در Maps JavaScript API از گنجاندن مدل‌های gLTF پشتیبانی می‌کند. این مدل‌ها را می‌توان مقیاس‌بندی و چرخاند تا امکان سفارشی‌سازی بیشتر فراهم شود.

مدل‌ها باید از ویژگی‌های اصلی glTF PBR پشتیبانی کنند. از هیچ افزونه یا دارایی افزونه‌ای پشتیبانی نمی‌شود.

افزودن مدل

سازنده Model3DElement مجموعه‌ای از Model3DElementOptions را می‌گیرد که مختصات LatLng مدل را مشخص می‌کند و مجموعه‌ای از پارامترها را برای پشتیبانی از موقعیت‌یابی مدل می‌گیرد.

مدل‌ها از گزینه‌های زیر پشتیبانی می‌کنند:

  • ‫position: مکان مدل که در مختصات LatLng بیان شده است.
  • orientation: چرخش سیستم مختصات مدل. چرخش‌ها به ترتیب زیر اعمال می‌شوند: چرخش، کج کردن و سپس جهت.
  • ‫scale: مدل را در فضای مختصات آن مقیاس‌بندی می‌کند. مقدار پیش‌فرض 1 است.
  • altitudeMode: نحوه تفسیر ارتفاع بیان‌شده در position.
  • ‫src: نشانی وب مدل.

مثال زیر نحوه افزودن مدل به نقشه و اصلاح آن را بااستفاده از برخی‌از گزینه‌های سفارشی‌سازی دردسترس نشان می‌دهد:

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