Освещение

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

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

Пример настроенного освещения

Настройка освещения

Откройте редактор стилей.
Откройте вкладку Другое в панели слева и выберите пункт Освещение.

Панель настроек освещения

Настройки освещения отобразятся в появившемся меню. Ниже представлено описание каждого параметра.

Источники света

Все созданные источники света перечислены в выпадающем списке. Источники 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>

Демонстрационная сцена освещения

Вы можете воспользоваться демонстрационной сценой для интерактивной настройки света.

Демо-сцена освещения

Выберите интересующую вас локацию на карте и установите дату и время, чтобы увидеть, как изменяется освещение.