Puntgegevens clusteren in de Web SDK

Artikel
06/27/2023

Wanneer er veel gegevenspunten op de kaart staan, kunnen sommige elkaar overlappen. De overlapping kan ertoe leiden dat de kaart onleesbaar en moeilijk te gebruiken is. Het clusteren van puntgegevens is het proces van het combineren van puntgegevens die zich dicht bij elkaar bevinden en deze als één geclusterd gegevenspunt weer te geven op de kaart. Als de gebruiker inzoomt op de kaart, vallen de clusters uiteen in de afzonderlijke gegevenspunten. Wanneer u met een groot aantal gegevenspunten werkt, kunnen de clusteringprocessen de gebruikerservaring verbeteren.

Clustering inschakelen op een gegevensbron

Schakel clustering in de DataSource klasse in door de cluster optie in te stellen op true. Stel in clusterRadius om nabijgelegen punten te selecteren en deze te combineren tot een cluster. De waarde van clusterRadius is in pixels. Gebruik clusterMaxZoom om een zoomniveau op te geven waarop de clusterlogica moet worden uitgeschakeld. Hier volgt een voorbeeld van het inschakelen van clustering in een gegevensbron.

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

Tip

Als twee gegevenspunten zich dicht bij elkaar op de grond bevinden, is het mogelijk dat het cluster nooit uit elkaar valt, ongeacht hoe dicht de gebruiker inzoomt. Als u dit wilt oplossen, kunt u de clusterMaxZoom optie instellen om de clusterlogica uit te schakelen en gewoon alles weer te geven.

De DataSource klasse biedt ook de volgende methoden met betrekking tot clustering.

Methode	Retourtype	Beschrijving
getClusterChildren(clusterId: number)	Promise<Array<Feature<Geometry, any> \| Vorm>>	Hiermee worden de onderliggende elementen opgehaald van het opgegeven cluster op het volgende zoomniveau. Deze elementen kunnen een combinatie zijn van vormen en subclusters. De subclusters zijn functies met eigenschappen die overeenkomen met ClusteredProperties.
getClusterExpansionZoom(clusterId: number)	Promise<getal>	Berekent een zoomniveau waarop het cluster begint uit te breiden of uit elkaar te breken.
getClusterLeaves(clusterId: number, limit: number, offset: number)	Promise<Array<Feature<Geometry, any> \| Vorm>>	Haalt de punten in een cluster op. Standaard worden de eerste 10 punten geretourneerd. Als u de punten wilt doorlopen, gebruikt `limit` u om het aantal punten op te geven dat moet worden geretourneerd en `offset` om de index van de punten te doorlopen. Als u alle punten wilt retourneren, stelt u in `limit` op `Infinity` en niet in `offset`.

Clusters weergeven met behulp van een bellenlaag

Een bellenlaag is een uitstekende manier om gegroepeerde punten weer te geven. Gebruik expressies om de radius te schalen en de kleur te wijzigen op basis van het aantal punten in het cluster. Als u clusters weergeeft met behulp van een bellenlaag, moet u een afzonderlijke laag gebruiken om niet-geclusterde gegevenspunten weer te geven.

Als u de grootte van het cluster boven op de bel wilt weergeven, gebruikt u een symboollaag met tekst en gebruikt u geen pictogram.

Zie Puntclusters in bellenlaag in de Azure Maps Voorbeelden voor een volledig werkend voorbeeld van het implementeren van weergaveclusters met behulp van een bellenlaag. Zie Puntclusters in bubble layer-broncode voor de broncode voor dit voorbeeld.

Schermopname van een kaart met clusters die gebruikmaken van een bellenlaag.

Clusters weergeven met behulp van een symboollaag

Bij het visualiseren van gegevenspunten verbergt de symboollaag automatisch symbolen die elkaar overlappen om een schonere gebruikersinterface te garanderen. Dit standaardgedrag kan ongewenst zijn als u de dichtheid van gegevenspunten op de kaart wilt weergeven. Deze instellingen kunnen echter worden gewijzigd. Als u alle symbolen wilt weergeven, stelt u de allowOverlap optie van de eigenschap Symboollagen in iconOptions op true.

Gebruik clustering om de dichtheid van de gegevenspunten weer te geven met behoud van een schone gebruikersinterface. In het volgende voorbeeld ziet u hoe u aangepaste symbolen toevoegt en clusters en afzonderlijke gegevenspunten vertegenwoordigt met behulp van de symboollaag.

Zie Clusters met een symboollaag weergeven in de Azure Maps Voorbeelden voor een volledig werkend voorbeeld van het implementeren van het weergeven van clusters met behulp van een symboollaag. Zie Clusters weergeven met een symboollaagbroncode voor de broncode voor dit voorbeeld.

Schermopname van een kaart met clusters met een symboollaag.

Clustering en de heatmaplaag

