Web SDK'sında kümeleme noktası verileri

Haritada birçok veri noktası olduğunda, bazıları birbiriyle örtüşebilir. Çakışma, haritanın okunamaz hale gelmesine ve kullanılmasının zor olmasına neden olabilir. Kümeleme noktası verileri, birbirine yakın nokta verilerini birleştirme ve bunları haritada tek bir kümelenmiş veri noktası olarak temsil etme işlemidir. Kullanıcı haritayı yakınlaştırdıkça, kümeler kendi veri noktalarına ayrılır. Çok sayıda veri noktasıyla çalıştığınızda, kümeleme işlemleri kullanıcı deneyimini geliştirebilir.

Veri kaynağında kümele oluşturmayı etkinleştirme

seçeneğini olarak ayarlayarak sınıfta kümelemeye DataSource trueolanak tanıyıncluster. Yakındaki noktaları seçmek için ayarlayın clusterRadius ve bunları bir kümede birleştirir. değeri clusterRadius piksel cinsindendir. Kümeleme mantığını devre dışı bırakılacak yakınlaştırma düzeyini belirtmek için kullanın clusterMaxZoom . Veri kaynağında kümelemeyi etkinleştirmeye ilişkin bir örnek aşağıda verilmiştır.

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

sınıfı, DataSource kümelemeyle ilgili aşağıdaki yöntemleri de sağlar.

Kabarcık katmanı kullanarak kümeleri görüntüleme

Kabarcık katmanı, kümelenmiş noktaları işlemek için harika bir yoldur. Yarıçapı ölçeklendirmek ve kümedeki nokta sayısına göre rengi değiştirmek için ifadeleri kullanın. Kümeleri kabarcık katmanı kullanarak görüntülüyorsanız, kümelenmemiş veri noktalarını işlemek için ayrı bir katman kullanmanız gerekir.

Kabarcığın üzerinde kümenin boyutunu görüntülemek için, metin içeren bir simge katmanı kullanın ve simge kullanmayın.

Kabarcık katmanı kullanarak görüntüleme kümelerini uygulama hakkında eksiksiz bir çalışma örneği için Azure Haritalar Örnekleri'ndeki Kabarcık Katmanındaki Nokta Kümeleri bölümüne bakın. Bu örneğin kaynak kodu için bkz . Kabarcık Katmanı kaynak kodunda Nokta Kümeleri.

Sembol katmanı kullanarak kümeleri görüntüleme

Veri noktalarını görselleştirirken, sembol katmanı daha temiz bir kullanıcı arabirimi sağlamak için birbiriyle çakışan simgeleri otomatik olarak gizler. Veri noktası yoğunluğunun haritada gösterilmesini istiyorsanız bu varsayılan davranış istenmeyen bir davranış olabilir. Ancak, bu ayarlar değiştirilebilir. Tüm simgeleri görüntülemek için Sembol katmanları iconOptions özelliğinin seçeneğini olarak trueayarlayınallowOverlap.

Temiz bir kullanıcı arabirimi tutarken veri noktalarının yoğunluğunun gösterilmesi için kümeleme kullanın. Aşağıdaki örnekte, özel simgeler ekleme ve sembol katmanını kullanarak kümeleri ve tek tek veri noktalarını temsil etme işlemleri gösterilmektedir.

Görüntüleme kümelerini sembol katmanı kullanarak uygulama hakkında eksiksiz bir çalışma örneği için bkz. Azure Haritalar Örnekleri'nde Kümeleri Sembol Katmanı ile görüntüleme. Bu örneğin kaynak kodu için bkz . Sembol Katmanı kaynak koduyla kümeleri görüntüleme.

Kümeleme ve ısı haritaları katmanı

