Data bodu clusteringu ve webové sadě SDK

Článek
08/29/2024

Pokud je na mapě mnoho datových bodů, některé se můžou navzájem překrývat. Překrytí může způsobit, že mapa může být nečitelná a obtížně použitelná. Data bodu clusteringu jsou proces kombinování dat bodů, která jsou blízko sebe a představují je na mapě jako jeden skupinový datový bod. Když se uživatel přiblíží k mapě, clustery se rozdělí do jednotlivých datových bodů. Při práci s velkým počtem datových bodů můžou procesy clusteringu zlepšit uživatelské prostředí.

Povolení clusteringu ve zdroji dat

Povolte clustering ve DataSource třídě nastavením cluster možnosti truena . Nastavte clusterRadius výběr blízkých bodů a zkombinujte je do clusteru. Hodnota clusterRadius je v pixelech. Slouží clusterMaxZoom k určení úrovně přiblížení, na které chcete zakázat logiku clusteringu. Tady je příklad povolení clusteringu ve zdroji dat.

//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

Pokud jsou dva datové body na zemi blízko, je možné, že se cluster nikdy nerozčlení, bez ohledu na to, jak blízko se uživatel přibližuje. Pokud to chcete vyřešit, můžete nastavit clusterMaxZoom možnost zakázat logiku clusteringu a jednoduše zobrazit vše.

Třída DataSource poskytuje také následující metody související s clusteringem.

Metoda	Návratový typ	Popis
getClusterChildren(clusterId: number)	Promise<Array<Feature<Geometry, any> \| Tvar>>	Načte podřízené položky daného clusteru na další úrovni přiblížení. Tyto podřízené položky mohou být kombinací obrazců a podkluzů. Podclustery jsou funkce s vlastnostmi odpovídajícími clusteredProperties.
getClusterExpansionZoom(clusterId: number)	Číslo příslibu<>	Vypočítá úroveň přiblížení, na které se cluster začne rozbalovat nebo rozdělovat.
getClusterLeaves(clusterId: number, limit: number, offset: number)	Promise<Array<Feature<Geometry, any> \| Tvar>>	Načte body v clusteru. Ve výchozím nastavení se vrátí prvních 10 bodů. Pokud chcete procházet body, použijte `limit` k určení počtu bodů, které se mají vrátit, a `offset` k procházení indexu bodů. Pokud chcete vrátit všechny body, nastavte `limit` `Infinity` a nenastavujte `offset`.

Zobrazení clusterů pomocí bublinové vrstvy

Bublinová vrstva představuje skvělý způsob, jak vykreslit skupinové body. Pomocí výrazů můžete škálovat poloměr a změnit barvu na základě počtu bodů v clusteru. Pokud zobrazíte clustery pomocí vrstvy bublin, měli byste k vykreslení neclusterovaných datových bodů použít samostatnou vrstvu.

Pokud chcete zobrazit velikost clusteru nad bublinou, použijte vrstvu symbolů s textem a nepoužívejte ikonu.

Kompletní funkční ukázka implementace zobrazení clusterů pomocí bublinové vrstvy najdete v tématu Point Clusters in Bubble Layer v ukázkách Azure Maps. Zdrojový kód pro tuto ukázku najdete v části Bodové clustery ve zdrojovém kódu bublinové vrstvy.

Zobrazení clusterů pomocí vrstvy symbolů

Při vizualizaci datových bodů vrstva symbolů automaticky skryje symboly, které se vzájemně překrývají, aby se zajistilo čistější uživatelské rozhraní. Toto výchozí chování může být nežádoucí, pokud chcete zobrazit hustotu datových bodů na mapě. Tato nastavení ale můžete změnit. Chcete-li zobrazit všechny symboly, nastavte allowOverlap možnost vrstvy iconOptions symbolu vlastnost true.

Pomocí clusteringu můžete zobrazit hustotu datových bodů a zachovat čisté uživatelské rozhraní. Následující ukázka ukazuje, jak přidat vlastní symboly a znázorňovat clustery a jednotlivé datové body pomocí vrstvy symbolů.

Kompletní funkční ukázka implementace zobrazení clusterů pomocí vrstvy symbolů najdete v tématu Zobrazení clusterů s vrstvou symbolů v ukázkách Azure Maps. Zdrojový kód pro tuto ukázku najdete v tématu Zobrazení clusterů se zdrojovým kódem vrstvy symbolů.

