Gạch 3D ảnh thực

Tổng quan về 3D Tiles APIThẻ thông tin 3D ảnh thực là một lưới 3D có hoạ tiết với hình ảnh có độ phân giải cao. Họ cung cấp bản đồ 3D có độ phân giải cao ở nhiều khu vực dân cư trên thế giới. Chúng hỗ trợ trải nghiệm hình ảnh 3D sống động, thế hệ mới để giúp người dùng:

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

  • Tự tin điều hướng đến một vị trí

  • Đá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 ảnh thực, bạn cần xem lại Điều khoản dịch vụ và Chính sách của API Thẻ thông tin bản đồ. Sau đó, bạn có thể bắt đầu dự án bằng tài khoản thanh toán và bật Map Tiles API. Để tìm hiểu thêm, vui lòng xem bài viết Thiết lập trong Cloud Console.

Đang tải thẻ thông tin

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

Ví dụ: bạn có thể sử dụng mã JavaScript sau đây để 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>