Heatmaps zijn een uitstekende manier om de dichtheid van gegevens op de kaart weer te geven. Deze visualisatiemethode kan een groot aantal gegevenspunten zelfstandig verwerken. Als de gegevenspunten zijn gegroepeerd en de clustergrootte wordt gebruikt als het gewicht van de heatmap, kan de heatmap nog meer gegevens verwerken. Als u deze optie wilt bereiken, stelt u de weight optie van de heatmap-laag in op ['get', 'point_count']. Wanneer de radius van het cluster klein is, ziet de heatmap er bijna identiek uit als een heatmap die gebruikmaakt van de niet-geclusterde gegevenspunten, maar deze presteert beter. Hoe kleiner de clusterradius, hoe nauwkeuriger de heatmap is, maar met minder prestatievoordelen.

Zie Clustergewogen heatmap in de Azure Maps Voorbeelden voor een volledig werkend voorbeeld dat laat zien hoe u een heatmap maakt die gebruikmaakt van clustering op de gegevensbron. Zie Clustergewogen heatmap-broncode voor de broncode voor dit voorbeeld.

Schermopname van een heatmap die gebruikmaakt van clustering op de gegevensbron.

Muisgebeurtenissen op geclusterde gegevenspunten

Wanneer muisgebeurtenissen plaatsvinden op een laag die geclusterde gegevenspunten bevat, keert het geclusterde gegevenspunt terug naar de gebeurtenis als een GeoJSON-puntfunctieobject. Deze puntfunctie heeft de volgende eigenschappen:

Naam van eigenschap	Type	Beschrijving
`cluster`	booleaans	Geeft aan of de functie een cluster vertegenwoordigt.
`cluster_id`	tekenreeks	Een unieke id voor het cluster die kan worden gebruikt met de methoden `getClusterExpansionZoom`, `getClusterChildren` en `getClusterLeaves` van DataSource.
`point_count`	getal	Het aantal punten dat het cluster bevat.
`point_count_abbreviated`	tekenreeks	Een tekenreeks waarmee de `point_count` waarde wordt afgekort als deze lang is. (4000 wordt bijvoorbeeld 4K).

In het voorbeeld van puntclusters in bellenlaag wordt een bellenlaag gebruikt die clusterpunten weergeeft en een klik-gebeurtenis toevoegt. Wanneer de klik-gebeurtenis wordt geactiveerd, wordt de kaart door de code berekend en ingezoomd op het volgende zoomniveau, waarbij het cluster uit elkaar wordt gehaald. Deze functionaliteit wordt geïmplementeerd met behulp van de getClusterExpansionZoom methode van de DataSource klasse en de cluster_id eigenschap van het geclusterde gegevenspunt waarop wordt geklikt.

In het volgende codefragment ziet u de code in het voorbeeld Puntclusters in bellenlaag waarmee de functionaliteit van de klikgebeurtenis wordt toegevoegd aan de geclusterde gegevenspunten:

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

Schermopname van een kaart met clusters die gebruikmaken van een bellenlaag.

Clustergebied weergeven

De puntgegevens die een cluster vertegenwoordigt, zijn verspreid over een gebied. Wanneer in dit voorbeeld de muisaanwijzer boven een cluster wordt beweegt, treden twee hoofdgedragingen op. Eerst worden de afzonderlijke gegevenspunten in het cluster gebruikt om een convexe romp te berekenen. Vervolgens wordt de convexe romp weergegeven op de kaart om een gebied weer te geven. Een convexe romp is een veelhoek die een reeks punten als een elastische band omhult en kan worden berekend met behulp van de atlas.math.getConvexHull methode. Alle punten in een cluster kunnen worden opgehaald uit de gegevensbron met behulp van de getClusterLeaves -methode.

Zie Clustergebied weergeven met convexe romp in de Azure Maps Voorbeelden voor een volledig werkend voorbeeld dat laat zien hoe u dit doet. Zie Clustergebied weergeven met Convex Hull-broncode voor de broncode voor dit voorbeeld.

Schermopname van een kaart met clustergebieden die worden vertegenwoordigd door drop pins die Convex Hull laten zien die het clustergebied markeert wanneer deze optie is geselecteerd.

Gegevens in clusters aggregeren

Clusters worden vaak weergegeven met behulp van een symbool met het aantal punten dat zich in het cluster bevindt. Soms is het echter wenselijk om de stijl van clusters aan te passen met meer metrische gegevens. Met clusteraggregaties kunnen aangepaste eigenschappen worden gemaakt en ingevuld met behulp van een berekening van een aggregatie-expressie . Clusteraggregaties kunnen worden gedefinieerd in clusterProperties de optie van de DataSource.

Het voorbeeld Clusteraggregaties maakt gebruik van een aggregatie-expressie. Met de code wordt een telling berekend op basis van de eigenschap entiteitstype van elk gegevenspunt in een cluster. Wanneer een gebruiker een cluster selecteert, wordt er een pop-up weergegeven met aanvullende informatie over het cluster. Zie Broncode voor clusteraggregaties voor de broncode voor dit voorbeeld.

Schermopname van een kaart die gebruikmaakt van clustering die is gedefinieerd met behulp van berekening van gegevensgestuurde stijlexpressies. Met deze berekeningen worden waarden samengevoegd voor alle punten in het cluster.