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 环境中，用户将能够探索所选区域并发现您突出显示的地点。

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

用户体验

图片

该应用的一些主要功能如下：

  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 中。
  • 最后，它会将 Artifact Registry 中的最新稳定映像部署到 Cloud Run。
  • 我们还正在运行一些健康检查和监控功能，以检查已部署应用的健康状况。

结算信息

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

Google Maps Platform - 3D Tiles API：

Storytelling 解决方案利用 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 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 体验。