الطرُز

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

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

إضافة نموذج

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

تتيح الطُرز الخيارات التالية:

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

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

async function init() {
  const { Map3DElement, MapMode, Model3DElement } = await google.maps.importLibrary("maps3d");

  const map = new Map3DElement({
    center: {lat: 37.7438, lng: -121.5088, altitude: 1800},
    heading: -90,
    tilt: 90,
    mode: MapMode.SATELLITE,
  });

  document.body.append(map);
  
  const models = [
    // A model with regular settings.
    {
      position: {lat: 37.76, lng: -121.63, altitude: 0},
      orientation: {tilt: 270},
    },
    // Scaled down model.
    {
      position: {lat: 37.75, lng: -121.63, altitude: 0},
      orientation: {tilt: 270},
      scale: 0.8,
    },
    // Scaled up model.
    {
      position: {lat: 37.735, lng: -121.63, altitude: 0},
      orientation: {tilt: 270},
      scale: 1.2,
    },
    // A model with an additional transformation applied.
    {
      position: {lat: 37.72, lng: -121.63, altitude: 0},
      orientation: {tilt: 270, roll: 90},
    },
    // Non-clamped to the ground model.
    {
      position: {lat: 37.71, lng: -121.63, altitude: 1000},
      altitudeMode: 'RELATIVE_TO_GROUND',
      orientation: {tilt: 270},
    },
  ];

  for (const {position, altitudeMode, orientation, scale} of models) {
    const model = new Model3DElement({
      src: 'https://storage.googleapis.com/maps-web-api.appspot.com/gltf/windmill.glb',
      position,
      altitudeMode,
      orientation,
      scale,
    });

    map.append(model);
  }
}

init();

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

كما تسمح النماذج بالتفاعل. يغيّر المثال التالي مقياس النموذج عند النقر عليه.

async function init() {
  const { Map3DElement, MapMode, Model3DInteractiveElement } = await google.maps.importLibrary("maps3d");

  const map = new Map3DElement({
    center: {lat: 37.7438, lng: -121.5088, altitude: 1800},
    heading: -90,
    tilt: 90,
    mode: MapMode.SATELLITE,
  });

  document.body.append(map);

  const model = new Model3DInteractiveElement({
    src: 'https://storage.googleapis.com/maps-web-api.appspot.com/gltf/windmill.glb',
    position: {lat: 37.76, lng: -121.63, altitude: 0},
    scale: 1.0,
  });

  model.addEventListener('gmp-click', (event) => {
    model.scale = (Math.random() * (1 - 2)).toFixed(2);

  });

  map.append(model);
}

init();