Чтобы переводить контент на ваш предпочитаемый язык, Google использует технологии на основе искусственного интеллекта. Переводы от ИИ могут содержать ошибки.

Настройки 3D Area Explorer

3D Area Explorer – это решение, которое позволяет исследовать сообщества в 3D. В решении используются: фотореалистичная 3D-плитка Google, поиск мест, информация о местах и Autocomplete API.

Начало работы

Включить

Настройте интерфейс

Решение 3D Area Explorer можно настраивать в соответствии с путями к покупке ваших клиентов. Вы можете настроить его с помощью панели управления в интерфейсе или файла config.json.

Готовы к настройке? Вот как это сделать:

Местоположение

Задайте начальную точку, указав широту и долготу в файле config.json.

Управление камерой

Выберите тип орбиты камеры: классическую круговую траекторию или интригующую синусоиду.

Фиксированная орбита.

Это круговая орбита на фиксированной высоте вокруг определенной точки интереса.

Посмотрите, как выглядит фиксированная орбита, на примере офиса Google в Сиднее.
Динамическая орбита.

Камера плавно движется по синусоидальной траектории вокруг заданной точки интереса. Это позволяет зрителям рассмотреть объект с разных высот и углов, что создает динамичный и захватывающий визуальный эффект.

Посмотрите, как работает динамическая орбита, на примере Эйфелевой башни.

Объекты инфраструктуры (POI):

Настройте поиск, указав типы мест, которые вы хотите найти. Выбирайте музеи, парки, школы и другие места, используя массив types в config.json.
Задайте максимальное количество объектов, которые будут показываться на карте, с помощью параметра density.
Измените searchRadius (in meters), чтобы включить в него скрытые жемчужины поблизости или сосредоточиться на определенных областях.
Задайте скорость движения камеры с помощью параметра speed (in revolutions per minute).

Предварительная загрузка. Как настроить URL

3D Area Explorer позволяет заранее задать параметры исследования с помощью настройки URL. Это устраняет необходимость в ручной настройке и упрощает работу пользователей.

Как создать идеальный URL

Просто добавьте определенные параметры в URL Area Explorer, чтобы предварительно задать местоположение и другие настройки. Пример:

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

Этот URL-адрес устанавливает начальную точку на указанную широту и долготу, мгновенно перенося вас в выбранное место. Доступные параметры:

location.coordinates.lat: широта выбранного местоположения.
location.coordinates.lng: долгота выбранного местоположения.
poi.types – список типов объектов инфраструктуры, разделенный запятыми.
poi.density – выбранное максимальное количество объектов инфраструктуры.
poi.searchRadius – радиус поиска объектов инфраструктуры поблизости.
camera.speed – скорость вращения камеры.
camera.orbitType – тип орбиты камеры ("fixed-orbit" или "dynamic-orbit").

Преимущества настройки URL:

Задайте настройки по умолчанию, чтобы упростить работу пользователей.
Делитесь маршрутами с заранее загруженными местоположениями и объектами инфраструктуры.
Встраивайте предварительно настроенные карты Area Explorer на сайты.

Настраивая URL, вы можете создавать уникальные маршруты и приглашать других пользователей в путешествия.

Дополнительные настройки

В предыдущем разделе мы рассмотрели корректировки, доступные через интерфейс или файл конфигурации. Однако есть и другие встроенные параметры, которые можно изменить, чтобы настроить приложение.

Для этого вам нужно будет посмотреть код в файле src/utils/cesium.js, который находится в каталоге src. Чтобы изменить внешний вид приложения, можно настроить следующие переменные:

Высота камеры

Высоту камеры при перемещении к точке можно задать с помощью значения 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 (15 000 км над поверхностью)
Примеры значений:
- longitude: -122.4934, latitude: 37.7951 (мост Золотые Ворота)
- height: 2000 (ближе к начальной позиции)

Загрузить заданное местоположение

Объект location в config.json задает центр области. Это начальная точка обзора камеры в средстве просмотра Cesium.coordinates: Определяет широту (lat) и долготу (lng) местоположения, к которому камера должна перейти в первую очередь. Измените эти значения, чтобы установить камеру в определенном месте на земном шаре.

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

Эта конфигурация позволяет запустить приложение 3D Place Navigator с увеличенным масштабом в определенном месте по вашему выбору. Чтобы получить координаты широты и долготы для адреса или названия места, укажите их в объекте местоположения и воспользуйтесь инструментом геокодирования Google.

Откройте инструмент геокодирования.
Создайте запрос геокодирования. Нажмите на раздел Try It Yourself (Попробовать самостоятельно) и введите выбранное местоположение в поле Address (Адрес). Вы можете указать адрес, название места или даже ориентиры.
Сгенерировать координаты. Нажмите кнопку "Выполнить", чтобы отправить запрос. Инструмент вернет ответ, содержащий различную информацию о местоположении, включая его координаты широты и долготы, отображаемые в разделе geometry.location.
Используйте геокоды. Скопируйте полученные значения широты и долготы из ответа и вставьте их в объект coordinates в конфигурации.

Примечание. Геокоды, используемые таким образом, должны соответствовать условиям, изложенным в разделе 3.4 Условий использования платформы Google Карт. Это означает, что они не должны кэшироваться более чем на 30 дней и должны обновляться по истечении этого срока.

В этой конфигурации инструмент геокодирования автоматически определяет координаты штаб-квартиры Google в Маунтин-Вью (Калифорния) и запускает приложение 3D Place Navigator с камерой, направленной на это место.

Расширенные настройки

Вы можете дополнительно настроить код. Ниже описаны некоторые варианты.

Как добавить новую траекторию камеры

В решении по умолчанию реализовано два разных пути камеры:

fixed-orbit" | "dynamic-orbit"

Но если вы хотите создать новую траекторию камеры, вы можете реализовать ее с помощью

/src/utils/cesium.js в функции calculateAutoOrbitFrame.

Чтобы использовать этот новый расчет пути на панели конфигурации,ознакомьтесь с реализацией в demo/src/camera-settings.js..

Добавить другие типы мест

Список типов мест для конфигурации можно настроить в файле demo/src/place-settings.js. Начиная со строки 4, перечислены типы мест, доступные в демоверсии.

Если вы хотите использовать определенные типы мест, не меняя исходный код демоверсии, просто добавьте их в файл config.json в разделе poi.types.

Настройте стиль (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);

Заключение

В этом документе мы рассмотрели различные варианты настройки, доступные в Area Explorer, которые позволяют адаптировать 3D-исследование. Изменяя поведение камеры, наклон и уровень масштабирования, вы можете создавать уникальные и привлекательные карты, на которых будут показаны выбранные вами настройки и объекты инфраструктуры.

Экспериментируйте с разными конфигурациями и настраивайте параметры в соответствии со своими потребностями. Используя возможности настройки, вы можете создавать захватывающие и персонализированные путешествия, которые увлекут вашу аудиторию и воплотят ваше видение в жизнь.