leaflet.layergroup.collision
Version:
Leaflet plugin for uncluttering L.Markers using basic collision detection.
104 lines (83 loc) • 2.49 kB
JavaScript
var W = 700,
canvas = document.getElementById('canvas'),
ctx = canvas.getContext('2d');
if (window.devicePixelRatio > 1) {
canvas.style.width = canvas.width + 'px';
canvas.style.height = canvas.height + 'px';
canvas.width = canvas.width * 2;
canvas.height = canvas.height * 2;
ctx.scale(2, 2);
}
function randBox(size) {
var x = Math.random() * (W - size),
y = Math.random() * (W - size);
return [
x, y,
x + size * Math.random(),
y + size * Math.random()
];
}
function randPoint() {
var x = Math.random() * W,
y = Math.random() * W;
return [x, y];
}
function randClusterPoint(dist) {
var x = dist + Math.random() * (W - dist * 2),
y = dist + Math.random() * (W - dist * 2);
return [x, y];
}
function randClusterBox(cluster, dist, size) {
var x = cluster[0] - dist + 2 * dist * (Math.random() + Math.random() + Math.random()) / 3,
y = cluster[1] - dist + 2 * dist * (Math.random() + Math.random() + Math.random()) / 3;
return [
x, y,
x + size * Math.random(),
y + size * Math.random()
];
}
var colors = ['#f40', '#0b0', '#37f'],
rects;
function drawTree(node, level) {
if (!node) { return; }
var rect = [];
rect.push(level ? colors[(node.height - 1) % colors.length] : 'grey');
rect.push(level ? 1 / Math.pow(level, 1.2) : 0.2);
rect.push([
Math.round(node.bbox[0]),
Math.round(node.bbox[1]),
Math.round(node.bbox[2] - node.bbox[0]),
Math.round(node.bbox[3] - node.bbox[1])
]);
rects.push(rect);
if (node.leaf) return;
if (level === 6) { return; }
for (var i = 0; i < node.children.length; i++) {
drawTree(node.children[i], level + 1);
}
}
function draw() {
rects = [];
drawTree(tree.data, 0);
ctx.clearRect(0, 0, W + 1, W + 1);
for (var i = rects.length - 1; i >= 0; i--) {
ctx.strokeStyle = rects[i][0];
ctx.globalAlpha = rects[i][1];
ctx.strokeRect.apply(ctx, rects[i][2]);
}
}
function search(e) {
console.time('1 pixel search');
tree.search([e.clientX, e.clientY, e.clientX + 1, e.clientY + 1]);
console.timeEnd('1 pixel search');
}
function remove() {
data.sort(tree.compareMinX);
console.time('remove 10000');
for (var i = 0; i < 10000; i++) {
tree.remove(data[i]);
}
console.timeEnd('remove 10000');
data.splice(0, 10000);
draw();
};