3D 区域探索器是一款解决方案，可让您以迷人的 3D 视角探索社区。该解决方案利用了： Google 的仿真 3D 图块、 地点搜索、 地点详情 和自动补全 API。
开始使用：
启用
自定义体验
3D 区域探索器解决方案支持高度自定义，让您能够根据客户历程量身打造体验。您可以使用界面上的控制面板或 config.json 文件进行自定义。
准备好自定义了吗？具体方法如下：
位置
通过调整 config.json 文件中的纬度和经度，定义体验的起点。
相机控制
选择相机的轨道类型（经典的圆形路径或有趣的弦波），掌控您的旅程。
固定轨道：
这是围绕特定地图注记点在固定高度进行的圆形轨道飞行。
探索 Google 悉尼办事处，了解固定轨道的效果。
动态环绕：
镜头围绕指定兴趣点以正弦波轨迹平稳移动。这种独特的运动方式让观看者可以从不同的高度和角度观察地图注点，从而提供动态且沉浸式的视觉体验。
探索埃菲尔铁塔，了解动态环绕效果。
地图注点 (POI)：
- 通过确定您想要发现的地点类型，自定义您的探索。使用
config.json中的types数组，从博物馆、公园、学校等地点中进行选择。 - 通过调整
density参数，设置显示的地图注点数量上限。 - 修改
searchRadius (in meters)，以包含附近的小众景点或专注于特定区域。 - 使用
speed (in revolutions per minute)参数设置所选的镜头移动速度。
正在预加载“探索：深入了解网址自定义”
借助 3D Area Explorer，您可以通过网址自定义功能预先定义探索。这样就无需手动配置，从而简化了用户体验。
打造完美网址：
只需将特定参数附加到 Area Explorer 网址，即可预设位置和其他设置。例如：
https://{base-url}/#location.coordinates.lat=40.7424396&location.coordinates.lng=-74.0061439
此网址会将起点设置为指定的纬度和经度，让您瞬间到达所选位置。可用参数：
location.coordinates.lat：所选位置的纬度。location.coordinates.lng：所选位置的经度。poi.types：要显示的地图注点类型的逗号分隔列表。poi.density：所选的 POI 数量上限。poi.searchRadius：搜索附近地图注点的半径。camera.speed：相机轨道速度。camera.orbitType：镜头轨道类型（“fixed-orbit”或“dynamic-orbit”）。
网址自定义的优势：
- 通过预先定义所选设置，简化用户体验。
- 分享包含特定预加载地点和地图注点的目标行程。
- 将预配置的区域探索体验无缝嵌入到网站中。
通过利用网址自定义功能，您可以打造量身定制的体验，并邀请他人踏上精心策划的冒险之旅。
进一步自定义
上一部分探讨了可通过界面或配置文件进行的调整。不过，您还可以修改其他几个内置参数，以进一步自定义应用。
如需进行这些高级自定义，您需要查看 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：0latitude：60height：15000000（地表上方 15,000 公里）
示例值：
longitude：-122.4934，latitude：37.7951（金门大桥）height：2000（起始位置更近）
加载预定义的位置
config.json 中的 location 对象用于设置区域的中心。这是 Cesium 查看器中相机的初始视点。coordinates：定义您希望镜头首先平移到的位置的纬度 (lat) 和经度 (lng)。调整这些值可将镜头设置到地球上的任何特定位置。
{
"location": {
"coordinates": { "lat": null, "lng": null }
},
通过此配置，您可以在启动 3D Place Navigator 应用时，让其放大到您选择的特定位置。您可以使用 Google 的地理编码工具，在 location 对象中指定地址或地点名称，从而获取其经纬度坐标：
- 访问地理编码工具。
- 创建地理编码请求：点击“亲自试一试”部分，然后在“地址”字段中输入您选择的位置。您可以指定地址、地点名称，甚至地标。
- 生成坐标 点击“运行”按钮提交请求。该工具将返回一个响应，其中包含有关该地点的各种信息，包括在
geometry.location部分下显示的经纬度坐标。 - 使用地理编码：从响应中复制检索到的纬度和经度值，并将其粘贴到配置中的
coordinates对象内。
注意：以这种方式使用的地理编码必须遵循 Google Maps Platform 服务条款第 3.4 节中概述的条款，即缓存时间不得超过 30 天，并且在此之后必须刷新。
此配置将使用地理编码工具自动确定 Google 总部（位于加利福尼亚州山景城）的坐标，并启动 3D 地点导航器应用，将镜头对准该位置。
高级自定义
您可以通过深入研究代码来进行其他自定义。 以下部分将引导您了解一些选项
添加新的镜头路径
该解决方案开箱即用，实现了两种不同的摄像头路径：
fixed-orbit" | "dynamic-orbit"
但如果您想创建新的摄像头路径，可以使用
/src/utils/cesium.js 中的 calculateAutoOrbitFrame 函数。
如需在配置面板中使用此新路径计算，请参阅 demo/src/camera-settings.js. 中的实现
添加更多地点类型
您可以在 demo/src/place-settings.js 文件中调整配置的地点类型列表。从第 4 行开始，是演示中可用的地点类型。
如果您想使用特定地点类型，而不更改演示源代码，只需将其添加到 poi.types 下的 config.json 文件中即可
自定义样式 (css)
对于样式，我们使用了 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 Section
如需移除 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 探索体验。通过修改相机行为、调整视觉倾斜度和更改缩放级别，您可以打造独特且引人入胜的体验，展示您选择的设置和地图注点。
请记得尝试不同的配置并微调参数，以满足您的特定需求。通过利用自定义功能，您可以打造沉浸式个性化旅程，吸引观众并实现您的愿景。