Gạch 3D ảnh thực

Nhà phát triển ở Khu vực kinh tế Châu Âu (EEA)

Tổng quan về 3D Tiles APIÔ 3D ảnh thực tế là một lưới 3D có kết cấu hình ảnh độ phân giải cao. Các công ty này cung cấp bản đồ 3D có độ phân giải cao ở nhiều khu vực đông dân cư trên thế giới. Các API này giúp bạn mang đến trải nghiệm trực quan hoá 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 đến một địa điểm

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

  • Hiểu rõ những thay đổi trong thế giới thực

Trước khi bắt đầu

Trước khi bắt đầu sử dụng API Ô 3D ảnh thực tế, bạn cần xem lại Điều khoản dịch vụ và Chính sách của Map Tiles API. 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 phần Thiết lập trong Cloud Console.

Đang tải thẻ thông tin

Sau khi có khoá API, bạn có thể bắt đầu truy cập vào các ô ảnh thực tế bằng cách chỉ định URL của nhóm ô gốc cho trình kết xuất Ô 3D mà bạn chọn. Sau đó, tất cả các lệnh gọi tiếp theo cho các ô ảnh chân thực sẽ tự động được trình kết xuất 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ể thực hiện ít nhất 3 giờ yêu cầu về thẻ thông tin từ một yêu cầu về nhóm thẻ thông tin gốc. Sau khi đạt đến giới hạn này, bạn phải gửi một yêu cầu khác về nhóm ô gốc.

Ví dụ: bạn có thể sử dụng mã JavaScript sau để bắt đầu khám phá 3D Tiles 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>