此页面由 Cloud Translation API 翻译。

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

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

开始使用：

启用

自定义体验

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

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

位置

通过调整纬度和经度来定义体验的起点位于 config.json 文件中。

相机控制

选择相机的轨道类型：经典或有趣的正弦波。

固定轨道：

这是在固定高度围绕特定感兴趣的地点的圆形轨道。

探索 Google 悉尼分公司，了解固定轨道的实际运转情况办公室。
Dynamic orbit：

镜头沿正弦波轨迹沿着指定的地图注点。这种独特的移动方式让观看者能够从不同的高度和角度观察感兴趣的地点，从而获得动态且身临其境的视觉体验。

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

地图注点 (POI)：

确定您要探索的地点类型，定制您的探索体验发现。使用types选择博物馆、公园、学校等场所 config.json 中的数组。
通过调整 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：相机轨道类型（“fixed-orbit”或“dynamic-orbit”）。

网址自定义的优势：

通过预定义设置来简化用户体验。
与特定的预加载位置和地图注点共享目标历程。
在网站中无缝嵌入预配置的“区域探索器”体验。

通过利用网址自定义功能，您可以打造量身定制的体验，邀请其他人一起踏上精心策划的冒险之旅。

进一步自定义

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

要进行这些高级自定义，您需要查看 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 的地理编码工具，通过在位置中指定地址或地点名称来获得其坐标对象：

访问地理编码服务工具。
创建地理编码请求 点击“亲自试用”部分和在“地址”字段中输入您选择的位置字段。您可以指定地址甚至是地标
生成坐标 点击“Run”（运行）按钮提交请求。通过工具将返回一个包含有关该位置、包括其纬度和经度坐标，这些坐标显示在 geometry.location部分。
使用地理编码：从并将其粘贴到您配置中的 coordinates 对象中。

注意：以这种方式使用的地理编码必须遵循 Google 地图中列出的条款平台服务条款服务第 3.4 节规定，缓存不得超过 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 探索体验。通过修改相机行为、调整视觉倾斜度和更改缩放级别，您可以打造独特且富有吸引力的体验，展示您选择的设置和地图注点。

请务必尝试不同的配置，并微调参数以满足您的具体需求。利用您可以打造引人入胜的沉浸式个性化旅程，并将你的愿景变为现实。