Puntgegevens clusteren in de Web SDK

Artikel
11/29/2022
5 minuten om te lezen

Wanneer u veel gegevenspunten op de kaart visualiseert, kunnen gegevenspunten 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, gebruikt u de clusteringprocessen om uw gebruikerservaring te 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, elke> \| 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 bestaan uit functies met eigenschappen die overeenkomen met ClusteredProperties.
getClusterExpansionZoom(clusterId: getal)	Promise<getal>	Hiermee wordt een zoomniveau berekend waarbij het cluster gaat uitbreiden of uiteenvalt.
getClusterLeaves(clusterId: number, limit: number, offset: number)	Promise<Array<Feature<Geometry, elke> \| 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.

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 onderstaande voorbeeld ziet u hoe u aangepaste symbolen toevoegt en clusters en afzonderlijke gegevenspunten vertegenwoordigt met behulp van de 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 geclusterd 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 met behulp van de niet-geclusterde gegevenspunten, maar presteert deze veel beter. Hoe kleiner de clusterradius, hoe nauwkeuriger de heatmap, maar met minder prestatievoordelen.

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 dit voorbeeld wordt een bellenlaag gebruikt waarmee clusterpunten worden weergegeven en wordt een klik-gebeurtenis toegevoegd. 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.

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.

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 aanvullende 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.

In het volgende voorbeeld wordt een statistische expressie gebruikt. De code berekent een telling op basis van de eigenschap entiteitstype van elk gegevenspunt in een cluster. Wanneer een gebruiker op een cluster klikt, wordt er een pop-up weergegeven met aanvullende informatie over het cluster.