openlayers中使用rBush(R树）来存放要素等信息，本文修改了一点其中的rbush源码中的demo，使用canvas画出了insert和delete操作（建立树和删除树中数据）

修改后的源代码下载链接：https://download.csdn.net/download/Handsome2013/12033762

其中r树源码：https://github.com/mourner/rbush这个就是ol中用到的rbush源码。

这边只是修改了点example.

1.下载了源码目录如下：（我是使用webStrom打开的）

2.主要修改了viz.js和viz-uniform.html两个文件。

viz-uniform.html：

<!doctype 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 1</button>
<button id="delete">Delete 1</button>
<button id="insert3">Bulk-insert 50000</button>
<button id="insert4">Bulk-insert 1000</button>
<button id="remove">Remove leftmost 10000</button><script src="../index.js"></script>
<script src="viz.js"></script>
<script>var N = 0;function genData(N) {var data = [];for (var i = 0; i < N; i++) {data[i] = randBox(1);}return data;}var tree = new RBush(6);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);console.log('data' + data);draw();};}function deleteOne(K) {//随机选择一个return function () {var index = Math.floor(data.length * Math.random())var randomNode = data[index];tree.remove(randomNode)data.splice(index, 1)draw();}}document.getElementById('insert1').onclick = genInsertOneByOne(50000);document.getElementById('insert2').onclick = genInsertOneByOne(1);document.getElementById('delete').onclick = deleteOne();document.getElementById('insert3').onclick = genBulkInsert(50000);document.getElementById('insert4').onclick = genBulkInsert(1000);document.getElementById('canvas').onclick = search;document.getElementById('remove').onclick = remove;</script>

viz.js:

var W = 650,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,y = Math.random() * W;return {minX: x,minY: y,maxX: x + 10,maxY: y + 10};
}function randClusterPoint(dist) {var x = dist + Math.random() * (W - dist * 2),y = dist + Math.random() * (W - dist * 2);return {x: x, y: y};
}function randClusterBox(cluster, dist, size) {var x = cluster.x - dist + 2 * dist * (Math.random() + Math.random() + Math.random()) / 3,y = cluster.y - dist + 2 * dist * (Math.random() + Math.random() + Math.random()) / 3;return {minX: x,minY: y,maxX: x + size * Math.random(),maxY: y + size * Math.random(),item: true};
}var  rects=[];function drawTree(node, level) {if (!node) {return;}var rect = [];var color;if (level == 0) {color = 'red'} else if (level == 1) {color = 'blue'} else if (level == 2) {color = 'orange'} else if (level == 3) {color = 'black'} else if (level = 4) {color = 'green'} else if (level == 5) {color = 'purple'} else if (level = 6) {color = 'pink'} else {color = 'yellow'}rect.push(color);rect.push(1);rect.push([Math.round(node.minX),Math.round(node.minY),Math.round(node.maxX - node.minX),Math.round(node.maxY - node.minY),]);rects.push(rect);if (node.children.length > 1) {for (var ii = 0; ii < node.children.length; ii++) {var rect2 = [];rect2.push('black');rect2.push(1);rect2.push([Math.round(node.children[ii].minX),Math.round(node.children[ii].minY),Math.round(node.children[ii].maxX - node.children[ii].minX),Math.round(node.children[ii].maxY - node.children[ii].minY)])rects.push(rect2);}}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 + 11, W + 11);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({minX: e.clientX,minY: e.clientY,maxX: e.clientX + 1,maxY: 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();
};

3.展示到网页如下：