Clustering von Punktdaten im Web SDK

Wenn auf der Karte viele Datenpunkte visualisiert werden, kann es bei diesen Datenpunkten zu gegenseitigen Überlappungen kommen. Die Überlappungen können dazu führen, dass die Karte unlesbar und schwer zu verwenden ist. Das Clustering von Punktdaten ist der Prozess, bei dem benachbarte Punktdaten kombiniert und auf der Karte als ein einzelner gruppierter Datenpunkt dargestellt werden. Wenn der Benutzer in die Karte zoomt, werden die Cluster in ihre einzelnen Datenpunkte unterteilt. Wenn Sie mit einer großen Anzahl von Datenpunkten arbeiten, verwenden Sie die Clusteringprozesse, um die Erfahrung Ihrer Benutzer zu verbessern.


Aktivieren des Clusterings für eine Datenquelle

Aktivieren des Clusterings in der DataSource-Klasse, indem Sie die Option cluster auf true festlegen. Durch Festlegen von clusterRadius werden nahe gelegene Punkte ausgewählt und zu einem Cluster kombiniert. Der Wert von clusterRadius wird in Pixel angegeben. Verwenden Sie clusterMaxZoom, um einen Zoomfaktor anzugeben, ab dem die Clusteringlogik deaktiviert werden soll. Hier folgt ein Beispiel, wie Sie das Clustering in einer Datenquelle aktivieren können.

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

Tipp

Wenn zwei Datenpunkte im Gelände dicht beieinander liegen, ist es möglich, dass der Cluster nie aufgelöst wird, unabhängig davon, wie stark der Benutzer vergrößert. Um dies zu umgehen, können Sie die Option clusterMaxZoom so festlegen, dass die Clusteringlogik deaktiviert und somit einfach alles angezeigt wird.

Die Klasse DataSource stellt im Hinblick auf das Clustering auch die folgenden Methoden bereit.

Methode Rückgabetyp BESCHREIBUNG
getClusterChildren(clusterId: number) Promise<Array<Feature<Geometry, any> | Shape>> Ruft die untergeordneten Elemente des angegebenen Clusters für den nächsten Zoomfaktor ab. Diese untergeordneten Elemente können eine Kombination aus Formen und untergeordneten Clustern sein. Die untergeordneten Cluster sind Features mit Eigenschaften, die ClusteredProperties entsprechen.
getClusterExpansionZoom(clusterId: number) Promise<number> Berechnet einen Zoomfaktor, bei dem der Cluster mit der Erweiterung oder Unterteilung beginnt.
getClusterLeaves(clusterId: number, limit: number, offset: number) Promise<Array<Feature<Geometry, any> | Shape>> Ruft die Punkte in einem Cluster ab. Standardmäßig werden die ersten 10 Punkte zurückgegeben. Um durch die Punkte zu blättern, verwenden Sie limit, um die Anzahl der zurückzugebenden Punkte anzugeben, und offset, um den Index der Punkte zu durchlaufen. Wenn Sie alle Punkte zurückgeben möchten, legen Sie limit auf Infinity fest, und legen Sie offset nicht fest.

Anzeigen von Clustern mithilfe einer Blasenebene

Eine Blasenebene ist eine hervorragende Möglichkeit, um geclusterte Datenpunkte zu rendern. Verwenden Sie Ausdrücke zum Skalieren des Radius, und ändern Sie die Farbe basierend auf der Anzahl der Punkte im Cluster. Bei der Darstellung von Clustern mit einer Blasenebene sollten Sie eine separate Ebene für das Rendering nicht geclusterter Datenpunkte verwenden.

Um die Größe des Clusters auf der Blase anzuzeigen, verwenden Sie eine Symbolebene mit Text und verwenden kein Symbol.


Anzeigen von Clustern mithilfe einer Symbolebene

Beim Visualisieren von Datenpunkten blendet die Symbolebene automatisch Symbole aus, die einander überlappen, um eine klarere Benutzeroberfläche sicherzustellen. Dieses Standardverhalten ist möglicherweise unerwünscht, wenn Sie die Datenpunktdichte auf der Karte anzeigen möchten. Diese Einstellungen können jedoch geändert werden. Um alle Symbole anzuzeigen, legen Sie die Option allowOverlap der iconOptions-Eigenschaft der Symbolebenen auf true fest.

