3D 区域浏览器：自定义指南

3D 区域浏览器是一款解决方案，可让您以引人入胜的 3D 形式探索社区。该解决方案利用了 Google 的仿真 3D 图块、地点搜索、地点详情和 Autocomplete API。

使用入门：

使用托管的 3D 区域浏览器管理应用

或

获取 API 密钥并从 GitHub 下载代码。

启用

• 仿真 3D 图块 API
• Places API

自定义体验

3D 区域探索器解决方案具有高度的可定制性，让您能够根据客户转化历程定制体验。您可以使用界面中的控制台或使用 config.json 文件进行自定义。

准备好自定义了吗？具体方法如下：

位置

您可以通过在 config.json 文件中调整纬度和经度来定义体验的起点。

相机控制

通过选择镜头的轨道类型（经典的环形路径或有趣的正弦波），控制您的旅程。

• 固定轨道：

  该圆形轨道具有固定高度，并位于特定地图注点周围。

  探索 Google 悉尼办事处，了解固定轨道的实际运行情况。

• 动态轨道：

  相机围绕指定地图注点沿正弦波轨迹平稳移动。这种独特的移动方式使观看者可以从各种高度和角度观察地图注点，从而提供动态且沉浸式的视觉体验。

  探索埃菲尔铁塔，了解动态轨道的实际运行情况。

地图注点 (POI)：

• 确定您要发现的地点类型，以自定义您的探索。使用 config.json 中的 types 数组从博物馆、公园、学校等地点中进行选择。
• 通过调整 density 参数，设置显示的地图注点数量上限。
• 修改 searchRadius (in meters) 以包含附近隐藏的宝石或专注于特定区域。
• 您可以使用 speed (in revolutions per minute) 参数为相机移动选择速度。

预加载您的探索：通过网址自定义深入了解相关内容

借助 3D 区域浏览器，您可以通过网址自定义功能来预定义探索。因此您无需手动配置，从而简化了用户体验。

创建完美网址：

只需将特定参数附加到区域资源管理器网址，即可预设位置和其他设置。例如：

https://{base-url}/#location.coordinates.lat=40.7424396&location.coordinates.lng=-74.0061439

此网址会将起点设为指定的纬度和经度，即时将您转到所选位置。可用参数：

• location.coordinates.lat：所选位置的纬度。
• location.coordinates.lng：所选位置的经度。
• poi.types：要显示的地图注点类型的逗号分隔列表。
• poi.density：所选的地图注点数量上限。
• poi.searchRadius：用于搜索附近地图注点的半径。
• camera.speed：相机轨道速度。
• camera.orbitType：相机轨道类型（“固定轨道”或“动态轨道”）。

自定义网址的好处：

• 通过预先定义您选择的设置来简化用户体验。
• 与预加载的特定位置和地图注点分享目标历程。
• 在网站中无缝嵌入预配置的“Area Explorer”体验。

通过利用网址自定义功能，您可以创建量身定制的体验，并邀请其他人踏上精心设计的冒险之旅。

注意： 请尝试使用完全加载的自定义网址： https://js-3d-area-explorer-demo-dev-t6a6o7lkja-uc.a.run.app/#camera.orbitType=fixed-orbit&camera.speed=2.2&poi.types=restaurant&poi.types=parking&poi.types=movie_theater&poi.types=bus_station&poi.density=40&poi.searchRadius=5100

进一步自定义

上一部分介绍了可通过界面或配置文件访问的调整。不过，您还可以修改其他一些内置参数，进一步自定义应用。

要进行这些高级自定义，您需要查看位于 src 目录下的 src/utils/cesium.js 文件中的代码。您可以更改以下变量，以更改应用的外观和风格

相机高度

通过调整 CAMERA_HEIGHT 值，控制相机在飞向某个点时自身的位置高度。值越高，视野范围越小，全景视图越小；值越小，越靠近相应区域的详情

// Camera height (in meters) above the target when flying to a point.
const CAMERA_HEIGHT = 100;

• 设置：CAMERA_HEIGHT
• 默认值：100
• 说明：定义飞行到某个地点时镜头在目标位置上方的高度。
• 示例值：
  • 50：近景视图，突出细节。
  • 200：全景视角。

相机倾斜度

