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

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

  • Статья

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

Примечание.

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

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

Совет

Слои символов по умолчанию отображают координаты всех геометрических объектов в источнике данных. Чтобы отображать в слое только геометрические объекты, присвойте параметру filter для этого слоя значение NSPredicate(format: "%@ == \"Point\"", NSExpression.geometryTypeAZMVariable). Если вы хотите включить функции MultiPoint, используйте NSCompoundPredicate.

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

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

Добавление слоя символов

Прежде чем добавить на карту слой символов, необходимо выполнить несколько действий. Сначала создайте источник данных и добавьте его на карту. Создание слоя символов. Затем передайте источник данных на слой символов, чтобы получить данные из источника данных. Наконец, добавьте данные в источник данных, чтобы отобразить что-либо.

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

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

//Create a point and add it to the data source.
source.add(geometry: Point(CLLocationCoordinate2D(latitude: 0, longitude: 0)))

//Create a symbol layer to render icons and/or text at points on the map.
let layer = SymbolLayer(source: source)

//Add the layer to the map.
map.layers.addLayer(layer)

Есть три различных типа данных точек, которые можно добавить на карту:

  • Описание геометрии в формате GeoJSON Multipoint — объект содержит только координаты точки. Метод инициализации Point можно использовать для простого создания этих объектов.
  • Описание геометрии в формате GeoJSON Multipoint — объект содержит только координаты нескольких точек. Передайте массив координат в класс PointCollection для создания этих объектов.
  • Функция GeoJSON — этот объект состоит из любой геометрической фигуры и набора свойств, содержащих метаданные, связанные с геометрическим объектом.

Дополнительные сведения см. в документе Создание источника данных для создания и добавления данных на карту.

В следующем примере кода создается геометрия точек в формате GeoJSON, которая передается в функцию GeoJSON и имеет значение title, добавленное к его свойствам. Свойство title отображается в виде текста под значком символа на карте.

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

// Create a point feature.
let feature = Feature(Point(CLLocationCoordinate2D(latitude: 0, longitude: 0)))

// Add a property to the feature.
feature.addProperty("title", value: "Hello World!")

// Add the feature to the data source.
source.add(feature: feature)

// Create a symbol layer to render icons and/or text at points on the map.
let layer = SymbolLayer(
    source: source,
    options: [
        // Get the title property of the feature and display it on the map.
        .textField(from: NSExpression(forKeyPath: "title")),

        // Place the text below so it doesn't overlap the icon.
        .textAnchor(.top)
    ]
)

// Add the layer to the map.
map.layers.addLayer(layer)

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

Снимок экрана: элемент управления масштабированием, добавленный на карту.

Совет

По умолчанию слои символов оптимизируют отрисовку символов путем скрытия перекрывающихся символов. При изменении масштаба скрытые символы становятся видимыми. Чтобы отключить эту функцию и вывести все символы в любое время, для параметров iconAllowOverlap и textAllowOverlap задайте значение true.

Добавление пользовательского значка в слой символов

Слои символов преобразовываются для просмотра с помощью OpenGL. Таким образом, все ресурсы (например, образы значков) необходимо загрузить в контекст OpenGL. Выборка показывает, как добавить пользовательский значок в карту ресурсов. Этот значок используется для отрисовки данных точек с помощью пользовательского символа на карте. Свойство textField слоя символа требует указания выражения. В этом случае мы хотим преобразовать для просмотра свойство температуры. Кроме того, мы хотим добавить к нему "°F". Для этого объединения можно использовать выражение:

NSExpression(
    forAZMFunctionJoin: [
        NSExpression(forKeyPath: "temperature"),
        NSExpression(forConstantValue: "°F")
    ]
)

// Load a custom icon image into the image sprite of the map.
map.images.add(UIImage(named: "showers")!, withID: "my-custom-icon")

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

// Create a point feature.
let feature = Feature(Point(CLLocationCoordinate2D(latitude: 40.75773, longitude: -73.985708)))

// Add a property to the feature.
feature.addProperty("temperature", value: 64)

// Add the feature to the data source.
source.add(feature: feature)

// Create a symbol layer to render icons and/or text at points on the map.
let layer = SymbolLayer(
    source: source,
    options: [
        .iconImage("my-custom-icon"),
        .iconSize(0.5),
        // Get the title property of the feature and display it on the map.
        .textField(
            from: NSExpression(
                forAZMFunctionJoin: [
                    NSExpression(forKeyPath: "temperature"),
                    NSExpression(forConstantValue: "°F")
                ]
            )
        ),
        .textOffset(CGVector(dx: 0, dy: -1.5))
    ]
)

// Add the layer to the map.
map.layers.addLayer(layer)

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

Снимок экрана: значок погоды, на котором показаны дожди.
showers.png

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

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

Совет

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

Стандартные значки метки

Изначально в карте имеется встроенный значок метки по умолчанию, который уже загружен в спрайт изображения на карте. Он используется по умолчанию, если параметр не задан iconImage . Если это необходимо сделать вручную, задайте значение "marker-default" для параметра iconImage.

let layer = SymbolLayer(source: source, options: [.iconImage("marker-default")])

Также пакет SDK для iOS в Azure Maps поставляется с набором стандартных вариантов цвета для значка метки по умолчанию (темно-синий). Чтобы получить доступ к этим значкам метки, используйте статические переменные класса UIImage, например: UIImage.azm_markerRed.

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

// Load a non-default predefined icon into the image sprite of the map.
map.images.add(.azm_markerRed, withID: "marker-red")

// Create a symbol layer to render icons and/or text at points on the map.
let layer = SymbolLayer(source: source, options: [.iconImage("marker-red")])

Приведенный ниже код содержит встроенные изображения значков UIImage , доступные как статические переменные класса.

UIImage.azm_markerDefault // Dark blue
UIImage.azm_markerBlack
UIImage.azm_markerBlue
UIImage.azm_markerRed
UIImage.azm_markerYellow

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

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