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 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ợ tiện ích hoặc thuộc tính tiện ích.

Thêm mô hình

Hàm khởi tạo 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 một mô hình vào bản đồ và sửa đổi mô hình đó bằng một số lựa chọn tuỳ chỉnh hiện có:

async function init() {
    // Import the needed libraries.
    const { Map3DElement, Model3DElement } =
        await google.maps.importLibrary('maps3d');

    const map = new Map3DElement({
        center: { lat: 39.1178, lng: -106.4452, altitude: 4395.4952 },
        range: 1500,
        tilt: 74,
        heading: 0,
        mode: 'HYBRID',
        gestureHandling: 'COOPERATIVE',
    });

    const model = new Model3DElement({
        src: 'https://maps-docs-team.web.app/assets/windmill.glb',
        position: { lat: 39.1178, lng: -106.4452, altitude: 4495.4952 },
        orientation: { heading: 0, tilt: 270, roll: 90 },
        scale: 0.15,
        altitudeMode: 'CLAMP_TO_GROUND',
    });

    document.body.append(map);
    map.append(model);
}

void 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() {
    // Import the needed libraries.
    const { Map3DElement, Model3DInteractiveElement } =
        await google.maps.importLibrary('maps3d');

    const map = new Map3DElement({
        center: { lat: 39.1178, lng: -106.4452, altitude: 4395.4952 },
        range: 1500,
        tilt: 74,
        heading: 0,
        mode: 'HYBRID',
        gestureHandling: 'COOPERATIVE',
    });

    const model = new Model3DInteractiveElement({
        src: 'https://maps-docs-team.web.app/assets/windmill.glb',
        position: { lat: 39.1178, lng: -106.4452, altitude: 4495.4952 },
        orientation: { heading: 0, tilt: 270, roll: 90 },
        scale: 0.15,
        altitudeMode: 'CLAMP_TO_GROUND',
    });

    model.addEventListener('gmp-click', function () {
        this.scale = Math.random() * (0.5 - 0.1) + 0.1;
    });

    document.body.append(map);
    map.append(model);
}

void init();