Puntgegevens clusteren in de Web SDK
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.
Volgende stappen
Meer informatie over de klassen en methoden die worden gebruikt in dit artikel:
Bekijk codevoorbeelden om functionaliteit aan uw app toe te voegen: