在 iOS SDK 中顯示功能資訊 (預覽)

空間資料通常會使用點、線條和多邊形表示。 此資料通常包含相關的中繼資料資訊。 例如，點可以代表餐廳的位置，而餐廳的中繼資料可以是餐廳的名稱、地址和提供的食物類型。 此中繼資料可新增為 GeoJSON Feature 的屬性。 下列程式碼建立簡單的點功能，其 title 屬性的值為 "Hello World!"。

// 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: -122.33, longitude: 47.64)))

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

// Create a point feature, pass in the metadata properties, and add it to the data source.
source.add(feature: feature)

如需如何建立或新增資料至地圖的詳細資訊，請參閱建立資料來源。

在使用者與地圖上的功能互動時，事件可用來回應這些動作。 常見的案例是顯示由使用者互動的功能中繼資料屬性所組成的訊息。 azureMap(_:didTapOn:) 事件是用來偵測使用者在地圖上點選功能時的主要事件。 另一個是 azureMap(_:didLongPressOn:) 事件。 新增委派至地圖時，您可以傳入圖層的識別碼，將其限制至單一層級。 如果未傳入層級識別碼，請點選地圖上的任何功能，無論事件所在的層級為何，都會引發此事件。 下列程式碼會建立符號層級以在地圖上轉譯點資料，然後新增委派，將其限制在處理 azureMap(_:didTapOn:) 事件的此符號層級。

// Create a symbol and add it to the map.
let layer = SymbolLayer(source: source)
map.layers.addLayer(layer)

// Add the delegate to the map to handle feature tap events on the layer only.
map.events.addDelegate(self, for: [layer.id])

func azureMap(_ map: AzureMap, didTapOn features: [Feature]) {
    // Retrieve the title property of the feature as a string.
    let title = features.first?.properties["title"] as? String

    // Do something with the title.
}

顯示警示

警示是向使用者顯示資訊最簡單的方式之一，而且適用於所有常見支援版本的 iOS。 如果您要快速讓使用者知道他們點選的內容，警示可能是不錯的選擇。 下列程式碼示範如何搭配 azureMap(_:didTapOn:) 事件使用警示。

func azureMap(_ map: AzureMap, didTapOn features: [Feature]) {
    // Retrieve the title property of the feature as a string.
    let title = features.first?.properties["title"] as? String

    // Display an alert with the title information.
    let alert = UIAlertController(title: title, message: nil, preferredStyle: .alert)
    alert.addAction(UIAlertAction(title: "OK", style: .cancel))
    present(alert, animated: true)
}

除了警示以外，還有許多其他方式可以顯示功能的中繼資料屬性，例如：

• 在地圖上新增自訂檢視
• 在地圖上新增子檢視控制器
• 將另一個檢視控制器強制顯示在目前的檢視控制器之上。
• 瀏覽至另一個檢視控制器。

顯示快顯

Azure 地圖服務 iOS SDK 提供 Popup 類別，讓您輕鬆建立 UI 註釋元素，在地圖上錨點任一位置。 如需快顯，您必須將可自行調整大小的檢視，傳入快顯的 content 選項。 以下是簡單的檢視範例，其中在白色背景上面顯示深色文字。

class PopupTextView: UIView {
    private let textLabel: UILabel = {
        let label = UILabel()
        label.translatesAutoresizingMaskIntoConstraints = false
        label.numberOfLines = 0
        label.textColor = UIColor(red: 34 / 255, green: 34 / 255, blue: 34 / 255, alpha: 1)
        label.font = .systemFont(ofSize: 18)
        return label
    }()

    override init(frame: CGRect) {
        super.init(frame: frame)
        setup()
    }

    required init?(coder: NSCoder) {
        super.init(coder: coder)
    }

    override func awakeFromNib() {
        super.awakeFromNib()
        setup()
    }

    private func setup() {
        backgroundColor = .white
        addSubview(textLabel)

        NSLayoutConstraint.activate([
            textLabel.topAnchor.constraint(equalTo: topAnchor, constant: 10),
            textLabel.bottomAnchor.constraint(equalTo: bottomAnchor, constant: -10),
            textLabel.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 10),
            textLabel.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -25)
        ])
    }

    func setText(_ text: String) {
        textLabel.text = text
    }
}

下列程式碼會建立快顯，並將其新增至地圖。 在點選功能時，系統會使用 PopupTextView 類別顯示 title 屬性，同時配置底部中央會錨點至地圖上的指定位置。

// Create a popup and add it to the map.
let popup = Popup()
map.popups.add(popup)

// Set popup to the class property to use in events handling later.
self.popup = popup

func azureMap(_ map: AzureMap, didTapOn features: [Feature]) {
    guard let popup = popup, let feature = features.first else {
        // Popup has been released or no features provided
        return
    }

    // Create the custom view for the popup.
    let customView = PopupTextView()

    // Set the text to the custom view.
    let text = feature.properties["title"] as! String
    customView.setText(text)

    // Get the position of the tapped feature.
    let position = Math.positions(from: feature).first!

    // Set the options on the popup.
    popup.setOptions([
        // Set the popups position.
        .position(position),

        // Set the anchor point of the popup content.
        .anchor(.bottom),

        // Set the content of the popup.
        .content(customView)

        // Optionally, hide the close button of the popup.
        // .closeButton(false)

        // Optionally offset the popup by a specified number of points.
        // .pointOffset(CGPoint(x: 10, y: 10))
    ])

    // Open the popup.
    popup.open()
}

下列螢幕擷取畫面示範點選功能時所顯示的快顯，並在地圖移動時持續錨點至其指定位置。

其他資訊

若要將更多資料新增至您的地圖：

• 回應地圖事件
• 建立資料來源
• 新增符號圖層
• 新增泡泡圖層
• 新增線條圖層
• 新增多邊形圖層