本页介绍了 Maps JavaScript 中的仿真 3D 地图的关键功能,可让您打造互动性强且沉浸感十足的 3D 体验。以下文档涵盖以下内容:
- 处理界面事件以实现流畅的互动。
- 包括用于导航 3D 空间的探索控件。
- 利用预设的摄像头路径创建导览。
- 应用摄像头限制,以保持对特定区域的聚焦。
界面事件
本部分概要介绍了您在使用 3D 地图时可以通过程序化方式监听和处理的互动事件和状态更改通知。浏览器中的 JavaScript 是由事件驱动的,这意味着它会通过生成事件来响应用户互动,您的程序可以监听这些事件并相应地执行代码。
事件主要分为两类:
- 用户互动事件(例如鼠标点击)会从 3D 地图视口传播到您的代码。借助这些事件,您可以响应 3D 地图环境中的直接用户操作。查看示例。
- 状态变化通知使用传统的
property_changed
命名方案,反映底层 3D 地图数据模型和渲染状态的更新。
每个 3D 地图 API 对象都会公开一组命名事件,您的程序可以为这些事件注册事件监听器,并在这些事件发生时使用内置的 addEventListener()
函数执行逻辑。以下示例展示了用户与 3D 地图互动时触发的常见事件。
以下示例展示了当用户与地图互动时会触发哪些事件:
探索控件
Maps JavaScript API 中的 Photorealistic 3D Maps 中显示的地图包含界面元素,可支持用户与地图互动。这些元素称为“用户控件”。默认情况下,系统会包含探索控件,但您可以在应用中选择隐藏这些控件。
下图显示了 Maps JavaScript 中的仿真 3D 地图会显示的默认控件:
下面列出了 Maps JavaScript 中的仿真 3D 地图中的一整套控件:
- 缩放控件:可显示“+”和“-”按钮,用于更改地图的缩放级别。
- 借助倾斜度控制,您可以更改摄像头的倾斜度。
- 借助旋转控件,您可以更改相机的方向。
- 移动控件会显示“←”“→”“↑”和“↓”按钮,用于更改地图中心。
相机控件和动画
预设相机路径
Maps JavaScript 中的仿真 3D 地图提供了两个预设的摄像头路径。您可以通过更改动画时长(从而增加或减少速度)或组合使用动画来自定义摄像头路径,以打造更具电影质感的体验。
Maps JavaScript 中的仿真 3D 地图支持以下摄像头路径:
FlyCameraTo
动画从地图中心飞到指定目的地。FlyCameraAround
动画会围绕您指定的任意次数旋转地图上的某个点。
您可以将这两条可用路径组合起来,以便飞到某个地图注点,围绕该地图注点旋转,然后在需要时停止。
相机限制
您可能需要控制相机的平移、最大海拔,或者创建纬度/经度边界来限制用户在地图中的移动。您可以使用相机限制功能来实现此目的。
如需查看摄像头限制的运作方式和实现方式示例,请参阅演示。