Aggiungere un livello mappa termica in iOS SDK (anteprima)

Le mappe termiche, note anche come mappe di densità dei punti, sono un tipo di visualizzazione dei dati. Vengono usati per rappresentare la densità dei dati usando un intervallo di colori e mostrare i dati "aree calde" su una mappa. Le mappe termiche sono un ottimo modo per eseguire il rendering dei set di dati con un numero elevato di punti.

Il rendering di decine di migliaia di punti come simboli può coprire la maggior parte dell'area della mappa. In questo caso è probabile che molti simboli si sovrappongano. Rendendo difficile comprendere meglio i dati. Tuttavia, la visualizzazione dello stesso set di dati di una mappa termica semplifica la visualizzazione della densità e della densità relativa di ogni punto dati.

È possibile usare mappe termiche in molti scenari diversi, tra cui:

• Dati relativi alla temperatura: fornisce approssimazioni per la temperatura tra due punti dati.
• Dati per i sensori di rumore: mostra non solo l'intensità del rumore in cui si trova il sensore, ma può anche fornire informazioni dettagliate sulla dissipazione su una distanza. Il livello di rumore in un sito potrebbe non essere elevato. Se l'area di copertura del rumore di più sensori si sovrappone, è possibile che questa area sovrapposta possa riscontrare livelli di rumore più elevati. Di conseguenza, l'area sovrapposta sarebbe visibile nella mappa termica.
• Traccia GPS: include la velocità come mappa dell'altezza ponderata, in cui l'intensità di ogni punto dati si basa sulla velocità. Ad esempio, questa funzionalità offre un modo per vedere dove un veicolo stava velocizzando.

Internet delle cose mostra - Mappe termica e sovrapposizioni di immagini in Mappe di Azure

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 mappa termica

Per eseguire il rendering di un'origine dati di punti come mappa termica, passare l'origine dati in un'istanza della HeatMapLayer classe e aggiungerla alla mappa.

L'esempio di codice seguente carica un feed GeoJSON di terremoti della settimana precedente e li esegue come mappa termica. Viene eseguito il rendering di ogni punto dati con un raggio di 10 punti a tutti i livelli di zoom. Per garantire un'esperienza utente migliore, la mappa termica è al di sotto del livello etichetta, in modo che le etichette rimangano chiaramente visibili. I dati in questo esempio provengono dal programma USGS Earthquake Hazards Program.

// Create a data source.
let source = DataSource()

// Import the geojson data and add it to the data source.
let url = URL(string: "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_week.geojson")!
source.importData(fromURL: url)

// Add data source to the map.
map.sources.add(source)

// Create a heat map layer.
let layer = HeatMapLayer(
    source: source,
    options: [
        .heatmapRadius(10),
        .heatmapOpacity(0.8)
    ]
)

// Add the layer to the map, below the labels.
map.layers.insertLayer(layer, below: "labels")

Lo screenshot seguente mostra una mappa che carica una mappa termica usando il codice precedente.

Personalizzare il livello mappa termica

Nell'esempio precedente viene personalizzata la mappa termica impostando le opzioni di radius e opacità. Il livello mappa termica offre diverse opzioni per la personalizzazione, tra cui:

• heatmapRadius: definisce un raggio in punti in cui eseguire il rendering di ogni punto dati. È possibile impostare il raggio come numero fisso o come espressione. Usando un'espressione, è possibile ridimensionare il raggio in base al livello di zoom e rappresentare un'area spaziale coerente sulla mappa (ad esempio, un raggio di 5 miglia).

• heatmapColor: specifica la modalità di colorazione della mappa termica. Una sfumatura di colore è una caratteristica comune delle mappe termiche. È possibile ottenere l'effetto con un'espressione NSExpression(forAZMInterpolating:curveType:parameters:stops:) . È anche possibile usare un'espressione NSExpression(forAZMStepping:from:stops:) per colorare la mappa termica, suddividendo visivamente la densità in intervalli simili a una mappa di stile di contorno o radar. Queste tavolozze di colori definiscono i colori dal valore di densità minima a quello massimo.

  Specificare i valori di colore per le mappe termiche come espressione sul NSExpression.heatmapDensityAZMVariable valore . Il colore dell'area in cui non sono presenti dati è definito in corrispondenza dell'indice 0 dell'espressione "Interpolazione" o il colore predefinito di un'espressione "Con rientri". È possibile usare questo valore per definire un colore di sfondo. Spesso, questo valore è impostato su trasparente o su un nero semitrasparente.

  Ecco alcuni esempi di espressioni di colore:

// Interpolated color expression
NSExpression(
    forAZMInterpolating: .heatmapDensityAZMVariable,
    curveType: .linear,
    parameters: nil,
    stops: NSExpression(forConstantValue: [
        0: UIColor.magenta.withAlphaComponent(0),
        0.01: UIColor.magenta,
        0.5: UIColor(red: 251/255, green: 0, blue: 251/255, alpha: 1),
        1: UIColor(red: 0, green: 195/255, blue: 1, alpha: 1)
    ])
)

// Stepped color expression
NSExpression(
    forAZMStepping: .heatmapDensityAZMVariable,
    from: NSExpression(forConstantValue: UIColor.clear),
    stops: NSExpression(forConstantValue: [
        0.01: UIColor(red: 0, green: 0, blue: 128/255, alpha: 1),
        0.25: UIColor.cyan,
        0.5: UIColor.green,
        0.75: UIColor.yellow,
        1: UIColor.red
    ])
)

• heatmapOpacity: specifica la modalità di opacità o trasparente del livello mappa termica.

