Глобальные переменные стиля карты

Глобальные переменные стиля карты (глобальные стилевые переменные) — это переменные с типом global, которые задаются в объекте StyleState и используются в стилевых выражениях (Expressions). С помощью глобальных стилевых переменных вы можете динамически включать и выключать отображение стилевых слоёв на карте, а также стилизовать отображение объектов (см. инструкцию Раскрашивание объектов).

Вы можете как инициализировать собственные глобальные переменные стиля и указывать их в настройках стилевого слоя, так и использовать зарезервированные глобальные переменные. Примеры зарезервированных переменных:

• trafficOn — отображение пробок;
• parkingOn — отображение парковок;
• navigatorOn — включение режима навигации;
• immersiveRoadsOn — отображение иммерсивных дорог;
• terrainEnabled — отображение 3D-рельефа.

При инициализации карты используются глобальные переменные стиля, указанные в объекте StyleState. С помощью метода map.patchStyleState() вы можете устанавливать значения глобальных переменных (например, true или false).

Создание глобальных переменных

В этом примере создаётся переменная showFoodPoi для стилевого слоя с иконками ресторанов в Редакторе стилей (слой Eateries в папке POI icons New). Вы можете добавлять зависимость от глобальных переменных для любых стилевых слоёв.

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

1. Откройте Редактор стилей.

2. Откройте нужный стиль.

3. Откройте нужный слой. Перейдите на вкладку Данные и нажмите JSON — добавить вручную:

   

4. Добавьте к фильтру слоя зависимость от глобальной переменной стиля. Для этого вместо значения true укажите ["global", "showFoodPoi"]:

   [
       "all",
       ["match", ["get", "sublayer"], ["Low_zoom_poi"], true, false],
       ["match", ["get", "objectClass"], ["poi_food_service"], ["global", "showFoodPoi"], false]
   ]

   При инициализации переменных вы можете использовать любые названия, но нельзя начинать название с символа нижнего подчёркивания (_).

5. При инициализации карты укажите в поле styleState глобальную стилевую переменную showFoodPoi. В поле style укажите ID стиля, в котором находится слой с заданной переменной:

   const map = new mapgl.Map('container', {
       center: [37.60301424238976, 55.730826265146305],
       zoom: 17,
       key: 'Your API access key',
       style: 'Your map style identifier',
       styleState: {
           showFoodPoi: true,
       },
   });

6. Чтобы включить или отключить отображение слоя, используйте метод map.patchStyleState():

   // Показать слой
   map.patchStyleState({ showFoodPoi: true });
   
   

   // Скрыть слой
   map.patchStyleState({ showFoodPoi: false });

Пример использования:

Использование зарезервированных глобальных переменных

В этом примере для отображения 3D-рельефа на карте используется зарезервированная переменная terrainEnabled.

Чтобы управлять 3D-рельефом на карте:

1. При инициализации карты укажите в поле styleState глобальную стилевую переменную terrainEnabled:

   const map = new mapgl.Map('container', {
       center: [160.5444267119923, 54.74660368519054],
       zoom: 12.1,
       key: 'Your API access key',
       styleState: {
           terrainEnabled: true,
       },
   });

2. Чтобы включить или отключить 3D-рельеф, используйте метод map.patchStyleState():

   // Включить 3D-рельеф
   map.patchStyleState({ terrainEnabled: true });
   
   

   // Отключить 3D-рельеф
   map.patchStyleState({ terrainEnabled: false });

Пример использования: