使用 CesiumJS 加载 Google Maps Platform 的 Photorealistic 3D Tiles

原文地址：CesiumJS: Photorealistic 3D Tiles from Google Maps Platform – Cesium

这是一个快速入门指南，我们将学习如何在 CesiumJS 中加载 Photorealistic 3D Tiles 内容。

在本指南中，您将学会如何：

• 使用 Google Maps Platform Map Tiles API 和 3D Tiles 添加具有真实感的全球基础图层。
• 利用地理编码器定位至感兴趣的区域。

前提条件

在开始之前，您需要具备以下条件：

• 一个基本的 CesiumJS 应用程序。请参阅 CesiumJS 快速入门 - 掘金 (juejin.cn) 以构建基础的 CesiumJS 应用程序。为获得最佳效果，请确保您的应用程序为 CesiumJS 1.110 或更高版本。
• 一个具有地理编码权限的 Cesium ion 账户和令牌。

一、加载 Photorealistic 3D Tiles

1. 打开 Sandcastle 中的 Hello World 示例，或打开基于 CesiumJS 快速入门 - 掘金 (juejin.cn) 创建的 CesiumJS 应用程序。

2. 将 Cesium.Ion.defaultAccessToken 设置为您的 Cesium ion 访问令牌。在以下代码片段中，将 YOUR_ACCESS_TOKEN 替换为您的 Cesium ion 访问令牌。

   Cesium.Ion.defaultAccessToken = "<YOUR_ACCESS_TOKEN>";
   

3. 创建一个 Cesium Viewer。由于 Google Maps API 提供了覆盖全球范围的图块，在创建 Viewer 时可以通过设置 globe: false 选项来关闭默认的地形和影像图层。

   const viewer = new Cesium.Viewer("cesiumContainer", {
       globe: false,
   });
   

4. 使用 Google Maps API 创建 3D Tileset。

   让我们向场景中添加全球范围的 Photorealistic 3D Tiles。这些图块将作为 Cesium3DTileset 进行流式传输。

   try {
     const tileset = await Cesium.createGooglePhotorealistic3DTileset();
     viewer.scene.primitives.add(tileset);
   } catch (error) {
     console.log(`Failed to load tileset: ${error}`);
   }
   

   

完整的 Sandcastle 示例

二、使用地理编码器定位至感兴趣的区域

1. 点击右上角的放大镜图标以打开地理编码器。

2. 在搜索框中输入您感兴趣的区域名称，例如 "Philadelphia, PA"，然后按回车键。Cesium Viewer 将自动定位到该位置。

   

3. 使用鼠标和键盘缩放、平移和倾斜以探索完整的3D场景。右键单击并拖动以缩放，左键单击并拖动以平移，按住 CTRL 键同时拖动以倾斜相机。

   

后续步骤

接下来，您可以尝试扩展您的应用程序功能，例如通过 添加 3D 模型 或 使用 CesiumJS 构建航班追踪器 - 掘金 (juejin.cn)。

通过这些进一步的探索，您将能够更好地理解和利用 CesiumJS 的强大功能，将您的 3D 地理信息系统应用提升到新的高度。