Стили карты | Mobile SDK | 2GIS Documentation
iOS SDK
Личный кабинет

Стили карты

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

Для работы со стилями нужно получить объект фабрики стилей IStyleFactory от центрального объекта SDK Container.

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

Если вы установили проект с помощью xcframework, вы можете использовать стили карты по умолчанию из DGis.xcframework.

Чтобы подключить стиль из Редактора стилей:

  1. Создайте свой стиль карты с помощью Редактора стилей: см. инструкцию Создание стиля. Для создания вы можете использовать готовые шаблоны стилей.

  2. Экспортируйте стиль: см. инструкцию Подключение стиля для iOS SDK.

  3. Переместите скачанный стиль в проект с мобильным приложением.

  4. Подключите стиль с помощью метода loadResource() или loadFile() и укажите объект стиля в качестве параметра styleFuture:

    // Получение фабрики стилей
    let styleFactory = sdk.styleFactory
    
    // Установка стиля в настройках карты
    var mapOptions = MapOptions.default
    mapOptions.styleFuture = styleFactory.loadResource(name: "styles.2gis", bundle: .main)
    
    // Создание карты с указанными настройками
    let mapFactory = sdk.makeMapFactory(options: mapOptions)
    let map = mapFactory.map
    
  5. Если вы установили проект с помощью xcframework и используете стиль из Редактора стилей в приложении, удалите следующие файлы:

    • DGis.xcframework/ios-arm64/DGis.framework/Assets/ru.dgis.sdk/common-styles.2gis,
    • DGis.xcframework/ios-arm64_x86_64-simulator/DGis.framework/Assets/ru.dgis.sdk/common-styles.2gis.

Методы loadResource() и loadFile() возвращают отложенное значение (Future), чтобы не задерживать загрузку карты. Если стиль загружен, вы можете преобразовать его в объект Future с помощью метода makeReadyValue():

var mapOptions = MapOptions.default
mapOptions.styleFuture = Future.makeReadyValue(style)

Чтобы изменить стиль существующей карты, используйте свойство style объекта Map.

В отличие от указания стиля при создании карты, style является не отложенным значением Future, а загруженным стилем карты (Style). Установите значение style после завершения загрузки Future:

// Получение фабрики стилей
let styleFactory = sdk.styleFactory

// Загрузка нового стиля карты
//Метод loadFile() принимает только локальные URL (file://)
self.cancellable = styleFactory.loadFile(url: styleFileURL).sink(
    receiveValue: { [map = self.map] style in
        // Изменение стиля карты после загрузки
        map.style = style
    },
    failure: { error in
        print("Не удалось загрузить стиль из файла <\(fileURL)>. Ошибка: \(error)")
    })

Стили карты могут содержать несколько тем (например, дневную и ночную), между которыми можно переключаться «на лету» без необходимости загрузки дополнительного стиля.

Вы можете указать темы при создании карты с помощью параметра appearance в MapOptions. В iOS 13 и выше можно использовать автоматическое переключение между светлой и тёмной темами (см. инструкцию Dark Mode в документации Apple):

// Установка стиля в настройках карты
var mapOptions = MapOptions.default

// Название светлой темы в используемом стиле
let lightTheme: Theme = "day"

// Название тёмной темы в используемом стиле
let darkTheme: Theme = "night"

if #available(iOS 13.0, *) {
	// Автоматическое переключение между темами в iOS 13 и выше
	mapOptions.appearance = .automatic(light: lightTheme, dark: darkTheme)
} else {
	// Использование светлой темы в остальных случаях
	mapOptions.appearance = .universal(lightTheme)
}

// Создание карты с указанными настройками
let mapFactory = sdk.makeMapFactory(options: mapOptions)

Изменить тему после создания карты вы можете с помощью параметра appearance в MapView:

// Слой карты
let mapView = mapFactory.mapView

// Изменение темы на тёмную
mapView.appearance = .universal(darkTheme)

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

  1. Инициализируйте глобальную переменную:

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

    2. В блоке Мои стили откройте карточку нужного стиля.

    3. В разделе Слои выберите слой, который нужно включить.

    4. В блоке Данные (JSON) отредактируйте JSON-файл и добавьте нужную глобальную переменную (global). Например, для слоя с парковками — это переменная parkingOn:

      Добавление глобальной переменной

      Глобальная переменная может использоваться в нескольких слоях, но только внутри одного стиля.

  2. Экспортируйте и подключите стиль: см. инструкцию Подключение стиля для iOS SDK.

  3. Установите значение true для атрибута с помощью метода setAttributeValue(). Например, чтобы включить отображение слоя парковок:

    self.map.attributes.setAttributeValue(
                name: "parkingOn",
                value: .boolean(true)
            )