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

最新推荐文章于 2024-07-17 14:56:05 发布

bigFace2019

最新推荐文章于 2024-07-17 14:56:05 发布

阅读量772

点赞数

分类专栏： openlayers

本文链接：https://blog.csdn.net/Handsome2013/article/details/103550314

版权

openlayers 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

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