leaflet.layergroup.collision
Version:
Leaflet plugin for uncluttering L.Markers using basic collision detection.
73 lines (56 loc) • 1.79 kB
HTML
<title>RBush Tree Visualization</title>
<canvas id="canvas" width="701" height="701"></canvas>
<br>
<button id="insert1">Insert 50000</button>
<button id="insert2">Insert 1000</button>
<button id="insert3">Bulk-insert 50000</button>
<button id="insert4">Bulk-insert 1000</button>
<button id="remove">Remove leftmost 10000</button>
<script src="../rbush.js"></script>
<script src="viz.js"></script>
<script>
var N = 100000,
M = 30,
R = 100;
function genData(N, M, R) {
var data = [];
for (var i = 0; i < M; i++) {
var cluster = randClusterPoint(R);
for (var j = 0; j < N / M; j++) {
data.push(randClusterBox(cluster, R, 1));
}
}
return data;
}
var tree = rbush(16);
var data = [];
genBulkInsert(N, M)();
function genInsertOneByOne(K, M) {
return function () {
var data2 = genData(K, M, R);
console.time('insert ' + K + ' items');
for (var i = 0; i < K; i++) {
tree.insert(data2[i]);
}
console.timeEnd('insert ' + K + ' items');
draw();
};
}
function genBulkInsert(K, M) {
return function () {
var data2 = genData(K, M, R);
console.time('bulk-insert ' + K + ' items');
tree.load(data2);
console.timeEnd('bulk-insert ' + K + ' items');
data = data.concat(data2);
draw();
};
}
document.getElementById('insert1').onclick = genInsertOneByOne(50000, M);
document.getElementById('insert2').onclick = genInsertOneByOne(1000, 1);
document.getElementById('insert3').onclick = genBulkInsert(50000, M);
document.getElementById('insert4').onclick = genBulkInsert(1000, 1);
document.getElementById('canvas').onclick = search;
document.getElementById('remove').onclick = remove;
</script>