镜头的初始倾斜度由 BASE_PITCH 定义。为向下倾斜使用负值，为向上视图使用正值。如需为您的探索添加细微的动态移动，请更改 AUTO_ORBIT_PITCH_AMPLITUDE。

// Pitch 30 degrees downwards
const BASE_PITCH = -30;
// change the pitch by 10 degrees over time
const AUTO_ORBIT_PITCH_AMPLITUDE = 10;

• 设置：BASE_PITCH 和 AUTO_ORBIT_PITCH_AMPLITUDE
• 默认值：
  • BASE_PITCH：-30（向下倾斜 30 度）
  • AUTO_ORBIT_PITCH_AMPLITUDE：10（随时间变化倾斜度为 10 度）

说明：相机倾斜度是指地图的可视倾斜度，以度为单位。也称为“倾斜”。这些设置用于定义相机在自动旋转期间的初始倾斜度和动态倾斜度调整。

示例值：

• BASE_PITCH：0（水平摄像头）
• AUTO_ORBIT_PITCH_AMPLITUDE：0（无音调变化）

相机范围和缩放

这些参数用于设置聚焦于特定点时应用的缩放量。值越小意味着缩放级别越小。

// Distance variation relative to initial range.
const RANGE_AMPLITUDE_RELATIVE = 0.55;

// Determines how much the camera should zoom in or out
const ZOOM_FACTOR = 20;

设置：RANGE_AMPLITUDE_RELATIVE 和 ZOOM_FACTOR

默认值：

• RANGE_AMPLITUDE_RELATIVE：0.55（相对距离变化）
• ZOOM_FACTOR：20（相机缩放比例）

说明：这些设置定义了相机移动期间的范围变化以及缩放级别，方便用户进行更细的观察。

示例值：

• RANGE_AMPLITUDE_RELATIVE：1（全范围变体）
• ZOOM_FACTOR：10（缩小显示范围）

// Camera heading (rotation), pitch (tilt), and range (distance) for resetting view.
const CAMERA_OFFSET = {
  heading: 0, // No rotation offset.
  pitch: Cesium.Math.toRadians(BASE_PITCH),
  range: 800, // 800 meters from the center.
};

相机重置

当用户想要将相机重置到原始位置时，会使用 CAMERA_OFFSET 值。此设置包括方向角（旋转）、倾斜度（倾斜度）和距离（镜头到中心的距离）。

• 设置：CAMERA_OFFSET
• 默认值：
  • heading：0（无旋转偏移）
  • pitch：Cesium.Math.toRadians(-30)（向下倾斜 30 度）
  • range：800（距离中心 800 米）
• 说明：定义用于重置视图的镜头朝向、倾斜度和范围。
• 示例值：
  • heading：45（度，西北视图）
  • range：1500 米（离中心更远）

起始坐标：

START_COORDINATES 定义镜头的初始经度、纬度和高度。这是探索的起点，因此请将其设置为您希望用户最先看到的区域。

// Default camera start position in longitude, latitude, and altitude.
const START_COORDINATES = {
  longitude: 0,
  latitude: 60,
  height: 15000000, // 15,000 km above the surface
};

• 设置：START_COORDINATES

• 默认值：

  • longitude：0
  • latitude：60
  • height：15000000（地面以上 15000 公里）

• 示例值：

  • longitude：-122.4934，latitude：37.7951（金门大桥）
  • height：2000（更近的起始位置）

加载预定义位置

