Dane punktów klastrowania w zestawie Web SDK

Artykuł
08/29/2024

Jeśli na mapie znajduje się wiele punktów danych, niektóre mogą się nakładać na siebie nawzajem. Nakładanie się może spowodować, że mapa może stać się nieczytelna i trudna do użycia. Dane punktu klastrowania to proces łączenia danych punktów, które znajdują się blisko siebie i przedstawiania ich na mapie jako pojedynczego klastrowanego punktu danych. Gdy użytkownik powiększa mapę, klastry dzielą się na poszczególne punkty danych. Podczas pracy z dużą liczbą punktów danych procesy klastrowania mogą poprawić środowisko użytkownika.

Włączanie klastrowania w źródle danych

Włącz klastrowanie w DataSource klasie, ustawiając cluster opcję na true. Ustaw clusterRadius pozycję , aby wybrać punkty w pobliżu i połączyć je w klaster. Wartość jest wyrażona clusterRadius w pikselach. Użyj clusterMaxZoom polecenia , aby określić poziom powiększenia, na którym ma być wyłączona logika klastrowania. Oto przykład włączania klastrowania w źródle danych.

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

Napiwek

Jeśli dwa punkty danych są blisko siebie na ziemi, możliwe, że klaster nigdy się nie rozbije, niezależnie od tego, jak blisko użytkownika powiększa się. Aby rozwiązać ten problem, możesz ustawić clusterMaxZoom opcję wyłączenia logiki klastrowania i po prostu wyświetlić wszystko.

Klasa DataSource udostępnia również następujące metody związane z klastrowaniem.

Metoda	Typ zwracany	opis
getClusterChildren(clusterId: number)	Geometria funkcji tablicy<obietnicy<, dowolna> \|< Kształt>>	Pobiera elementy podrzędne danego klastra na następnym poziomie powiększenia. Te elementy podrzędne mogą być kombinacją kształtów i podciągów. Subclusters to funkcje z właściwościami zgodnymi z właściwościami ClusteredProperties.
getClusterExpansionZoom(clusterId: number)	Numer obietnicy<>	Oblicza poziom powiększenia, na którym klaster zaczyna się rozszerzać lub rozbijać.
getClusterLeaves(clusterId: number, limit: number, offset: number)	Geometria funkcji tablicy<obietnicy<, dowolna> \|< Kształt>>	Pobiera punkty w klastrze. Domyślnie zwracane są pierwsze 10 punktów. Aby przestronicować punkty, użyj polecenia `limit` , aby określić liczbę punktów do zwrócenia i `offset` przejść przez indeks punktów. Aby zwrócić wszystkie punkty, ustaw wartość `limit` `Infinity` i nie ustaw wartości `offset`.

Wyświetlanie klastrów przy użyciu warstwy bąbelkowej

Warstwa bąbelkowa to doskonały sposób renderowania punktów klastrowanych. Użyj wyrażeń, aby skalować promień i zmieniać kolor na podstawie liczby punktów w klastrze. Jeśli klastry są wyświetlane przy użyciu warstwy bąbelkowej, należy użyć oddzielnej warstwy do renderowania nieklastrowanych punktów danych.

Aby wyświetlić rozmiar klastra w górnej części bąbelka, użyj warstwy symboli z tekstem i nie używaj ikony.

Aby zapoznać się z kompletnym roboczym przykładem implementowania wyświetlania klastrów przy użyciu warstwy bąbelkowej, zobacz Point Clusters in Bubble Layer (Klastry punktów w warstwie bąbelkowej w przykładach usługi Azure Maps). Aby uzyskać kod źródłowy dla tego przykładu, zobacz Point Clusters in Bubble Layer source code (Klastry punktów w kodzie źródłowym warstwy bąbelkowej).

Wyświetlanie klastrów przy użyciu warstwy symboli

Podczas wizualizacji punktów danych warstwa symboli automatycznie ukrywa symbole nakładające się na siebie w celu zapewnienia czytelnego interfejsu użytkownika. To domyślne zachowanie może być niepożądane, jeśli chcesz pokazać gęstość punktów danych na mapie. Można jednak zmienić te ustawienia. Aby wyświetlić wszystkie symbole, ustaw allowOverlap opcję właściwości Warstwy iconOptions symboli na truewartość .

Użyj klastrowania, aby pokazać gęstość punktów danych przy zachowaniu czystego interfejsu użytkownika. W poniższym przykładzie pokazano, jak dodać niestandardowe symbole i reprezentować klastry i poszczególne punkty danych przy użyciu warstwy symboli.

Aby zapoznać się z kompletnym roboczym przykładem implementacji wyświetlania klastrów przy użyciu warstwy symboli, zobacz Wyświetlanie klastrów z warstwą symboli w przykładach usługi Azure Maps. Aby uzyskać kod źródłowy dla tego przykładu, zobacz Wyświetlanie klastrów z kodem źródłowym warstwy symboli.

