Clustering dei dati dei punti nell'SDK Web

Articolo
08/29/2024

Quando sulla mappa sono presenti molti punti dati, alcuni possono sovrapporsi tra loro. La sovrapposizione può rendere la mappa illeggibile e difficile da utilizzare. Il clustering dei dati dei punti è la combinazione di dati dei punti vicini tra loro e rappresentati sulla mappa come singolo punto dati in cluster. Quando l'utente ingrandisce la mappa, i cluster si scompongono nei singoli punti dati. Quando si lavora con un numero elevato di punti dati, i processi di clustering possono migliorare l'esperienza utente.

Abilitazione del clustering su un'origine dati

Abilitare il clustering nella classe DataSource impostando l'opzione cluster su true. Impostare clusterRadius per selezionare i punti vicini e combinarli in un cluster. Il valore di clusterRadius è indicato in pixel. Utilizzare clusterMaxZoom per specificare un livello di zoom in corrispondenza del quale disabilitare la logica di clustering. Di seguito è riportato un esempio che illustra come abilitare il clustering in un'origine dati.

//Create a data source and enable clustering.
var datasource = new atlas.source.DataSource(null, {
    //Tell the data source to cluster point data.
    cluster: true,
    
    //The radius in pixels to cluster points together.
    clusterRadius: 45,
    
    //The maximum zoom level in which clustering occurs.
    //If you zoom in more than this, all points are rendered as symbols.
    clusterMaxZoom: 15
});

Suggerimento

Se due punti dati sono vicini, è possibile che il cluster non si scomponga mai, indipendentemente dal livello di ingrandimento selezionato dall'utente. Per risolvere questo problema, è possibile impostare l'opzione clusterMaxZoom sulla disabilitazione della logica di clustering per fare in modo che vengano visualizzati tutti gli elementi.

La classe DataSource fornisce anche i metodi seguenti correlati al clustering.

metodo	Tipo restituito	Descrizione
getClusterChildren(clusterId: number)	Promise<Array<Feature<Geometry, any> \| Shape>>	Recupera gli elementi figlio del cluster specificato al livello di zoom successivo. Questi elementi figlio possono essere costituiti da una combinazione di forme e sottocluster. I cluster secondari sono funzionalità con proprietà corrispondenti a ClusteredProperties.
getClusterExpansionZoom(clusterId: number)	Promise<number>	Calcola un livello di zoom in corrispondenza del quale il cluster inizia a espandersi o scomporsi.
getClusterLeaves(clusterId: number, limit: number, offset: number)	Promise<Array<Feature<Geometry, any> \| Shape>>	Recupera tutti i punti in un cluster. Per impostazione predefinita, vengono restituiti i primi 10 punti. Per scorrere i punti, usare `limit` per specificare il numero di punti da restituire e `offset` per scorrere l'indice dei punti. Per restituire tutti i punti, impostare `limit` su `Infinity` e non impostare `offset`.

Visualizzare i cluster con un livello bolle

Il livello bolle è particolarmente indicato per il rendering dei punti in cluster. Usare le espressioni per ridimensionare il raggio e modificare il colore in base al numero di punti nel cluster. Se si sceglie di visualizzare i cluster tramite un livello bolle, è necessario usare un livello separato per eseguire il rendering dei punti dati non in cluster.

Per visualizzare le dimensioni del cluster nella parte superiore della bolla, usare un livello simbolo con testo, senza nessuna icona.

Per un esempio reale completo di come implementare la visualizzazione dei cluster usando un livello a bolle, vedere Cluster di punti nel livello a bolle negli esempi di Mappe di Azure. Per il codice sorgente di questo esempio, vedere Cluster di punti nel codice sorgente del livello a bolle.

Visualizzare i cluster con un livello simbolo

Quando si visualizzano i punti dati, il livello simbolo nasconde automaticamente i simboli che si sovrappongono per un'interfaccia utente più pulita. Questo comportamento predefinito potrebbe non essere desiderato se si intende visualizzare la densità dei punti dati sulla mappa. Tuttavia, è possibile modificare queste impostazioni. Per visualizzare tutti i simboli, impostare l'opzione allowOverlap della proprietà iconOptions dei livelli simbolo su true.

Usare il clustering per mostrare la densità dei punti dati mantenendo al contempo un'interfaccia utente pulita. L'esempio seguente illustra come aggiungere i simboli personalizzati e rappresentare i cluster e i singoli punti dati usando il livello simbolo.

Per un esempio reale completo di come implementare la visualizzazione dei cluster usando un livello simbolo, vedere Visualizzare i cluster con un livello simbolo negli esempi di Mappe di Azure. Per il codice sorgente di questo esempio, vedere Visualizzare i cluster con il codice sorgente del livello simbolo.

Clustering e livello mappe termiche

