Gạch 3D ảnh thực

Tổng quan về 3D Tiles APIÔ 3D ảnh thực tế là một lưới 3D được kết cấu bằng hình ảnh có độ phân giải cao. Chúng cung cấp bản đồ 3D có độ phân giải cao ở nhiều khu vực đông dân trên thế giới. Các công cụ này giúp bạn cung cấp trải nghiệm hình ảnh trực quan 3D sống động, thế hệ mới để giúp người dùng:

  • Tìm hiểu về một khu vực

  • Tự tin đi theo chỉ dẫn đến một địa điểm

  • Đánh giá các địa điểm mới để đưa ra quyết định

  • Hiểu cách thế giới thực thay đổi

Trước khi bắt đầu

Trước khi bắt đầu sử dụng API Thẻ thông tin 3D chân thực, bạn cần xem lại Điều khoản dịch vụ và Chính sách về API Thẻ thông tin trên bản đồ. Sau đó, bạn có thể bắt đầu một dự án bằng tài khoản thanh toán và bật Map Tiles API. Để tìm hiểu thêm, hãy xem bài viết Thiết lập trong Cloud Console.

Nhận thẻ thông tin

Sau khi có khoá API, bạn có thể bắt đầu truy cập vào các thẻ thông tin có hình ảnh chân thực bằng cách chỉ định URL của nhóm thẻ thông tin gốc cho trình kết xuất Thẻ thông tin 3D mà bạn chọn. Sau đó, tất cả các lệnh gọi tiếp theo cho thẻ thông tin có hình ảnh chân thực sẽ được trình kết xuất tự động thực hiện khi người dùng cuối khám phá bản đồ.

Quá trình kết xuất có thể tạo ra ít nhất 3 giờ yêu cầu thẻ thông tin từ một yêu cầu thẻ thông tin gốc. Sau khi đạt đến giới hạn này, bạn phải tạo một yêu cầu tileset gốc khác.

Ví dụ: bạn có thể sử dụng mã JavaScript sau để bắt đầu khám phá Thẻ thông tin 3D bằng Cesium JS.

<head>
 <meta charset="utf-8">
 <script src="https://ajax.googleapis.com/ajax/libs/cesiumjs/1.105/Build/Cesium/Cesium.js"></script>
 <link href="https://ajax.googleapis.com/ajax/libs/cesiumjs/1.105/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
</head>

<body>
  <div id="cesiumContainer"></div>
  <script>
    const viewer = new Cesium.Viewer('cesiumContainer', {
      imageryProvider: false,
      baseLayerPicker: false,
      requestRenderMode: true,
    });

    const tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
      url: "https://tile.googleapis.com/v1/3dtiles/root.json?key=YOUR_API_KEY",
      showCreditsOnScreen: true,
    }));

    viewer.scene.globe.show = false;
  </script>
</body>