Освещение
Чтобы сделать карту более реалистичной или подчеркнуть визуальные особенности определенных стилевых слоев, вы можете настроить уникальное освещение для объектов.
В этом разделе рассматриваются доступные настройки освещения и особенности их применения в стилях карты. Вы сможете настроить готовый режим освещения, следуя описанным шагам.
Настройка освещения
- Откройте Редактор стилей.
- Откройте вкладку Другое в панели слева и выберите пункт Освещение.
Настройки освещения отобразятся в появившемся меню. Ниже представлено описание каждого параметра.
Источники света
Все созданные источники света перечислены в выпадающем списке. Источники atmosphere
, sun
и internal
заданы в карте по умолчанию, и их тип нельзя изменить.
Тип - ключевая характеристика источника освещения, описывающая характер его воздействия на объекты. Может принимать только два значения:
- Рассеянный: имитирует непрямой свет, рассеянный в атмосфере и отраженный от разных объектов.
- Направленный: освещает объекты источниками направленного света (солнцем, луной).
Описание остальных параметров источников приведено в таблице:
Параметр | Поддерживаемые источники | Описание |
---|---|---|
Цвет | Направленный / Рассеянный | Цвет, которым источник освещает объекты |
Интенсивность | Направленный / Рассеянный | Яркость, с которой светит источник |
Высота в горизонтальной системе координат | Направленный | Высота источника над горизонтом |
Азимут в горизонтальной системе координат | Направленный | Сторона света, куда направлен источник |
Справка: Горизонтальная система координат.
Чтобы создать новый источник освещения, нажмите Добавить источник света.
Например, чтобы настроить вечернее освещение, нужно добавить два новых источника:
-
Направленный источник
my_dir_light
со следующими параметрами:- Тип: Направленный
- Цвет:
#FFD3A2
- Интенсивность: 1
- Высота в горизонтальной системе координат: 35
- Азимут в горизонтальной системе координат: 320
Если использовать только этот источник для освещения, вы получите следующий результат:
-
Рассеянный источник
my_ambient_light
со следующими параметрами:- Тип: Рассеянный
- Цвет:
#AA5645
- Интенсивность: 0.4
Сочетание этих источников выглядит так:
Созданные источники освещения добавлены в список всех источников в подраздел Пользовательские. Вы можете открыть их там, чтобы отредактировать параметры.
Тени
В этом разделе настроек вы можете указать направленный источник освещения, который заставит объекты отбрасывать тени. Только один источник может создавать тени. Если не выбран ни один источник, теней не будет.
Параметр Радиус позволяет настроить степень мягкости границ теней.
Выберите созданный источник my_dir_light
и установите параметр Радиус на максимальное значение 3.
Финальный результат с двумя источниками освещения и тенями будет выглядеть так:
Режимы освещения
В этом разделе вы можете настроить режимы освещения, используя набор созданных ранее источников (не более трех). Такие режимы вы можете в дальнейшем применить при настройке параметров освещения стилевых слоев.
Чтобы создать режим освещения из источников света:
-
Нажмите Добавить режим освещения
-
Задайте имя нового режима освещения (например,
my_lighting_mode
) -
Укажите созданные источники освещения:
- Источники рассеянного света:
my_ambient_light
- Источники направленного света:
my_dir_light
- Источники рассеянного света:
Теперь вы можете использовать этот режим в стилевом слое, чтобы освещать объекты двумя созданными источниками.
Режим освещения по умолчанию
Это важная опция, отвечающая за то, какой режим освещения будет применен к слоям, для которых не задан иной режим в их стилевых настройках.
Выберите созданный режим my_lighting_mode
.
Настройка стилевых слоёв
Чтобы настроить уникальное освещение (или отсутствие освещения) для стилевого слоя:
- Выберите нужный слой в панели слева.
- В панели свойств откройте вкладку Режим освещения.
- Выберите нужный режим из списка.
Пример слоя Model 3D с режимом освещения global:
Итоговый вид
Вы также можете посмотреть настройки освещения в готовом стиле. Для доступа к настройкам авторизуйтесь в редакторе стилей и нажмите Создать копию.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>2GIS Map API</title>
<meta name="description" content="Lighting in 2GIS Map" />
<style>
html,
body,
#container {
margin: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
</style>
</head>
<body>
<div id="container"></div>
<script src="https://mapgl.2gis.com/api/js/v1"></script>
<script>
const map = new mapgl.Map('container', {
center: [37.625688, 55.695277],
zoom: 17.5,
rotation: -75,
pitch: 45,
key: 'Your API access key',
style: '4463d414-ceda-4ab7-a9e2-785c5296cae2'
});
</script>
</body>
</html>
Демонстрационная сцена освещения
Вы можете воспользоваться демонстрационной сценой для интерактивной настройки света.
Выберите интересующую вас локацию на карте и установите дату и время, чтобы увидеть, как изменяется освещение.