config.json 中的 location 对象会设置区域的中心。它是 Cesium 查看器中相机的初始视点。coordinates：定义您希望镜头先平移到的位置的纬度 (lat) 和经度 (lng)。调整这些值即可将镜头设置为地球上的任意特定位置。

  {
  "location": {
    "coordinates": { "lat": null, "lng": null }
  },

此配置可让您启动放大所选特定位置的 3D 地点导航器应用。您可以使用 Google 的地理编码工具在 location 对象中指定地址或地点名称来获取其经纬度坐标：

1. 访问地理编码工具。
2. 创建地理编码请求：点击“亲自试用”部分，然后在“地址”字段中输入您选择的地理位置。您可以指定地址、地点名称或地标
3. 生成坐标：点击“运行”按钮提交您的请求。该工具将返回包含有关该位置的各种信息的响应，包括 geometry.location 部分下方显示的相应经纬度坐标。
4. 使用地理编码：从响应中复制检索到的纬度和经度值，并将其粘贴到您配置中的 coordinates 对象中。

注意：以这种方式使用的地理编码必须遵循 Google Maps Platform 服务条款第 3.4 节中列出的条款，即缓存时间不得超过 30 天，并且必须在 30 天后刷新。

此配置会使用地理编码工具自动确定位于加利福尼亚州山景城的 Google 总部的坐标，并启动 3D 地点导航器应用，并将相机置于该位置的中心。

注意 ：此方法可简化查找坐标的过程，并减少手动标识的需求。借助它，您可以使用在配置中的地址或名称无缝探索任何位置。

高级自定义

您可以通过深入了解代码进行其他自定义。下一部分将向您介绍一些选项

添加新的镜头路径

该解决方案开箱即用，实现了两种不同的相机路径：

fixed-orbit" | "dynamic-orbit"

但如果您需要创建新的镜头路径，则可使用

在 calculateAutoOrbitFrame 函数中使用 /src/utils/cesium.js。

如需在配置面板中使用这种新的路径计算，请参阅 demo/src/camera-settings.js. 中的实现

添加更多地点类型

您可以在文件 demo/src/place-settings.js 中调整配置的地点类型列表。从第 4 行开始，是演示中提供的地点类型。

如果您想使用特定地点类型，而不更改演示源代码，只需将其添加到 poi.types 下的 config.json 文件中

自定义样式 (css)

对于我们使用 CSS 变量的样式。所有主流浏览器都支持这两种方法，因此，您可以在一个位置集中更改一行内容，并更新特定的 CSS 属性。我们的 CSS 变量在 src/main.css. 中定义。您可以在其中调整整个应用的颜色、字体设置以及内边距或外边距。

叠加其他数据

如需叠加其他数据，您需要更新 src/utils/cesium.js 文件，并查阅 cesium 文档，了解如何向地球添加 GeoJSON 或其他地理参考数据。

移除配置部分

JavaScript 应用的配置文件中有三个主要部分：demo/src/[config-panel.js](config-panel.js): location、poi 和 camera。其中每个部分都针对应用的不同方面提供了配置选项。开发者可以根据自己的具体需求自定义这些部分。

1.从配置中删除特定部分

• 位置信息部分

如需移除 location 部分，请在代码中找到以下行，并添加注释或删除代码：

const locationConfig = { ...config.location, ...customConfig.location };

• 地图注点部分

如需移除 poi 部分，请在代码中找到以下行，并添加注释或删除代码：

const poiConfig = { ...config.poi, ...customConfig.poi };

• “相机”部分

如需移除 camera 部分，请在代码中找到以下行，并添加注释或删除代码：

const cameraConfig = { ...config.camera, ...customConfig.camera };

2. 更新组合配置

移除某个部分后，请务必更新组合的配置对象。此对象可将默认配置与任何自定义设置合并。从 combinedConfig 对象中移除相应的属性：

const combinedConfig = {
 location: { ...config.location, ...customConfig.location }, // Remove if location section is removed

 poi: { ...config.poi, ...customConfig.poi }, // Remove if poi section is removed
 camera: { ...config.camera, ...customConfig.camera }, // Remove if camera section is removed
};

3. 调整界面元素

如果移除某个部分也意味着移除相关界面元素，请相应地更新 HTML 代码中的代码。例如，如果您要从管理控制台移除特定部分（如相机速度），则必须同时更新相应的 js 和 HTML 代码。

4. 移除“相机设置”部分

如需从界面中移除相机设置部分，请找到以下行并添加注释或删除它：

const cameraSettingsSecgetCameraSettingsSection(cameraConfig);

移除位置部分摘要

const locationSection = await getLocationSettingsSection(locationConfig);

总结

在本文档中，我们探索了区域资源管理器中提供的各种自定义选项，以便您量身定制 3D 探索体验。通过修改镜头行为、调整视觉倾斜度和更改缩放级别，您可以打造独具特色且引人入胜的体验，从而展示您选择的设置和地图注点。

请务必尝试使用不同的配置，并根据您的特定需求微调参数。通过利用自定义的力量，您可以打造沉浸式个性化历程，从而吸引受众群体并将您的愿景变为现实。