דגמים

הפלטפורמה: Android iOS JavaScript

מודלים הם נכסי תלת-ממד שאפשר להוסיף לסצנה כדי לייצג אובייקטים. ‫Photorealistic 3D Maps בממשק API של JavaScript במפות Google תומך בהכללה של מודלים בפורמט gLTF. אפשר לשנות את הגודל של המודלים האלה ולסובב אותם כדי להתאים אותם אישית.

המודלים צריכים לתמוך במאפייני הליבה של glTF PBR. אין תמיכה בתוספים או במאפייני תוספים.

הוספת מודל

ה-constructor‏ 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();