Aggiungere un livello simbolo in iOS SDK (anteprima)

Questo articolo illustra come eseguire il rendering dei dati dei punti da un'origine dati come livello simbolo su una mappa usando Mappe di Azure iOS SDK. I livelli simbolo eseguono il rendering dei punti come immagine e testo sulla mappa.

Prerequisiti

Assicurarsi di completare i passaggi descritti nel documento Avvio rapido: Creare un'app iOS. I blocchi di codice in questo articolo possono essere inseriti nella viewDidLoad funzione di ViewController.

Aggiungere un livello per i simboli

Prima di poter aggiungere un livello simbolo alla mappa, è necessario eseguire un paio di passaggi. Creare prima di tutto un'origine dati e aggiungerla alla mappa. Creare un livello simbolo. Passare quindi l'origine dati al livello simbolo per recuperare i dati dall'origine dati. Aggiungere infine i dati all'origine dati, in modo che sia necessario eseguire il rendering di un elemento.

Il codice seguente illustra cosa aggiungere alla mappa dopo il caricamento. Questo esempio esegue il rendering di un singolo punto sulla mappa usando un livello simbolo.

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

Alla mappa possono essere aggiunti tre tipi diversi di dati punto:

• Geometria del punto GeoJSON: questo oggetto contiene solo una coordinata di un punto e nient'altro. Il Point metodo init può essere usato per creare facilmente questi oggetti.
• Geometria MultiPoint GeoJSON: questo oggetto contiene le coordinate di più punti e nient'altro. Passare una matrice di coordinate nella PointCollection classe per creare questi oggetti.
• Funzionalità GeoJSON: questo oggetto è costituito da qualsiasi geometria GeoJSON e da un set di proprietà che contengono metadati associati alla geometria.

Per altre informazioni, vedere il documento Creare un'origine dati per la creazione e l'aggiunta di dati alla mappa.

L'esempio di codice seguente crea una geometria del punto GeoJSON e la passa alla funzionalità GeoJSON e ha un title valore aggiunto alle relative proprietà. La title proprietà viene visualizzata come testo sotto l'icona del simbolo sulla mappa.

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

Lo screenshot seguente mostra il codice precedente che esegue il rendering di una funzionalità punto usando un'icona e un'etichetta di testo con un livello simbolo.

Aggiungere un'icona personalizzata a un livello simbolo

Il rendering dei livelli dei simboli viene eseguito tramite OpenGL. Di conseguenza, tutte le risorse, ad esempio le immagini icona, devono essere caricate nel contesto OpenGL. Questo esempio illustra come aggiungere un'icona personalizzata alle risorse della mappa. Questa icona viene quindi usata per eseguire il rendering dei dati dei punti con un simbolo personalizzato sulla mappa. La proprietà textField del livello simbolo richiede che venga specificata un'espressione. In questo caso, si vuole eseguire il rendering della proprietà temperature. Inoltre, si vuole aggiungerlo "°F" . È possibile usare un'espressione per eseguire questa concatenazione:

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)

Per questo esempio, l'immagine seguente viene caricata nella cartella assets dell'app.

showers.png

Lo screenshot seguente mostra il codice precedente che esegue il rendering di una funzionalità punto usando un'icona personalizzata e un'etichetta di testo formattata con un livello simbolo.

Icone del marcatore di simboli predefinite

Inizialmente la mappa ha l'icona predefinita del marcatore predefinito, che è già caricata nell'immagine sprite della mappa. Viene usato per impostazione predefinita se nulla è impostato sull'opzione iconImage . Nel caso in cui sia necessario eseguire questa operazione manualmente, impostare sull'opzione "marker-default" iconImage .

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

Inoltre, l'SDK di iOS Mappe di Azure include un set di varianti di colore predefinite dell'icona del marcatore predefinita (blu scuro). Per accedere a queste icone di marcatori, usare le variabili statiche nella UIImage classe , ad esempio : UIImage.azm_markerRed.

Per usare un'immagine del marcatore non predefinita , è necessario aggiungerla allo sprite dell'immagine della mappa.

// 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")])

Il codice seguente elenca le immagini icona predefinite disponibili come variabili statiche della UIImage classe.

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

Informazioni aggiuntive

Per altri esempi di codice da aggiungere alle mappe, vedere gli articoli seguenti:

• Creare un'origine dati
• Clustering dei dati dei punti
• Aggiungere un livello per le bolle
• Usare espressioni di stile basate sui dati
• Visualizzare le informazioni sulle funzionalità