الطرُز

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

التصاميم هي مواد عرض ثلاثية الأبعاد يمكن إضافتها إلى المشهد لتمثيل العناصر. تتيح "الخرائط الثلاثية الأبعاد الواقعية" في Maps JavaScript API تضمين تصاميم 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();