Mô hình

Chọn nền tảng: Android iOS JavaScript

Mô hình là thành phần 3D mà bạn có thể thêm vào cảnh để biểu thị các đối tượng. Bản đồ 3D siêu thực trong Maps JavaScript API hỗ trợ việc đưa các mô hình gLTF vào. Bạn có thể điều chỉnh tỷ lệ và xoay các mô hình này để tuỳ chỉnh thêm.

Các mô hình phải hỗ trợ các thuộc tính cốt lõi của glTF PBR. Không hỗ trợ các tiện ích hoặc thuộc tính tiện ích.

Thêm mô hình

Hàm dựng Model3DElement lấy một tập hợp Model3DElementOptions chỉ định toạ độ LatLng của mô hình và một tập hợp các tham số để hỗ trợ định vị mô hình.

Các mô hình hỗ trợ những lựa chọn sau:

  • position: Vị trí của mô hình được biểu thị bằng toạ độ LatLng.
  • orientation: Độ xoay của hệ toạ độ của mô hình. Các thao tác xoay được áp dụng theo thứ tự sau: xoay, nghiêng rồi đến hướng.
  • scale: Điều chỉnh tỷ lệ mô hình trong không gian toạ độ của mô hình. Giá trị mặc định là 1.
  • altitudeMode: Cách diễn giải độ cao được biểu thị bằng position.
  • src: URL của mô hình.

Ví dụ sau đây minh hoạ cách thêm các mô hình vào bản đồ và sửa đổi các mô hình đó bằng các lựa chọn tuỳ chỉnh hiện có:

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

Thêm một mô hình tương tác

Các mô hình cũng hỗ trợ hoạt động tương tác. Ví dụ sau đây sẽ thay đổi tỷ lệ của mô hình khi được nhấp vào.

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