你当前正在访问 Microsoft Azure Global Edition 技术文档网站。 如果需要访问由世纪互联运营的 Microsoft Azure 中国技术文档网站,请访问 https://docs.azure.cn

在 iOS SDK 中添加符号层(预览)

本文介绍如何使用 Azure Maps iOS SDK 将数据源中的点数据呈现为地图上的符号层。 符号层将点呈现为地图上的图像和文本。

注意

Azure Maps iOS SDK 停用

适用于 iOS 的 Azure Maps 本机 SDK 现已弃用,将于 2025 年 3 月 31 日停用。 为了避免服务中断,请在 2025 年 3 月 31 日之前迁移到 Azure Maps Web SDK。 有关详细信息,请参阅 Azure Maps iOS SDK 迁移指南

提示

默认情况下,符号层将呈现数据源中所有几何图形的坐标。 若要限制层,使其仅呈现点几何图形特征,请将层的 filter 选项设置为 NSPredicate(format: "%@ == \"Point\"", NSExpression.geometryTypeAZMVariable)。 如果还想要包含 MultiPoint 功能,请使用 NSCompoundPredicate

先决条件

请务必完成快速入门:创建 iOS 应用文档中的步骤。 可以将本文中的代码块插入到 ViewControllerviewDidLoad 函数。

添加符号层

在可以将符号层添加到地图之前,你需要先执行几个步骤。 首先,创建一个数据源,并将其添加到地图。 创建符号层。 然后,将数据源传入符号层以从数据源中检索数据。 最后,将数据添加到数据源,便可呈现一些内容。

下面的代码演示了在加载地图后应添加到地图的内容。 此示例使用符号层在地图上呈现单个点。

//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 Point 几何 - 此对象仅包含点的坐标,而不包含其他任何内容。 可使用 Point init 方法轻松创建这些对象。
  • GeoJSON MultiPoint 几何 - 此对象仅包含多点的坐标,而不包含其他任何内容。 将坐标数组传递到 PointCollection 类以创建这些对象。
  • GeoJSON Feature - 此对象包含任何 GeoJSON 几何和一组包含与几何关联的元数据的属性。

有关详细信息,请参阅创建数据源文档,了解创建数据并将数据添加到地图。

下面的代码示例创建 GeoJSON Point 几何图形,并传递给 GeoJSON Feature,并在其属性中添加 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)

以下屏幕截图显示使用带有符号层的图标和文本标签来呈现点特征的上述代码。

显示已添加到地图的缩放控件的屏幕截图。

提示

默认情况下,符号层通过隐藏重叠的符号来优化符号的呈现。 放大时,隐藏的符号将变为可见。 若要禁用此功能并始终呈现所有符号,请将 textAllowOverlapiconAllowOverlap 选项设置为 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")])

此外,Azure Maps iOS SDK 附带了一组默认(深蓝)标记图标的预定义颜色变体。 若要访问这些标记图标,请使用 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

其他信息

有关可向地图添加的更多代码示例,请参阅以下文章: