Visualizzare le informazioni sulle funzionalità in iOS SDK (anteprima)

I dati spaziali sono spesso rappresentati usando punti, linee e poligoni. Questi dati contengono spesso informazioni sui metadati associate. Ad esempio, un punto può rappresentare la posizione di un ristorante e i metadati relativi a tale ristorante possono essere il nome, l'indirizzo e il tipo di cibo che serve. Questi metadati possono essere aggiunti come proprietà di un oggetto GeoJSON Feature. Il codice seguente crea una funzionalità punto semplice con una title proprietà con valore ."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)

Per altre informazioni su come creare e aggiungere dati alla mappa, vedere Creare un'origine dati.

Quando un utente interagisce con una funzionalità sulla mappa, gli eventi possono essere usati per reagire a tali azioni. Uno scenario comune consiste nel visualizzare un messaggio costituito dalle proprietà dei metadati di una funzionalità con cui l'utente ha interagito. L'evento azureMap(_:didTapOn:) è l'evento principale usato per rilevare quando l'utente ha toccato una funzionalità sulla mappa. C'è anche un azureMap(_:didLongPressOn:) evento. Quando un delegato viene aggiunto alla mappa, può essere limitato a un singolo livello passando l'ID di un livello a cui limitarlo. Se non viene passato alcun ID livello, toccando qualsiasi caratteristica sulla mappa, indipendentemente dal livello in cui si trova, verrà generato questo evento. Il codice seguente crea un livello simbolo per il rendering dei dati dei punti sulla mappa, quindi aggiunge un delegato, limitato a questo livello simbolo, che gestisce l'evento 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.
}

Visualizzare un avviso

Un avviso è uno dei modi più semplici per visualizzare informazioni all'utente ed è disponibile in tutte le versioni in genere supportate di iOS. Se si vuole informare rapidamente l'utente di ciò che ha toccato, un avviso potrebbe essere una buona opzione. Il codice seguente illustra come usare un avviso con l'evento 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)
}

Oltre agli avvisi, esistono molti altri modi per presentare le proprietà dei metadati di una funzionalità, ad esempio:

• Aggiungere una visualizzazione personalizzata sulla mappa
• Aggiungere un controller di visualizzazione figlio sulla mappa
• Presente modally un altro controller di visualizzazione su quello corrente.
• Passare a un altro controller di visualizzazione.

Visualizzare un popup

Il Mappe di Azure iOS SDK fornisce una Popup classe che semplifica la creazione di elementi di annotazione dell'interfaccia utente ancorati a una posizione sulla mappa. Per i popup, è necessario passare una visualizzazione di ridimensionamento automatico nell'opzione content del popup. Ecco un semplice esempio di visualizzazione che visualizza il testo scuro sopra uno sfondo bianco.

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
    }
}

Il codice seguente crea un popup, lo aggiunge alla mappa. Quando viene toccata una funzionalità, la title proprietà viene visualizzata usando la PopupTextView classe , con il centro inferiore del layout ancorato alla posizione specificata sulla mappa.

// 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()
}

L'acquisizione di schermata seguente mostra i popup visualizzati quando le funzionalità vengono toccate e rimangono ancorate alla posizione specificata sulla mappa mentre si sposta.

Informazioni aggiuntive

Per aggiungere altri dati alla mappa:

• Reagire agli eventi mappati
• Creare un'origine dati
• Aggiungere un livello per i simboli
• Aggiungere un livello per le bolle
• Aggiungere un livello per le linee
• Aggiungere un livello per i poligoni