الطرُز

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

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

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

إضافة نموذج

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

تتيح النماذج الخيارات التالية:

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

ملاحظة مهمة: لكي يتم عرض النماذج في المشهد، يجب تحديد الخيارَين position وsrc.

ملاحظة: إذا كنت تستضيف ملفات النماذج على موقع إلكتروني أو خادم مختلف عن تطبيقك الرئيسي، عليك التأكّد من أنّ تطبيقك يضبط عناوين HTTP الصحيحة CORS.

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

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