Le mappe termiche rappresentano un ottimo modo per visualizzare la densità dei dati sulla mappa. Questo metodo di visualizzazione può gestire autonomamente un numero elevato di punti dati. Se i punti dati sono raggruppati nel cluster e le dimensioni del cluster vengono usate come peso della mappa termica, quest'ultima può gestire ancora più dati. A questo scopo, impostare l'opzione weight del livello mappa termica su ['get', 'point_count']. Se il raggio del cluster è ridotto, la mappa termica è quasi identica a una mappa termica che usa i punti dati non in cluster, ma offre prestazioni nettamente migliori. Tuttavia, minore è il raggio del cluster, più accurata è la mappa termica, ma con meno vantaggi in termini di prestazioni.

Per un esempio reale completo che illustra come creare una mappa termica che usa il clustering nell'origine dati, vedere Mappa termica ponderata del cluster negli esempi di Mappe di Azure. Per il codice sorgente per questo campione, vedere Codice sorgente della mappa termica ponderata del cluster.

Eventi del mouse sui punti dati in cluster

Quando si verificano eventi del mouse su un livello contenente punti dati in cluster, questi ultimi vengono restituiti all'evento sotto forma di oggetti della funzionalità punto GeoJSON. Questa funzionalità dei punti dispone delle proprietà seguenti:

Nome proprietà	Type	Descrizione
`cluster`	boolean	Indica se la funzionalità rappresenta un cluster.
`cluster_id`	string	ID univoco per il cluster che può essere usato con i metodi `getClusterExpansionZoom`, `getClusterChildren` e `getClusterLeaves` della classe DataSource.
`point_count`	number	Numero di punti contenuti nel cluster.
`point_count_abbreviated`	string	Stringa che abbrevia il valore `point_count` se necessario. Ad esempio, 4.000 diventa 4K.

L'esempio Cluster di punti nel livello a bolle considera un livello a bolle che restituisce punti di cluster e aggiunge un evento clic. Quando l'evento Click si attiva, il codice calcola e ingrandisce la mappa fino al livello di zoom successivo, in corrispondenza del quale il cluster si scompone. Questa funzionalità viene implementata tramite il metodo getClusterExpansionZoom della classe DataSource e la proprietà cluster_id del punto dati in cluster selezionato.

Il frammento di codice seguente mostra il codice nell'esempio dei Cluster di punti nel livello a bolle che aggiunge la funzionalità dell'evento clic ai punti dati di cui è stato eseguito il clustering:

//Add a click event to the layer so we can zoom in when a user clicks a cluster.
map.events.add('click', clusterBubbleLayer, clusterClicked);

//Add mouse events to change the mouse cursor when hovering over a cluster.
map.events.add('mouseenter', clusterBubbleLayer, function () {
    map.getCanvasContainer().style.cursor = 'pointer';
});

map.events.add('mouseleave', clusterBubbleLayer, function () {
    map.getCanvasContainer().style.cursor = 'grab';
});

function clusterClicked(e) {
    if (e && e.shapes && e.shapes.length > 0 && e.shapes[0].properties.cluster) {
        //Get the clustered point from the event.
        var cluster = e.shapes[0];

        //Get the cluster expansion zoom level. This is the zoom level at which the cluster starts to break apart.
        datasource.getClusterExpansionZoom(cluster.properties.cluster_id).then(function (zoom) {

            //Update the map camera to be centered over the cluster. 
            map.setCamera({
                center: cluster.geometry.coordinates,
                zoom: zoom,
                type: 'ease',
                duration: 200
            });
        });
    }
}

Visualizzare l'area del cluster

I dati dei punti rappresentati da un cluster sono distribuiti in un'area. In questo esempio, quando si passa il mouse su un cluster, si verificano due comportamenti principali. Per prima cosa, i singoli punti dati contenuti nel cluster vengono usati per calcolare un hull convesso. Quindi, l'hull convesso viene visualizzato sulla mappa per mostrare un'area. Un hull convesso è un poligono che esegue il wrapping di un set di punti come se fosse una banda elastica e può essere calcolato usando il metodo atlas.math.getConvexHull. Tutti i punti contenuti in un cluster possono essere recuperati dall'origine dati tramite il metodo getClusterLeaves.

Per un esempio reale completo che illustra come eseguire questa operazione, vedere Visualizzare l'area cluster con un hull convesso negli esempi di Mappe di Azure. Per il codice sorgente di questo esempio, vedere Visualizzare l'area cluster con il codice sorgente dell'hull convesso.

Aggregazione dei dati nei cluster

Spesso i cluster sono rappresentati da un simbolo in cui è indicato il numero di punti che contengono. Tuttavia, a volte è opportuno personalizzare lo stile dei cluster con metriche aggiuntive. Con gli aggregati del cluster, è possibile creare e popolare proprietà personalizzate tramite il calcolo di un'espressione di aggregazione. Gli aggregati del cluster possono essere definiti nell'opzione clusterProperties di DataSource.

Nell'esempio Aggregati del clusterviene utilizzata un'espressione di aggregazione. Il codice calcola un numero in base alla proprietà del tipo di entità di ogni punto dati in un cluster. Quando un utente seleziona un cluster, viene visualizzata una finestra popup con informazioni aggiuntive sul cluster. Per il codice sorgente di questo esempio, vedere Codice sorgente degli aggregati del cluster.