Aggiungere un livello bolla a una mappa in iOS SDK (anteprima)

Questo articolo illustra come eseguire il rendering dei dati dei punti da un'origine dati come livello bolla su una mappa. I livelli a bolle eseguono il rendering dei punti come cerchi sulla mappa con un raggio a virgola fissa.

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 le bolle

Il codice seguente carica una matrice di punti in un'origine dati. Quindi, connette i punti dati a un livello a bolle. Il livello bolla esegue il rendering del raggio di ogni bolla con cinque punti e un colore di riempimento bianco. E, un colore di tratto di blu e una larghezza del tratto di sei punti.

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

// Create point locations.
let points = [
    Point(CLLocationCoordinate2D(latitude: 40.75773, longitude: -73.985708)),
    Point(CLLocationCoordinate2D(latitude: 40.76542, longitude: -73.985600)),
    Point(CLLocationCoordinate2D(latitude: 40.77900, longitude: -73.985550)),
    Point(CLLocationCoordinate2D(latitude: 40.74859, longitude: -73.975550)),
    Point(CLLocationCoordinate2D(latitude: 40.78859, longitude: -73.968900))
]

// Add multiple points to the data source.
source.add(geometries: points)

// Create a bubble layer to render the filled in area of the circle, and add it to the map.
let layer = BubbleLayer(source: source, options: [
    .bubbleRadius(5),
    .bubbleColor(.white),
    .bubbleStrokeColor(.blue),
    .bubbleStrokeWidth(6)
])
map.layers.addLayer(layer)

Lo screenshot seguente mostra il rendering dei punti nel codice precedente in un livello a bolle.

Mostrare etichette con un livello bolle

Questo codice illustra come usare un livello bolla per eseguire il rendering di un punto sulla mappa. E come usare un livello simbolo per eseguire il rendering di un'etichetta. Per nascondere l'icona del livello simbolo, impostare l'opzione iconImage su nil.

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

// Add a data point to the map.
source.add(geometry: Point(CLLocationCoordinate2D(latitude: 47.627631, longitude: -122.336641)))

// Add a bubble layer.
map.layers.addLayer(
    BubbleLayer(source: source, options: [
        .bubbleRadius(5),
        .bubbleColor(.white),
        .bubbleStrokeColor(.blue),
        .bubbleStrokeWidth(6)
    ])
)

// Add a symbol layer to display text, hide the icon image.
map.layers.addLayer(
    SymbolLayer(source: source, options: [
        .iconImage(nil),
        .textField("Museum of History & Industry (MOHAI)"),
        .textColor(.blue),
        .textOffset(CGVector(dx: 0, dy: -2.2))
    ])
)

Lo screenshot seguente mostra il codice precedente che esegue il rendering di un punto in un livello a bolle e di un'etichetta di testo per il punto con un livello simbolo.

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 i simboli
• Usare espressioni di stile basate sui dati
• Visualizzare le informazioni sulle funzionalità