Mengklusterkan titik data di Web SDK

Artikel
06/27/2023

Ketika ada banyak titik data di peta, beberapa mungkin saling tumpang tindih. Tumpang tindih membuat peta menjadi sulit dibaca dan digunakan. Pengklusteran poin data adalah proses menggabungkan poin data yang saling berdekatan dan mewakilinya di peta sebagai poin data terkluster tunggal. Saat pengguna memperbesar tampilan ke dalam peta, kluster pecah menjadi poin data masing-masing. Saat Anda bekerja dengan sejumlah besar titik data, proses pengklusteran dapat meningkatkan pengalaman pengguna.

Mengaktifkan pengklusteran di sumber data

Aktifkan pengklusteran di kelas DataSource dengan mengatur opsi cluster ke true. Atur clusterRadius untuk memilih titik terdekat dan menggabungkannya ke dalam kluster. Nilai clusterRadius adalah dalam piksel. Gunakan clusterMaxZoom untuk menentukan tingkat pembesaran untuk menonaktifkan logika pengklusteran. Berikut adalah contoh cara mengaktifkan pengklusteran di sumber data.

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

Jika dua poin data saling berdekatan di peta, kluster kemungkinan tidak akan pernah pecah, tidak peduli seberapa dekat pengguna memperbesar ke dalam peta. Untuk mengatasinya, Anda dapat mengatur opsi clusterMaxZoom untuk menonaktifkan logika pengklusteran dan hanya menampilkan semuanya.

Kelas DataSource juga menyediakan metode berikut yang terkait dengan pengklusteran.

Metode	Tipe hasil	Deskripsi
getClusterChildren(clusterId: number)	Menjanjikan<Geometri<Fitur<Array, Bentuk> apa pun>>	Mengambil elemen anak dari kluster yang diberikan pada tingkat pembesaran tampilan berikutnya. Elemen anak ini dapat berupa kombinasi bentuk dan sub-kluster. Subkluster adalah fitur dengan properti yang cocok dengan ClusteredProperties.
getClusterExpansionZoom(clusterId: number)	Menjanjikan <nomor>	Menghitung tingkat pembesaran tampilan di mana kluster mulai diperluas atau dipisahkan.
getClusterLeaves(clusterId: number, limit: number, offset: number)	Menjanjikan<Geometri<Fitur<Array, Bentuk> apa pun>>	Mengambil titik dalam kluster. Secara default 10 titik pertama dikembalikan. Untuk menelusuri titik, gunakan `limit` untuk menentukan jumlah titik yang akan dikembalikan, dan `offset` untuk menelusuri indeks titik. Untuk mengembalikan semua titik, atur `limit` ke `Infinity` dan jangan atur `offset`.

Menampilkan kluster menggunakan lapisan gelembung

Lapisan gelembung adalah cara yang baik untuk merender titik-titik terkluster. Gunakan ekspresi untuk menskalakan radius dan mengubah warna berdasarkan jumlah titik dalam kluster. Jika menampilkan kluster menggunakan lapisan gelembung, Anda harus menggunakan lapisan terpisah untuk merender poin data yang tidak terkluster.

Untuk menampilkan ukuran kluster di atas gelembung, gunakan layer simbol dengan teks, dan jangan gunakan ikon.

Untuk sampel kerja lengkap tentang cara mengimplementasikan tampilan kluster menggunakan lapisan gelembung, lihat Kluster Titik di Lapisan Gelembung di sampel Azure Maps. Untuk kode sumber untuk sampel ini, lihat Kluster Titik dalam kode sumber Lapisan Gelembung.

Cuplikan layar memperlihatkan peta yang menampilkan kluster menggunakan lapisan gelembung.

Menampilkan kluster menggunakan lapisan simbol

Saat memvisualisasikan poin data, lapisan simbol secara otomatis menyembunyikan simbol yang saling tumpang tindih untuk memastikan antarmuka pengguna yang terlihat lebih jelas. Perilaku default ini mungkin tidak diinginkan jika Anda ingin menampilkan kepadatan poin data di peta. Namun, pengaturan ini dapat diubah. Untuk menampilkan semua simbol, atur opsi allowOverlap dari properti Lapisan simbol iconOptions ke true.

Gunakan pengklusteran untuk menunjukkan kepadatan poin data sekaligus menjaga agar antarmuka pengguna terlihat jelas. Contoh berikut menunjukkan kepada Anda cara menambahkan simbol kustom dan mewakili kluster dan titik data individual menggunakan lapisan simbol.

Untuk sampel kerja lengkap tentang cara mengimplementasikan tampilan kluster menggunakan lapisan simbol, lihat Menampilkan kluster dengan Lapisan Simbol di Sampel Azure Maps. Untuk kode sumber untuk sampel ini, lihat Menampilkan kluster dengan kode sumber Lapisan Simbol.

Cuplikan layar memperlihatkan peta yang menampilkan kluster dengan lapisan simbol.

Pengklusteran dan lapisan peta panas

Peta panas adalah cara yang baik untuk menampilkan kepadatan data di peta. Metode visualisasi ini dapat menangani sejumlah besar poin data dengan sendirinya. Jika poin data terkluster dan ukuran kluster digunakan sebagai bobot peta panas, maka peta panas dapat menangani lebih banyak data. Untuk mencapai opsi ini, atur opsi weight dari lapisan peta panas ke ['get', 'point_count']. Ketika radius kluster kecil, peta panas terlihat hampir identik dengan peta panas menggunakan titik data yang tidak terkluster, tetapi berkinerja lebih baik. Namun, semakin kecil radius kluster, semakin akurat peta panasnya, tetapi dengan lebih sedikit manfaat performa.

Untuk sampel kerja lengkap yang menunjukkan cara membuat peta panas yang menggunakan pengklusteran pada sumber data, lihat Peta Panas tertimbang kluster di sampel Azure Maps. Untuk kode sumber untuk sampel ini, lihat Kode sumber Peta Panas tertimbang kluster.

Cuplikan layar memperlihatkan peta panas yang menggunakan pengklusteran pada sumber data.

Peristiwa tetikus pada poin data terkluster

Ketika peristiwa tetikus terjadi pada lapisan yang mengandung poin data terkluster, poin data terkluster tersebut akan mengembalikan peristiwa sebagai objek fitur titik GeoJSON. Fitur titik ini memiliki properti berikut:

Nama properti	Jenis	Deskripsi
`cluster`	boolean	Menunjukkan apakah fitur mewakili kluster.
`cluster_id`	string	ID unik untuk kluster yang dapat digunakan dengan `getClusterExpansionZoom` DataSource, metode `getClusterChildren`, dan `getClusterLeaves`.
`point_count`	nomor	Jumlah titik yang dikandung kluster.
`point_count_abbreviated`	string	String yang menyingkat nilai `point_count` jika panjang. (misalnya, 4.000 menjadi 4K)

Contoh Point Clusters in Bubble Layer mengambil lapisan gelembung yang merender titik kluster dan menambahkan peristiwa klik. Saat peristiwa klik dipicu, kode akan menghitung dan memperbesar peta ke tingkat pembesaran tambilan berikutnya, dan kluster akan pecah. Fungsionalitas ini diimplementasikan menggunakan metode getClusterExpansionZoom dari kelas DataSource dan properti cluster_id dari poin data terkluster yang diklik.

Cuplikan kode berikut menunjukkan kode dalam contoh Kluster Titik di Lapisan Gelembung yang menambahkan fungsionalitas peristiwa klik ke titik data terkluster:

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

Cuplikan layar memperlihatkan peta yang menampilkan kluster menggunakan lapisan gelembung.

Menampilkan area kluster

Poin data yang diwakili oleh sebuah kluster tersebar di suatu area. Dalam sampel ini, ketika mouse diarahkan ke kluster, dua peristiwa utama akan terjadi. Pertama, titik data individual yang terkandung dalam kluster digunakan untuk menghitung lambung cembung. Kemudian, lambung cembung ditampilkan di peta untuk menunjukkan area. Convex hull adalah poligon yang membungkus sekumpulan titik seperti pita elastis dan dapat dihitung menggunakan metode atlas.math.getConvexHull. Semua poin data yang dikandung kluster dapat diambil dari sumber data menggunakan metode getClusterLeaves.

Untuk sampel kerja lengkap yang menunjukkan cara melakukan ini, lihat Menampilkan area kluster dengan Convex Hull di Sampel Azure Maps. Untuk kode sumber untuk sampel ini, lihat Menampilkan area kluster dengan kode sumber Convex Hull.

Cuplikan layar memperlihatkan peta yang menampilkan area kluster yang diwakili oleh pin drop yang menunjukkan Convex Hull menandai area kluster saat dipilih.

Menggabungkan data dalam kluster

Kluster sering kali diwakili menggunakan simbol dengan jumlah titik yang berada di dalam kluster. Tapi, terkadang diinginkan untuk menyesuaikan gaya kluster dengan lebih banyak metrik. Dengan agregat klaster, properti kustom dapat dibuat dan diisi menggunakan penghitungan ekspresi agregat. Agregat klaster dapat ditentukan dalam opsi clusterProperties dari DataSource.

Sampel agregat Kluster menggunakan ekspresi agregat. Kode membuat penghitungan berdasarkan properti tipe entitas dari setiap poin data dalam sebuah kluster. Saat pengguna memilih kluster, popup ditampilkan dengan informasi tambahan tentang kluster. Untuk kode sumber untuk sampel ini, lihat Kode sumber agregat kluster.

Cuplikan layar memperlihatkan peta yang menggunakan pengklusteran yang ditentukan menggunakan perhitungan ekspresi gaya berbasis data. Perhitungan ini mengagregasi nilai di semua titik yang terkandung dalam kluster.