Klastrowanie i warstwa map cieplnych

Mapy cieplne to doskonały sposób wyświetlania gęstości danych na mapie. Ta metoda wizualizacji może obsługiwać dużą liczbę punktów danych samodzielnie. Jeśli punkty danych są klastrowane, a rozmiar klastra jest używany jako waga mapy cieplnej, mapa cieplna może obsłużyć jeszcze więcej danych. Aby osiągnąć tę opcję, ustaw weight opcję warstwy mapy cieplnej na ['get', 'point_count']wartość . Gdy promień klastra jest mały, mapa cieplna wygląda niemal identycznie z mapą cieplną przy użyciu nieklastrowanych punktów danych, ale działa lepiej. Jednak mniejszy promień klastra, tym dokładniejszy jest mapa cieplna, ale z mniejszymi korzyściami z wydajności.

Pełny przykład roboczy, który pokazuje, jak utworzyć mapę cieplną korzystającą z klastrowania w źródle danych, zobacz Mapowanie cieplne ważone klastra w przykładach usługi Azure Maps. Aby zapoznać się z kodem źródłowym dla tego przykładu, zobacz Kod źródłowy mapy cieplnej z wagami klastra.

Zdarzenia myszy w punktach danych klastrowanych

Gdy zdarzenia myszy występują w warstwie zawierającej klastrowane punkty danych, punkt danych klastrowanych powróci do zdarzenia jako obiekt funkcji punktu GeoJSON. Ta funkcja punktu ma następujące właściwości:

Nazwa właściwości	Typ	Opis
`cluster`	boolean	Wskazuje, czy funkcja reprezentuje klaster.
`cluster_id`	string	Unikatowy identyfikator klastra, który może być używany z metodami DataSource `getClusterExpansionZoom`, `getClusterChildren`i `getClusterLeaves` .
`point_count`	Liczba	Liczba punktów, które zawiera klaster.
`point_count_abbreviated`	string	Ciąg, który skraca wartość, `point_count` jeśli jest długa. (na przykład 4000 staje się 4K)

Przykład klastrów punktów w warstwie bąbelkowej przyjmuje warstwę bąbelkową, która renderuje punkty klastra i dodaje zdarzenie kliknięcia. Po wyzwoleniu zdarzenia kliknięcia kod oblicza i powiększa mapę do następnego poziomu powiększenia, na którym klaster się rozpada. Ta funkcja jest implementowana przy użyciu getClusterExpansionZoom metody DataSource klasy i cluster_id właściwości klikniętego punktu danych klastrowanego.

Poniższy fragment kodu przedstawia kod w klastrach punktów w warstwie bąbelkowej, który dodaje funkcję zdarzenia kliknięcia do punktów danych klastrowanych:

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

Wyświetlanie obszaru klastra

Dane punktów reprezentowane przez klaster są rozłożone na obszar. W tym przykładzie po umieszczeniu wskaźnika myszy nad klastrem występują dwa główne zachowania. Najpierw poszczególne punkty danych zawarte w klastrze są używane do obliczania wypukłego kadłuba. Następnie kadłub wypukły jest wyświetlany na mapie, aby wyświetlić obszar. Kadłub wypukły jest wielokątem, który owija zestaw punktów, takich jak elastyczne pasmo, i można go obliczyć przy użyciu atlas.math.getConvexHull metody . Wszystkie punkty zawarte w klastrze można pobrać ze źródła danych przy użyciu getClusterLeaves metody .

Aby zapoznać się z kompletnym przykładem roboczym, który pokazuje, jak to zrobić, zobacz Wyświetlanie obszaru klastra z platformą Convex Hull w przykładach usługi Azure Maps. Aby uzyskać kod źródłowy dla tego przykładu, zobacz Wyświetlanie obszaru klastra za pomocą kodu źródłowego Convex Hull.

Agregowanie danych w klastrach

Często klastry są reprezentowane przy użyciu symbolu z liczbą punktów znajdujących się w klastrze. Jednak czasami pożądane jest dostosowanie stylu klastrów przy użyciu większej liczby metryk. Za pomocą agregacji klastra można tworzyć i wypełniać właściwości niestandardowe przy użyciu obliczenia wyrażenia agregowanego. Agregacje klastra można zdefiniować w clusterProperties opcji DataSource.

Przykład Cluster aggregates używa wyrażenia agregowanego. Kod oblicza liczbę na podstawie właściwości typu jednostki każdego punktu danych w klastrze. Gdy użytkownik wybierze klaster, zostanie wyświetlone okno podręczne z dodatkowymi informacjami o klastrze. Aby uzyskać kod źródłowy dla tego przykładu, zobacz Cluster aggregates source code (Kod źródłowy agregacji klastra).