3D 区域探索器使用入门

图片

概览

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

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

  • 增强区域探索功能：用户可以虚拟探索社区，获得高度细致的视觉体验，深入了解当地的特色和地标。

  • 推广基于位置的叙事体验：通过将兴趣点 (POI) 与丰富的说明相结合，可以打造叙事驱动的体验，让用户了解特定位置。

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

使用入门：

启用

关键技术

此解决方案基于以下两项关键技术构建：

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 自动补全搜索栏查找要展示的区域。选择位置后，摄像头会顺畅地飞到该区域。

  • 摄像头：调整摄像头移动速度和轨道类型，以打造所选的观看体验。

  • 地点（兴趣点）：定义您要突出显示的兴趣点（例如餐厅、咖啡馆、地标）的密度、搜索半径和类型。

您可以使用此应用为最终用户打造个性化体验。

3D 区域探索器自定义设置中详细介绍了所有自定义设置。

演示版应用

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

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

用户体验

图片

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

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

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

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

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

前提条件

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

  2. Web 服务器：您可以通过以下任一方式提供应用：

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

您可以在 GitHub 项目的 README 部分找到部署选项的详细说明。

部署

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

图片

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

结算信息

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

Google Maps Platform - 3D Tiles API：

故事叙述解决方案利用 3D 图块 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 Maps Autocomplete API 的价格，请访问 Google Maps Platform - Places Autocomplete 定价。

CesiumJS：

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

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

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

总结

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

该解决方案利用 Google 的 Photorealistic 3D Tiles 和 Places API，可实现社区的虚拟探索、地图注点的发现以及本地历史的了解。

无论是展示某个区域、增强探索体验，还是推广数字故事讲述，3D 区域探索器都能提供令人惊叹的视觉平台。

试用演示，并使用 Admin 应用对其进行自定义，以打造富有吸引力且信息丰富的 3D 体验。