مدل ها

پلتفرم مورد نظر را انتخاب کنید: اندروید، iOS، جاوا اسکریپت

مدل‌ها، دارایی‌های سه‌بعدی هستند که می‌توانند برای نمایش اشیاء به صحنه اضافه شوند. نقشه‌های سه‌بعدی در 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',
        gestureHandling: 'COOPERATIVE',
    });

    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',
        gestureHandling: 'COOPERATIVE',
    });

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