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 项目的自述文件部分找到部署选项的详细说明。

部署

您可以在任何容器环境(如 GKEGAE)中将应用部署为节点应用或 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 体验。