模型

请选择平台： Android iOS JavaScript

模型是可添加到场景中以表示对象的 3D 资源。Maps JavaScript API 中的 3D 地图支持包含 gLTF 模型。这些模型可以缩放和旋转，以便进行进一步自定义。

模型必须支持 glTF PBR 的核心属性。不支持任何扩展程序或扩展程序属性。

添加模型

The Model3DElement 构造函数可接受一组 Model3DElementOptions（用于指定模型的 LatLng 坐标）和一组参数（用于支持定位 模型）。

模型支持以下选项：

• position：模型的位置，以 LatLng 坐标表示。
• orientation：模型坐标系的旋转。旋转按以下顺序应用：横滚、倾斜，然后是航向。
• scale：在模型的坐标空间中缩放模型。默认值为 1。
• altitudeMode：如何解读以 position 表示的海拔高度。
• src：模型的网址。

重要提示： 如需在场景中渲染模型，您必须同时指定 position 和 src 选项。

注意： 如果您将模型文件托管在与 主应用不同的网站或服务器上，则必须确保应用设置了正确的 CORS HTTP 标头。

以下示例演示了如何向地图添加模型，以及如何使用可用的自定义选项修改模型：

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