• heatmapIntensity: applica un moltiplicatore al peso di ogni punto dati per aumentare l'intensità complessiva della mappa termica. Causa una differenza nel peso dei punti dati, semplificando la visualizzazione.

• heatmapWeight: per impostazione predefinita, tutti i punti dati hanno un peso pari a 1 e vengono ponderati allo stesso modo. L'opzione peso funge da moltiplicatore ed è possibile impostarla come numero o espressione. Se un numero è impostato come peso, è l'equivalenza di posizionare ogni punto dati sulla mappa due volte. Ad esempio, se il peso è 2, la densità raddoppia. Impostando l'opzione peso su un numero, la mappa termica viene renderizzata in modo simile all'utilizzo dell'opzione intensità.

  Tuttavia, se si usa un'espressione, il peso di ogni punto dati può essere basato sulle proprietà di ogni punto dati. Si supponga, ad esempio, che ogni punto dati rappresenti un terremoto. Il valore di grandezza è stato una metrica importante per ogni punto dati del terremoto. I terremoti si verificano sempre, ma la maggior parte ha una grandezza bassa e non viene notato. Usare il valore di grandezza in un'espressione per assegnare il peso a ogni punto dati. Usando il valore di grandezza per assegnare il peso, si ottiene una rappresentazione migliore del significato dei terremoti all'interno della mappa termica.

• minZoom e maxZoom: intervallo del livello di zoom in cui deve essere visualizzato il livello.

• filter: predicato di filtro usato per limitare l'oggetto recuperato dall'origine e sottoposto a rendering nel livello.

• sourceLayer: se l'origine dati connessa al livello è un'origine di riquadri vettoriali, è necessario specificare un livello di origine all'interno dei riquadri vettoriali.

• visible: nasconde o mostra il livello.

Nell'esempio seguente viene illustrata una mappa termica usando un'espressione di interpolazione liner per creare una sfumatura di colore uniforme. La mag proprietà definita nei dati viene usata con un'interpolazione esponenziale per impostare il peso o la pertinenza di ogni punto dati.

let layer = HeatMapLayer(source: source, options: [
    .heatmapRadius(10),

    // A linear interpolation is used to create a smooth color gradient based on the heat map density.
    .heatmapColor(
        from: NSExpression(
            forAZMInterpolating: .heatmapDensityAZMVariable,
            curveType: .linear,
            parameters: nil,
            stops: NSExpression(forConstantValue: [
                0: UIColor.black.withAlphaComponent(0),
                0.01: UIColor.black,
                0.25: UIColor.magenta,
                0.5: UIColor.red,
                0.75: UIColor.yellow,
                1: UIColor.white
            ])
        )
    ),

    // Using an exponential interpolation since earthquake magnitudes are on an exponential scale.
    .heatmapWeight(
        from: NSExpression(
            forAZMInterpolating: NSExpression(forKeyPath: "mag"),
            curveType: .exponential,
            parameters: NSExpression(forConstantValue: 2),
            stops: NSExpression(forConstantValue: [
                0: 0,
                // Any earthquake above a magnitude of 6 will have a weight of 1
                6: 1
            ])
        )
    )
])

Lo screenshot seguente mostra il livello mappa termica personalizzata precedente usando gli stessi dati dell'esempio di mappa termica precedente.

Mappa termica zoomabile coerente

Per impostazione predefinita, i raggi dei punti dati di cui viene eseguito il rendering nel livello mappa termica hanno un raggio a virgola fissa per tutti i livelli di zoom. Quando si esegue lo zoom della mappa, i dati vengono aggregati insieme e il livello mappa termica ha un aspetto diverso. Il video seguente mostra il comportamento predefinito della mappa termica in cui mantiene un raggio del punto durante lo zoom della mappa.

Usare un'espressione zoom per ridimensionare il raggio per ogni livello di zoom, in modo che ogni punto dati copre la stessa area fisica della mappa. Questa espressione rende il livello mappa termica più statico e coerente. Ogni livello di zoom della mappa ha il doppio di punti verticalmente e orizzontalmente del livello di zoom precedente.

Ridimensionare il raggio in modo che raddoppii con ogni livello di zoom crei una mappa termica che abbia un aspetto coerente su tutti i livelli di zoom. Per applicare questa scalabilità, usare NSExpression.zoomLevelAZMVariable con un'espressione base 2 exponential interpolation , con il raggio del punto impostato per il livello di zoom minimo e un raggio ridimensionato per il livello di zoom massimo calcolato come pow(2, maxZoom - minZoom) * radius illustrato nell'esempio seguente. Ingrandire la mappa per verificare la scalabilità della mappa termica con il livello di zoom.

let layer = HeatMapLayer(source: source, options: [
    .heatmapOpacity(0.75),
    .heatmapRadius(
        from: NSExpression(
            forAZMInterpolating: .zoomLevelAZMVariable,
            curveType: .exponential,
            parameters: NSExpression(forConstantValue: 2),
            stops: NSExpression(forConstantValue: [

                // For zoom level 1 set the radius to 2 points.
                1: 2,

                // Between zoom level 1 and 19, exponentially scale the radius from 2 points to 2 * 2^(maxZoom - minZoom) points.
                19: pow(2, 19 - 1) * 2
            ])
        )
    )
])

Il video seguente mostra una mappa che esegue il codice precedente, che ridimensiona il raggio mentre la mappa viene ridotta per creare un rendering coerente della mappa termica tra i livelli di zoom.

let layer = HeatMapLayer(source: source, options: [
    .heatmapWeight(from: NSExpression(forKeyPath: "point_count"))
])

Informazioni aggiuntive

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

• Creare un'origine dati
• Usare espressioni di stile basate sui dati