Shlukování a vrstva heatch map

Heat mapy představují skvělý způsob, jak zobrazit hustotu dat na mapě. Tato metoda vizualizace dokáže zpracovat velký počet datových bodů samostatně. Pokud jsou datové body seskupené a velikost clusteru se použije jako váha heat mapy, může heat mapa zpracovat ještě více dat. Pokud chcete tuto možnost dosáhnout, nastavte weight možnost vrstvy heat mapy na ['get', 'point_count']hodnotu . Pokud je poloměr clusteru malý, heat mapa vypadá téměř stejně jako heat mapa pomocí neclusterovaných datových bodů, ale funguje lépe. Čím menší je však poloměr clusteru, tím přesnější je heat mapa, ale s menším počtem výhod výkonu.

Kompletní funkční ukázka, která ukazuje, jak vytvořit heat mapu, která používá clustering ve zdroji dat, najdete v části Ukázky Služby Azure Maps vážená heat mapa clusteru. Zdrojový kód pro tuto ukázku najdete ve zdrojovém kódu heat mapy vážené v clusteru.

Události myši na clusterovaných datových bodech

Pokud dojde k událostem myši ve vrstvě obsahující clusterované datové body, clusterovaný datový bod se vrátí k události jako objekt funkce bodu GeoJSON. Tato funkce bodu má následující vlastnosti:

Název vlastnosti	Type	Popis
`cluster`	boolean	Označuje, jestli funkce představuje cluster.
`cluster_id`	string	Jedinečné ID clusteru, které lze použít s DataSource `getClusterExpansionZoom`, `getClusterChildren`a `getClusterLeaves` metody.
`point_count`	Číslo	Počet bodů, které cluster obsahuje.
`point_count_abbreviated`	string	Řetězec, který zkracuje `point_count` hodnotu, pokud je dlouhá. (například 4 000 se změní na 4K)

Příklad bodových shluků ve vrstvě bublin používá vrstvu bublin, která vykreslí body clusteru a přidá událost kliknutí. Když se událost kliknutí aktivuje, kód vypočítá a přiblíží mapu na další úroveň přiblížení, při které se cluster rozdělí. Tato funkce se implementuje pomocí getClusterExpansionZoom metody DataSource třídy a cluster_id vlastnosti klikaného clusterového datového bodu.

Následující fragment kódu ukazuje kód v příkladu Bodové clustery v bublinové vrstvě , který přidá funkci události kliknutí do clusterovaných datových bodů:

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

Oblast zobrazení clusteru

Data bodu, která cluster představuje, jsou rozložena do oblasti. V této ukázce při najetí myší na cluster dojde ke dvěma hlavnímu chování. Nejprve se jednotlivé datové body obsažené v clusteru používají k výpočtu konvexní trupu. Pak se na mapě zobrazí konvexní trupu, aby se zobrazila oblast. Konvexní trupu je mnohoúhelník, který zabalí sadu bodů jako elastický pás a dá se vypočítat pomocí atlas.math.getConvexHull metody. Všechny body obsažené v clusteru je možné načíst ze zdroje dat pomocí getClusterLeaves metody.

Kompletní funkční ukázku, která ukazuje, jak to udělat, najdete v tématu Zobrazení oblasti clusteru s konvexní trupu v ukázkách Azure Maps. Zdrojový kód pro tuto ukázku naleznete v části Zobrazení oblasti clusteru se zdrojovým kódem Convex Hull.

Agregace dat v clusterech

Clustery jsou často reprezentovány pomocí symbolu s počtem bodů, které jsou v clusteru. Někdy je ale žádoucí přizpůsobit styl clusterů s více metrikami. Pomocí agregací clusteru je možné vytvořit a naplnit vlastní vlastnosti pomocí výpočtu agregačního výrazu. Agregace clusteru lze definovat v clusterProperties možnosti DataSource.

Ukázka agregace clusteru používá agregační výraz. Kód vypočítá počet na základě vlastnosti typu entity každého datového bodu v clusteru. Když uživatel vybere cluster, zobrazí se automaticky otevírané okno s dalšími informacemi o clusteru. Zdrojový kód pro tuto ukázku najdete v části Cluster agreguje zdrojový kód.