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

3D Area Explorer — это решение, которое позволяет вам исследовать сообщества в увлекательном 3D. В решении используются: фотореалистичные 3D-плитки Google , 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 : радиус поиска близлежащих POI.
  • camera.speed : орбитальная скорость камеры.
  • camera.orbitType : тип орбиты камеры («фиксированная орбита» или «динамическая орбита»).

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

  • Оптимизируйте работу пользователя, предварительно определив выбранные вами настройки.
  • Делитесь целевыми поездками с конкретными предварительно загруженными местами и POI.
  • Легко встраивайте предварительно настроенные возможности 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 (15000 км над поверхностью)

  • Примеры значений:

    • longitude : -122,4934, latitude : 37,7951 (мост Золотые Ворота)
    • height : 2000 (ближайшая стартовая позиция)

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

Объект location в config.json устанавливает центр области. Это первоначальный вид камеры в средстве просмотра цезия. 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-коде. Например, если вы хотите удалить из панели администратора определенный раздел, например скорость камеры, вам необходимо обновить для этого как js, так и html-код.

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

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

const cameraSettingsSecgetCameraSettingsSection(cameraConfig);

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

const locationSection = await getLocationSettingsSection(locationConfig);

Заключение

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

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