3D Area Explorer: руководство по настройке

3D Area Explorer — это решение, позволяющее исследовать населенные пункты в захватывающем 3D-формате. Решение использует API Google для создания фотореалистичных 3D-плиток , поиска мест , отображения подробной информации о местах и ​​автозаполнения .

Начиная:

Давать возможность

Настройте интерфейс под себя

Решение 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), разделенных запятыми, для отображения.
  • poi.density : Выбранное максимальное количество точек интереса.
  • poi.searchRadius : Радиус поиска ближайших объектов интереса.
  • camera.speed : Скорость вращения камеры.
  • camera.orbitType : Тип орбиты камеры ("фиксированная орбита" или "динамическая орбита").

Преимущества персонализации 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 : 15 000 000 (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, чтобы получить координаты широты и долготы адреса или названия места, указав их в объекте местоположения:

  1. Воспользуйтесь инструментом геокодирования .
  2. Создайте запрос на геокодирование. Нажмите на раздел «Попробуйте сами» и введите выбранное вами местоположение в поле «Адрес». Вы можете указать адрес, название места или даже достопримечательности.
  3. Сгенерировать координаты. Нажмите кнопку «Выполнить», чтобы отправить запрос. Инструмент вернет ответ, содержащий различную информацию о местоположении, включая его координаты широты и долготы, отображаемые в разделе geometry.location .
  4. Используйте геокоды. Скопируйте полученные значения широты и долготы из ответа и вставьте их в объект coordinates в вашей конфигурации.

Примечание : используемые таким образом геокоды должны соответствовать условиям, изложенным в разделе 3.4 Условий предоставления услуг платформы Google Maps, а именно: они не должны кэшироваться более 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

Чтобы удалить раздел 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-коде. Например, если вы хотите удалить определенный раздел из панели администратора, такой как скорость камеры, вам необходимо обновить как JavaScript, так и HTML-код.

4. Удалите раздел настроек камеры.

Чтобы удалить раздел настроек камеры из пользовательского интерфейса, найдите следующую строку и закомментируйте или удалите её: 

const cameraSettingsSecgetCameraSettingsSection(cameraConfig);

Сводка по разделу «Удаление местоположения» 

const locationSection = await getLocationSettingsSection(locationConfig);

Заключение

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

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