Verwenden Sie Clustering, um die Datenpunktdichte anzuzeigen und gleichzeitig eine aufgeräumte Benutzeroberfläche zu erhalten. Im Folgenden Beispiel wird gezeigt, wie Sie mithilfe der Symbolebene benutzerdefinierte Symbole hinzufügen sowie Cluster und einzelne Datenpunkte darstellen.


Clustering und Wärmebildebene

Wärmebilder sind eine hervorragende Möglichkeit, die Dichte der Daten auf der Karte anzuzeigen. Diese Visualisierungsmethode kann eigenständig eine große Anzahl von Datenpunkten verarbeiten. Wenn die Datenpunkte geclustert werden und die Clustergröße als Gewichtung des Wärmebilds verwendet wird, kann das Wärmebild sogar noch mehr Daten handhaben. Um diese Option zu realisieren, legen Sie die weight-Option der Wärmebildebene auf ['get', 'point_count'] fest. Bei einem kleinen Clusterradius sieht das Wärmebild nahezu identisch zu einem Wärmebild aus, das die nicht gruppierten Datenpunkte verwendet. Es wird aber viel besser funktionieren. Je kleiner der Clusterradius, desto genauer ist das Wärmebild, jedoch mit geringerem Leistungsvorteil.


Mausereignisse für gruppierte Datenpunkte

Wenn Mausereignisse auf einer Ebene auftreten, die gruppierte Datenpunkte enthält, wird der gruppierte Datenpunkt als GeoJSON-Punktfeatureobjekt an das Ereignis zurückgegeben. Dieses Punktfeature weist die folgenden Eigenschaften auf:

Eigenschaftenname type BESCHREIBUNG
cluster boolean Gibt an, ob das Feature einen Cluster darstellt.
cluster_id Zeichenfolge Eine eindeutige ID für den Cluster, die mit den DataSource-Methoden getClusterExpansionZoom, getClusterChildren und getClusterLeaves verwendet werden kann.
point_count number Die Anzahl der Punkte, die der Cluster enthält.
point_count_abbreviated Zeichenfolge Eine Zeichenfolge, die den point_count-Wert abkürzt, falls er zu lang ist. (Beispiel: 4.000 wird zu 4K)

Dieses Beispiel nutzt eine Blasenebene, die Clusterpunkte rendert und ein Klickereignis hinzufügt. Wenn das Klickereignis ausgelöst wird, berechnet der Code die Karte und zoomt Sie auf die nächste Zoomstufe, bei der der Cluster aufgelöst wird. Diese Funktion wird mit der getClusterExpansionZoom-Methode der DataSource-Klasse und der cluster_id-Eigenschaft des angeklickten geclusterten Datenpunkts implementiert.


Anzeigen des Clusterbereichs

Die Punktdaten, die ein Cluster darstellt, sind über einen Bereich verteilt. In diesem Beispiel treten zwei Hauptverhaltensweisen auf, wenn mit der Maus auf einen Cluster gezeigt wird. Zuerst werden die einzelnen Datenpunkte, die im Cluster enthalten sind, verwendet, um eine konvexe Hülle zu berechnen. Anschließend wird die konvexe Hülle auf der Karte angezeigt, um einen Bereich darzustellen. Eine konvexe Hülle ist ein Polygon, das einen Satz von Punkten wie ein elastisches Band umhüllt und mit der atlas.math.getConvexHull-Methode berechnet werden kann. Alle in einem Cluster enthaltenen Punkte können mit der Methode getClusterLeaves aus der Datenquelle abgerufen werden.


Aggregieren von Daten in Clustern

Cluster werden oft mithilfe eines Symbols mit der Anzahl der im Cluster enthaltenen Punkte dargestellt. Manchmal ist es jedoch wünschenswert, den Clusterstil mit zusätzlichen Metriken anzupassen. Mit Clusteraggregaten können benutzerdefinierte Eigenschaften erstellt und dann mithilfe einer Berechnung vom Typ Aggregatausdruck aufgefüllt werden. Clusteraggregate können in der Option clusterProperties von DataSource definiert werden.

Im folgenden Beispiel wird ein Aggregatausdruck verwendet. Der Code berechnet eine Anzahl basierend auf der Eigenschaft „Entitätstyp“ der einzelnen Datenpunkte in einem Cluster. Wenn ein Benutzer auf einen Cluster klickt, wird ein Popup mit zusätzlichen Informationen über den Cluster angezeigt.

Nächste Schritte

Erfahren Sie mehr zu den in diesem Artikel verwendeten Klassen und Methoden:

Sehen Sie sich Codebeispiele an, die zeigen, wie Sie Ihrer App Funktionen hinzufügen: