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ıfında kümelemeye DataSourcetrueolanak 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ümelemeye 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
});
İpucu
İki veri noktası yerde birbirine yakınsa, kullanıcı ne kadar yakın olursa olsun küme asla ayrılmaz. Bunu gidermek için kümeleme mantığını devre dışı bırakma seçeneğini ayarlayabilir clusterMaxZoom ve her şeyi görüntüleyebilirsiniz.
sınıfı, DataSource kümelemeyle ilgili aşağıdaki yöntemleri de sağlar.
| Yöntem | Dönüş türü | Description |
|---|---|---|
| getClusterChildren(clusterId: number) | Promise<Dizisi<Özellik<Geometrisi, herhangi bir> | Şekil>> | Bir sonraki yakınlaştırma düzeyinde verilen kümenin alt öğelerini alır. Bu çocuklar şekillerin ve alt kümelerin bir birleşimi olabilir. Alt kümeler, ClusteredProperties ile eşleşen özelliklere sahiptir. |
| getClusterExpansionZoom(clusterId: number) | Promise<numarası> | Kümenin genişlemeye veya ayrılmaya başladığı yakınlaştırma düzeyini hesaplar. |
| getClusterLeaves(clusterId: number, limit: number, offset: number) | Promise<Dizisi<Özellik<Geometrisi, herhangi bir> | Şekil>> | Kümedeki noktaları alır. Varsayılan olarak ilk 10 nokta döndürülür. Noktalarda sayfalandırmak için, döndürülecek nokta sayısını belirtmek ve offset nokta dizininde adım adım gezinmek için kullanınlimit. Tüm noktaları döndürmek Infinity için olarak ayarlayın limit ve ayarlamayınoffset. |
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 küme görüntülemenin nasıl gerçekleştirildiğini gösteren 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 örtüşen 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 simgelerin nasıl ekleneceği ve sembol katmanını kullanarak kümelerin ve tek tek veri noktalarının nasıl temsilleneceği gösterilmektedir.
Sembol katmanı kullanarak küme görüntülemenin nasıl uygulandığına ilişkin eksiksiz bir çalışma örneği için bkz. Azure Haritalar Örnekleri'ndeSembol Katmanı ile kümeleri 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ını kendi başına işleyebilir. Veri noktaları kümelenmişse ve ısı haritasının ağırlığı olarak küme boyutu 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. Ancak, 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'ndekiKü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:
| Özellik adı | Tür | Description |
|---|---|---|
cluster |
boolean | Özelliğin bir kümeyi temsil ediyor olup olmadığını gösterir. |
cluster_id |
string | DataSource getClusterExpansionZoom, getClusterChildrenve getClusterLeaves yöntemleriyle kullanılabilen küme için benzersiz bir kimlik. |
point_count |
sayı | Kümenin içerdiği nokta sayısı. |
point_count_abbreviated |
string | Uzunsa değeri kısaltan point_count bir dize. (örneğin, 4.000 4K olur) |
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 getClusterExpansionZoomDataSource 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 saran ve yöntemi kullanılarak hesaplanabilen atlas.math.getConvexHull çokgendir. Bir kümede bulunan tüm noktalar, yöntemi kullanılarak getClusterLeaves veri kaynağından alınabilir.
Bunun nasıl yapılacağını gösteren eksiksiz bir çalışma örneği için Azure Haritalar Örnekleri'nde Küme alanını Dışbükey Gövde ile görüntüleme bölümüne bakın. 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
Kümeler genellikle küme içindeki nokta sayısına sahip bir simge kullanılarak temsil edilir. Ancak bazen kümelerin stilini daha fazla ölçümle özelleştirmek tercih edilir. Küme toplamaları ile, toplama ifadesi hesaplaması kullanılarak özel özellikler oluşturulabilir ve doldurulabilir. Küme toplamaları seçeneğinde clusterPropertiesDataSourcetanı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ıyı 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: