Поделиться через

Задание стиля карты в пакете SDK для iOS (Предварительная версия)

  • Статья

В этой статье показаны два способа настройки стилей карт с помощью пакета SDK для iOS Azure Maps. В службе Azure Maps доступны шесть стилей карт. Дополнительные сведения см. в статье Стили карт, поддерживаемые в службе Azure Maps.

Примечание.

Прекращение использования пакета SDK для iOS для Azure Карты

Azure Карты Native SDK для iOS теперь устарел и будет прекращен 3.3.31.25. Чтобы избежать сбоев в работе служб, перейдите в веб-пакет SDK для Azure Карты на 3.31.25. Дополнительные сведения см. в руководстве по миграции пакета SDK для iOS в Azure Карты.

Необходимые компоненты

Установка стиля карты при инициализации элемента управления карты

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

MapControl(options: [
    CameraOption.center(lat: 47.602806, lng: -122.329330),
    CameraOption.zoom(12),
    StyleOption.style(.grayscaleDark)
])

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

Снимок экрана: карта с серым цветом темно-дорожной карты.

Установка стиля карты с помощью метода setStyleOptions

Стиль карты можно задать в коде программно с помощью метода setStyleOptions карты. Следующий код задает центральное расположение и масштаб с помощью метода карт setCameraOptions и устанавливает стиль карты .satelliteRoadLabels.

mapControl.onReady { map in

    //Set the camera of the map.
    map.setCameraOptions([
        .center(lat: 47.64, lng: -122.33),
        .zoom(14)
    ])

    //Set the style of the map.
    map.setStyleOptions([.style(.satelliteRoadLabels)])
}

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

Снимок экрана: карта со стилем вспомогательных дорожных меток.

Настройка камеры карты

Камера карты определяет, какая часть мира отображается в окне просмотра карты. Существуют два основных метода настройки расположения карты: использование центра и масштаба или передача ограничивающего прямоугольника. В следующем коде показано, как задать все необязательные параметры камеры при использовании center и zoom.

//Set the camera of the map using center and zoom.
map.setCameraOptions([
    .center(lat: 47.64, lng: -122.33),
    .zoom(14),
    .pitch(45),
    .bearing(90),
    .minZoom(10),
    .maxZoom(14)
])

Часто желательно сосредоточить карту на наборе данных. Ограничивающий прямоугольник можно вычислить на основе признаков с помощью метода BoundingBox.fromData(_:) и передать в параметр bounds камеры карты. При настройке представления карты на основе ограничивающего прямоугольника полезно указать значение padding, которое будет учитывать размер точек данных, отображаемых в виде пузырьков или символов. В следующем коде показано, как задать все необязательные параметры камеры при использовании ограничивающего прямоугольника для настройки расположения камеры.

//Set the camera of the map using a bounding box.
map.setCameraBoundsOptions([
    .bounds(
        BoundingBox(
            sw: CLLocationCoordinate2D(latitude: 47.4333, longitude: -122.4594),
            ne: CLLocationCoordinate2D(latitude: 47.75758, longitude: -122.21866)
        )
    ),
    .padding(20),
    .maxZoom(14)
])

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

Просмотр анимации карты

При настройке параметров камеры на карте варианты анимирования можно также использовать для создания перехода между текущим представлением карты и следующим. Эти параметры определяют тип анимации и время перемещения камеры.

Вариант Описание
animationDuration(_ duration: Double) Указывает время анимации камеры между представлениями в миллисекундах (мс).
animationType(_ animationType: AnimationType) Указывает тип выполняемого анимационного перехода.

- .jump — немедленное изменение.
- .ease — постепенное изменение настроек камеры.
- .fly — постепенное изменение настроек камеры, похожее на пролет по дуге.

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

map.setCameraOptions([
    .animationType(.fly),
    .animationDuration(3000)
    .center(lat: 47.6, lng: -122.33),
    .zoom(12),
])

Следующая анимация демонстрирует приведенный выше код, анимирующий представление карты из Нью-йорка в Сиэтл.

Сопоставление камеры из Нью-Йорка в Сиэтл.

Дополнительная информация:

Дополнительные примеры кода для добавления в карты см. в следующих статьях: