Fürtözési pont adatai a Webes SDK-ban

Ha sok adatpont található a térképen, előfordulhat, hogy egyes pontok átfedésben vannak egymással. Az átfedés miatt a térkép olvashatatlanná és nehezen használhatóvá válhat. A fürtözési pont adatai az egymáshoz közeli pontadatok kombinálásának és a térképen egyetlen fürtözött adatpontként való ábrázolásának folyamata. Ahogy a felhasználó nagyítja a térképet, a fürtök szétesnek az egyes adatpontjaikra. Ha sok adatponttal dolgozik, a fürtözési folyamatok javíthatják a felhasználói élményt.

Fürtözés engedélyezése adatforráson

Engedélyezze a fürtözést az DataSource osztályban a cluster beállítás beállításával true. Válassza clusterRadius ki a közeli pontokat, és egyesítse őket egy fürtben. Az érték clusterRadius képpontban van. Egy clusterMaxZoom nagyítási szint megadásával letilthatja a fürtözési logikát. Íme egy példa arra, hogyan engedélyezheti a fürtözést egy adatforrásban.

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

Az DataSource osztály a fürtözéssel kapcsolatos alábbi módszereket is tartalmazza.

Fürtök megjelenítése buborékréteggel

A buborékréteg nagyszerű módja a fürtözött pontok megjelenítésének. Kifejezések használatával skálázhatja a sugarat, és módosíthatja a színt a fürt pontjainak száma alapján. Ha buborékréteggel jeleníti meg a fürtöket, akkor egy külön réteget kell használnia a nem rendezett adatpontok megjelenítéséhez.

Ha a fürt méretét szeretné megjeleníteni a buborék tetején, használjon egy szimbólumréteget szöveggel, és ne használjon ikont.

A fürtök buborékréteggel történő implementálásának teljes munkamintáját az Azure Maps-minták buborékrétegében található pontfürtök című témakörben találhatja meg. A minta forráskódját lásd : Pontfürtök a Buborékréteg forráskódjában.

Fürtök megjelenítése szimbólumréteg használatával

Az adatpontok vizualizációjakor a szimbólumréteg automatikusan elrejti az egymást átfedő szimbólumokat a tisztább felhasználói felület biztosítása érdekében. Ez az alapértelmezett viselkedés nemkívánatos lehet, ha meg szeretné jeleníteni az adatpontok sűrűségét a térképen. Ezek a beállítások azonban módosíthatók. Az összes szimbólum megjelenítéséhez állítsa a allowOverlap Szimbólumrétegek iconOptions tulajdonság beállítását a következőre true: .

A fürtözés használatával megjelenítheti az adatpontok sűrűségét, miközben tiszta felhasználói felületet biztosít. Az alábbi minta bemutatja, hogyan adhat hozzá egyéni szimbólumokat, és hogyan jelenítheti meg a fürtöket és az egyes adatpontokat a szimbólumréteg használatával.

A fürtök szimbólumréteggel való megjelenítésének implementálásáról az Azure Maps-mintákban található szimbólumréteggel rendelkező fürtök megjelenítése című témakörben talál teljes munkamintát. A minta forráskódját a Szimbólumréteg forráskóddal rendelkező fürtök megjelenítése című témakörben talál.

A fürtözés és a hőtérképek rétege

A hőtérképek nagyszerű módot biztosítanak az adatok sűrűségének megjelenítésére a térképen. Ez a vizualizációs módszer önmagában nagy számú adatpontot képes kezelni. Ha az adatpontok fürtözve vannak, és a fürt méretét használják a hőtérkép súlyaként, akkor a hőtérkép még több adatot képes kezelni. A beállítás eléréséhez állítsa a weight hőtérkép rétegének beállítását a következőre ['get', 'point_count']: . Ha a fürt sugara kicsi, a hőtérkép szinte teljesen megegyezik egy hőtérképpel a nem rendezett adatpontok használatával, de jobban teljesít. Minél kisebb a fürt sugara, annál pontosabb a hőtérkép, de kevesebb teljesítménybeli előnnyel jár.

Az adatforráson fürtözést használó hőtérkép létrehozását bemutató teljes munkamintát az Azure Maps-minták fürt súlyozott hőtérképe című témakörben talál. A minta forráskódját lásd a fürt súlyozott hőtérképének forráskódját.

Egéresemények fürtözött adatpontokon

Ha az egéresemények fürtözött adatpontokat tartalmazó rétegen történnek, a fürtözött adatpont GeoJSON-pont funkcióobjektumként tér vissza az eseményhez. Ez a pont funkció a következő tulajdonságokkal rendelkezik:

A Buborékréteg példa pontfürtjei egy buborékréteget használnak, amely megjeleníti a fürtpontokat, és hozzáad egy kattintásos eseményt. Amikor a kattintási esemény aktiválódik, a kód kiszámítja és nagyítja a térképet a következő nagyítási szintre, amelyen a fürt szétesik. Ez a funkció az getClusterExpansionZoom osztály metódusával DataSource és a cluster_id kattintott fürtözött adatpont tulajdonságával valósul meg.

Az alábbi kódrészlet a Buborékréteg példa pontfürtjeiben található kódot mutatja be, amely hozzáadja a kattintási esemény funkciót a fürtözött adatpontokhoz:

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

Fürtterület megjelenítése

A fürt által képviselt pontadatok egy területen oszlanak el. Ebben a mintában, amikor az egér egy fürtre mutat, két fő viselkedés fordul elő. Először is a fürtben található egyes adatpontok egy domború hajótest kiszámítására szolgálnak. Ezután a domború hajótest megjelenik a térképen egy terület megjelenítéséhez. A domború hajótest olyan sokszög, amely egy rugalmas sávhoz hasonló pontok halmazát burkolja, és a atlas.math.getConvexHull módszerrel kiszámítható. A fürtben található összes pont lekérhető az adatforrásból a getClusterLeaves módszerrel.

A teljes munkamintát, amely bemutatja, hogyan teheti ezt meg, tekintse meg a fürtterület megjelenítése a Convex Hulltal az Azure Maps-mintákban című témakört. A minta forráskódját lásd : Fürtterület megjelenítése Convex Hull-forráskóddal.

Adatok összesítése fürtökben

A fürtök gyakran szimbólummal jelennek meg a fürtön belüli pontok számával. Néha azonban célszerű több metrikával testre szabni a fürtök stílusát. A fürtösszesítésekkel egyéni tulajdonságok hozhatók létre és tölthetők fel összesítőkifejezés-számítással. A fürtösszesítések a clusterProperties DataSource.

A fürtösszesítési minta egy összesítő kifejezést használ. A kód a fürt egyes adatpontjai entitástípus-tulajdonsága alapján számítja ki a darabszámot. Amikor egy felhasználó kiválaszt egy fürtöt, megjelenik egy előugró ablak, amely további információkat tartalmaz a fürtről. A minta forráskódját a Fürt a forráskód összesítése című témakörben tekinti meg.

Következő lépések

További információ a cikkben használt osztályokról és módszerekről:

A funkciók alkalmazáshoz való hozzáadásához tekintse meg a kód példákat: