Добавление слоя многоугольников на карту с помощью пакета SDK для iOS (предварительная версия)

Статья
04/07/2024

В этой статье показано, как визуализировать области геометрии компонентов Polygon и MultiPolygon на карте с помощью слоя многоугольников.

Примечание.

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

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

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

Обязательно выполните действия, описанные в кратком руководстве по созданию приложения iOS. Блоки кода, приведенные в этой статье, можно поместить в функцию viewDidLoadViewController.

Использование слоя многоугольников

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

// Create a data source and add it to the map.
let source = DataSource()
map.sources.add(source)

// Create a rectangular polygon.
source.add(geometry: Polygon([
    CLLocationCoordinate2D(latitude: 40.76799, longitude: -73.98235),
    CLLocationCoordinate2D(latitude: 40.80044, longitude: -73.95785),
    CLLocationCoordinate2D(latitude: 40.79680, longitude: -73.94928),
    CLLocationCoordinate2D(latitude: 40.76437, longitude: -73.97317),
    CLLocationCoordinate2D(latitude: 40.76799, longitude: -73.98235)
]))

// Create and add a polygon layer to render the polygon on the map, below the label layer.
map.layers.insertLayer(
    PolygonLayer(source: source, options: [
        .fillColor(.red),
        .fillOpacity(0.7)
    ]),
    below: "labels"
)

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

Использование многоугольников и слоев линий вместе

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

// Create a data source and add it to the map.
let source = DataSource()
map.sources.add(source)

// Create a rectangular polygon.
source.add(geometry: Polygon([
    CLLocationCoordinate2D(latitude: 40.76799, longitude: -73.98235),
    CLLocationCoordinate2D(latitude: 40.80044, longitude: -73.95785),
    CLLocationCoordinate2D(latitude: 40.79680, longitude: -73.94928),
    CLLocationCoordinate2D(latitude: 40.76437, longitude: -73.97317),
    CLLocationCoordinate2D(latitude: 40.76799, longitude: -73.98235)
]))

// Create and add a polygon layer to render the polygon on the map, below the label layer.
map.layers.insertLayer(
    PolygonLayer(source: source, options: [
        .fillColor(UIColor(red: 0, green: 0.78, blue: 0.78, alpha: 0.5))
    ]),
    below: "labels"
)

// Create and add a line layer to render the outline of the polygon.
map.layers.addLayer(LineLayer(source: source, options: [
    .strokeColor(.red),
    .strokeWidth(2)
]))

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

Совет

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

Заливка многоугольника с помощью узора

Кроме заливки многоугольника цветом, можно использовать изображение узора для заливки многоугольника. Загрузите шаблон изображения в ресурсы спрайтов изображения карт, а затем сошлитесь на это изображение с параметром fillPattern слоя полигонов.

// Load an image pattern into the map image sprite.
map.images.add(UIImage(named: "fill-checker-red")!, withID: "fill-checker-red")

// Create a data source and add it to the map.
let source = DataSource()
map.sources.add(source)

// Create a polygon.
source.add(geometry: Polygon([
    CLLocationCoordinate2D(latitude: -20, longitude: -50),
    CLLocationCoordinate2D(latitude: 40, longitude: 0),
    CLLocationCoordinate2D(latitude: -20, longitude: 50),
    CLLocationCoordinate2D(latitude: -20, longitude: -50)
]))

// Create and add a polygon layer to render the polygon on the map, below the label layer.
map.layers.insertLayer(
    PolygonLayer(source: source, options: [
        .fillPattern("fill-checker-red"),
        .fillOpacity(0.5)
    ]),
    below: "labels"
)

Для этого примера приведенное ниже изображение было загружено в папку ресурсов приложения.


`fill-checker-red.png`

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

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

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

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