3D 区域探索器使用入门

图片

概览

借助 3D 区域探索器解决方案，您可以以全新的方式探索和体验地理位置。此解决方案利用 Google Maps Platform 仿真 3D 图块和 Places API 的功能，打造引人入胜的互动式 3D 环境。

3D 区域探索器有多种用途：

  • 增强区域探索体验：用户可以以高度直观的细节以虚拟方式探索社区，深入了解当地地貌和地标。

  • 宣传基于位置的叙事：借助将地图注点（地图注点）与丰富说明相结合的功能，您可以打造以叙事为导向的体验，让用户了解特定地理位置。

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

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

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

使用此应用为最终用户量身定制体验。

如需查看所有自定义设置的详细说明，请参阅 3D 区域浏览器自定义设置。

演示版应用

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

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

用户体验

图片

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

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

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

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

  5. 自动旋转已启用，可让摄像头围绕所选区域的中心自动旋转。

前提条件

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

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

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

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

部署

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

图片

  • 在此架构中，代码位于 GitHub 项目中。
  • Cloud 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 的地点自动补全价格页面。

CesiumJS：

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

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

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

总结

本文档简要介绍了 3D 区域浏览器的功能、组件、用户体验和技术要求。

借助 Google 的仿真 3D 图块和 Places API，用户可以虚拟探索社区、发现地图注点，以及了解当地历史。

无论是展示区域、提升探索体验，还是宣传数字故事，3D 区域浏览器都能提供视觉效果出色的平台。

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