Isı haritaları, verilerin yoğunluğunun haritada görüntülenmesi için harika bir yoldur. Bu görselleştirme yöntemi çok sayıda veri noktası tek başına işleyebilir. Veri noktaları kümelenmişse ve küme boyutu ısı haritasının ağırlığı olarak kullanılıyorsa, ısı haritası daha da fazla veri işleyebilir. Bu seçeneği elde etmek için ısı haritası katmanı seçeneğini olarak ['get', 'point_count']ayarlayınweight. Küme yarıçapı küçük olduğunda, ısı haritası, kümelenmemiş veri noktalarını kullanan bir ısı haritasıyla neredeyse aynı görünür, ancak daha iyi performans gösterir. Bununla birlikte, küme yarıçapı ne kadar küçük olursa, ısı haritası o kadar doğru olur, ancak daha az performans avantajı sunar.

Veri kaynağında kümeleme kullanan bir ısı haritası oluşturmayı gösteren eksiksiz bir çalışma örneği için Azure Haritalar Örnekleri'ndeki Küme ağırlıklı Isı Haritası'na bakın. Bu örneğin kaynak kodu için bkz . Küme ağırlıklı Isı Haritası kaynak kodu.

Kümelenmiş veri noktalarındaki fare olayları

Kümelenmiş veri noktaları içeren bir katmanda fare olayları gerçekleştiğinde, kümelenmiş veri noktası olaya GeoJSON noktası özellik nesnesi olarak döner. Bu nokta özelliği aşağıdaki özelliklere sahiptir:

Kabarcık Katmanındaki Nokta Kümeleri örneği, küme noktalarını işleyen ve tıklama olayı ekleyen bir kabarcık katmanı alır. Tıklama olayı tetiklendiğinde kod haritayı hesaplar ve kümenin parçalandığı bir sonraki yakınlaştırma düzeyine yakınlaştırır. Bu işlevsellik, sınıfın getClusterExpansionZoom DataSource yöntemi ve cluster_id tıklanan kümelenmiş veri noktasının özelliği kullanılarak uygulanır.

Aşağıdaki kod parçacığı, Kabarcık Katmanındaki Nokta Kümeleri örneğinde kümelenmiş veri noktalarına tıklama olayı işlevselliğini ekleyen kodu gösterir:

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

Küme alanını görüntüleme

Kümenin temsil ettiği nokta verileri bir alana yayılır. Bu örnekte fare bir kümenin üzerine getirildiğinde iki ana davranış oluşur. İlk olarak, kümede yer alan tek tek veri noktaları dışbükey gövdeyi hesaplamak için kullanılır. Ardından dışbükey gövde haritada bir alanı göstermek için görüntülenir. Dışbükey gövde, elastik bant gibi bir nokta kümesini sarmalayan ve yöntemi kullanılarak hesaplanabilen atlas.math.getConvexHull bir çokgendir. Bir kümede yer alan tüm noktalar yöntemi kullanılarak getClusterLeaves veri kaynağından alınabilir.

Bunun nasıl yapıldığını gösteren eksiksiz bir çalışma örneği için bkz. Azure Haritalar Örnekleri'nde Küme alanını Dışbükey Gövde ile görüntüleme. Bu örneğin kaynak kodu için bkz . Küme alanını Dışbükey Gövde kaynak koduyla görüntüleme.

Kümelerdeki verileri toplama

Genellikle kümeler, küme içindeki nokta sayısına sahip bir simge kullanılarak temsil edilir. Ancak, bazen daha fazla ölçümle küme stilini özelleştirmek tercih edilir. Küme toplamaları ile, özel özellikler bir toplama ifadesi hesaplaması kullanılarak oluşturulabilir ve doldurulabilir. Küme toplamaları seçeneğinde clusterProperties DataSourcetanımlanabilir.

Küme toplama örneği bir toplama ifadesi kullanır. Kod, bir kümedeki her veri noktasının varlık türü özelliğine göre bir sayım hesaplar. Kullanıcı bir küme seçtiğinde, küme hakkında ek bilgiler içeren bir açılır pencere gösterilir. Bu örneğin kaynak kodu için bkz . Küme kaynak kodunu toplar.

Sonraki adımlar

Bu makalede kullanılan sınıflar ve yöntemler hakkında daha fazla bilgi edinin:

Uygulamanıza işlevsellik eklemek için kod örneklerine bakın: