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

3D Area Explorer — это решение, которое позволяет вам исследовать сообщества в захватывающем 3D. Решение использует: API Google Photorealistic 3D Tiles , Places Search , Place Details и Autocomplete .

Начиная:

Используйте размещенное приложение 3D Area Explorer Admin

Или

Получите ключ API и загрузите код с GitHub .

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

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

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

• Оптимизируйте работу пользователя, предварительно определив выбранные вами настройки.
• Делитесь целевыми поездками с определенными предварительно загруженными местоположениями и точками интереса.
• Легко встраивайте предварительно настроенные возможности Area Explorer в веб-сайты.

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

Примечание: попробуйте полностью загруженный настроенный URL-адрес: 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/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, чтобы получить координаты широты и долготы адреса или названия места, указав его в объекте местоположения:

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

Чтобы удалить раздел 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-исследования. Изменяя поведение камеры, регулируя визуальный наклон и изменяя уровни масштабирования, вы можете создавать уникальные и увлекательные впечатления, демонстрирующие выбранные вами настройки и точки интереса.

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