leaflet.layergroup.collision
Version:
Leaflet plugin for uncluttering L.Markers using basic collision detection.
69 lines (52 loc) • 1.64 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 = 50000;
function genData(N) {
var data = [];
for (var i = 0; i < N; i++) {
data[i] = randBox(1);
}
return data;
}
var tree = rbush(10);
var data = [];
genBulkInsert(N)();
function genInsertOneByOne(K) {
return function () {
var data2 = genData(K);
console.time('insert ' + K + ' items');
for (var i = 0; i < K; i++) {
tree.insert(data2[i]);
}
console.timeEnd('insert ' + K + ' items');
data = data.concat(data2);
draw();
};
}
function genBulkInsert(K) {
return function () {
var data2 = genData(K);
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);
document.getElementById('insert2').onclick = genInsertOneByOne(1000);
document.getElementById('insert3').onclick = genBulkInsert(50000);
document.getElementById('insert4').onclick = genBulkInsert(1000);
document.getElementById('canvas').onclick = search;
document.getElementById('remove').onclick = remove;
</script>