3D 区域探索器使用入门

概览

3D 区域探索器解决方案为您提供了一种全新的方式来发现和体验地点。此解决方案利用 Google Maps Platform 仿真 3D 图块 和 Places API 的功能来创建引人入胜的互动式 3D 环境。

3D 区域探索器旨在实现多种用途：

• 增强区域探索： 用户可以以高视觉细节度虚拟探索社区，深入了解当地特色和地标。

• 宣传基于地点的叙事： 能够融入具有丰富说明的地图注点 (POI)，有助于打造叙事驱动型体验，让用户了解特定地点。

• 使用 Google 地图 3D 功能激发开发灵感： 它展示了 Google 的 3D 地图数据在创建沉浸式互动地图方面的潜力

开始使用：

使用托管的 3D 区域探索器管理应用

或

获取 API 密钥 并从 GitHub 下载 代码。

启用

• 仿真 3D 图块 API
• Places API

关键技术

此解决方案使用以下两项关键技术构建而成：

Google Maps Platform API：

我们使用 Google Maps Platform 中的多个 API 来获取基本地图和数据，以打造此体验：

• Google 地图仿真 3D 图块： 建筑物和地形的高分辨率 3D 模型可提供逼真且 具有视觉吸引力的城市环境呈现效果。
• Places API： 该应用可以识别并显示探索区域内的地图注点 (POI) 的详细信息，从而通过 本地知识丰富用户体验。
• 自动补全功能 可帮助用户搜索特定地点或感兴趣的 区域。

CesiumJS

CesiumJS 负责渲染和显示高分辨率 3D 地球。它负责加载和可视化 Google 的仿真 3D 图块，这些图块提供建筑物和地形的 3D 网格模型。

相机管理： CesiumJS 提供用于控制相机位置、方向和移动的工具。其中包括：

• 在加载应用时设置初始视点，以专注于指定的社区。
• 实现动态相机移动，例如用于探索的自动轨道动画。
• 处理用户与地球的互动（如果包含此类功能，例如平移、缩放、旋转）。

了解仿真 3D 图块如何 与 3D 图块渲染器搭配使用。

关键组件

该应用分为两个不同的应用，即：

• 管理应用
• 演示应用

下图概述了这两个应用之间的差异和关联：

进一步了解每个应用会很有帮助：

管理应用

此应用提供了一个人性化的界面，可让您自定义 3D 体验：

• 地点搜索： 使用集成的 Google Maps Platform 自动补全搜索栏查找要展示的区域。选择地点后，相机将无缝飞往该区域。

• 相机： 调整相机移动速度和轨道类型，以创建所选的观看体验。

• 地点（地图注点）： 定义您想要展示的地图注点（例如餐厅、咖啡馆、地标）的密度、搜索半径和类型。

使用此应用为最终用户自定义体验。

注意： 您也可以将管理应用用作演示版应用，它只会向最终用户公开不同的配置。我们在此处执行了以下操作：

• 沿着缓慢的相机路径探索 Google 芝加哥办事处。

• 查看芝加哥地区的所有机场

• 查看拉斯维加斯大道周围旅游景点的密集视图。

• 现在，沿着高速正弦相机路径探索拉斯维加斯

• 探索大峡谷的所有主要旅游景点

详细说明了 3D 区域探索器的所有自定义项。

演示应用

这是最终面向用户的应用，用于加载您在管理应用中创建的配置。在这个沉浸式 3D 环境中，用户将能够探索所选区域并发现您突出显示的地点。

使用管理应用自定义外观和风格后，您可以下载配置并从源代码运行自定义应用。

用户体验

该应用的一些主要功能包括：

1. 用户可以互动式探索 3D 区域，包括建筑物、地标和地形。
2. 用户可以搜索和发现附近的地点（例如博物馆、公园、餐厅）。

3. 选择地点后，用户可以查看与该地点相关的详细信息或叙事。

4. 开发者可以通过设置和控件（如果使用管理应用）来个性化探索体验。

5. 自动旋转功能已启用，允许相机围绕所选区域的中心自动旋转。

前提条件

1. Google 地图 API 密钥：您需要一个有效的 API 密钥，并启用以下 API：

   • Maps JavaScript API
   • Places API
   • Map Tiles API

2. Web 服务器：您可以从以下任一位置提供应用：

   • 本地 Web 服务器（例如，使用 Node.js、http-server）
   • 静态网站托管服务（应用附带 Dockerfile）

您可以在 GitHub 项目的自述文件部分找到部署选项的详细说明。

部署

您可以将应用部署为节点应用或 Docker 容器，部署在任何 容器环境（例如 GKE 或 GAE）中。托管的演示使用以下架构：

• 在此架构中，代码位于 GitHub 项目中。
• Cloud Build 会在任何推送到主分支的操作中提取代码，并触发 build 操作。
• 作为 build 的一部分，它会注入 API 密钥并创建映像，然后将该映像存储在 Artifact Registry 中。
• 最后，它会将 Artifact Registry 中的最新稳定映像部署到 Cloud Run。
• 我们还运行了一些健康检查和监控，以检查已部署应用的健康状况。

结算信息

3D 区域探索器解决方案使用 Google Maps Platform 服务来提供沉浸式动态体验。某些 API 可能会产生费用。下面概述了 API 并提供了价格链接。

Google Maps Platform - 3D Tiles API：

故事叙述解决方案利用 3D Tiles API 通过地理空间数据增强视觉体验。如需了解与 3D Tiles API 相关的价格详情，请参阅 Google Maps Platform - 3D Tiles API 价格。

Google Maps Platform - Places API：

Places API 用于基于地点的数据，为故事叙述体验添加丰富的信息。如需了解与 Google Places API 相关的费用，请访问 Google Maps Platform - Places API 价格。

Google Maps Platform - Autocomplete API：

自动补全功能可增强用户互动。如需了解有关 Google 地图自动补全 API 的价格详情，请访问 Google Maps Platform - 地点自动补全 价格。

CesiumJS：

CesiumJS 用于 3D 地球 可视化。虽然 CesiumJS 本身是开源的，但其他功能或服务可能有自己的相关费用。如需了解任何高级服务，请参阅 CesiumJS 文档。

务必查看每个相应 API 的价格详情，因为费用是根据使用情况单独确定的。请注意，Google Maps Platform 提供免费层级，其中包含一定数量的免费使用量，具体价格可能会因请求数量和使用区域等因素而异。

请务必参阅官方价格页面，了解有关 Google Maps Platform 和 CesiumJS 使用费用的最准确和最新信息。确保遵守这些服务规定的条款及条件，以便有效管理和了解任何相关费用。

总结

本文档概述了 3D 区域探索器的功能、组件、用户体验和技术要求。

它利用 Google 的仿真 3D 图块和 Places API，实现了社区的虚拟探索、地图注点的发现以及当地历史的学习。

无论是展示区域、增强探索还是宣传数字故事叙述，3D 区域探索器都提供了一个视觉效果惊艳的平台。

试用演示版并使用管理应用对其进行自定义，以打造引人入胜且信息丰富的 3D 体验。