Cesium聚簇實現-kdbush類實現

上一篇講了kdbush實現原理，本篇看下kdbush源碼，瞭解其算法具體實現。

kdbush是一個開源js庫，github地址：https://github.com/mourner/kdbush/

開發者除了開發了該庫，還開發了另外幾個空間搜索庫，包括rbush，rbush-knn，geokdbush，相關的原理說明請參考：http://www.sohu.com/a/137533865_642762
若感興趣的同學可自行查看。

kdbush js庫整體說明

構造函數
function kdbush(points, getX, getY, nodeSize, ArrayType)
參數說明
points：所有要參加搜索的點集合
getX,getY:獲取每個點的X和Y座標函數引用
nodeSize:點個數
ArrayType:點座標數據類型
公共函數
function range(minX, minY, maxX, maxY)
獲取矩形框範圍內所有點
參數：用矩形的最大最小xy值唯一確定一個矩形
function within(qx, qy, r)
獲取圓形範圍內所有點
qx，qy：圓心xy座標
r:半徑

初始化排序函數

function KDBush(points, getX, getY, nodeSize, ArrayType) {
    getX = getX || defaultGetX;
    getY = getY || defaultGetY;
    ArrayType = ArrayType || Array;

    this.nodeSize = nodeSize || 64;
    this.points = points;

    this.ids = new ArrayType(points.length);
    this.coords = new ArrayType(points.length * 2);

    for (var i = 0; i < points.length; i++) {
        this.ids[i] = i;
        this.coords[2 * i] = getX(points[i]);
        this.coords[2 * i + 1] = getY(points[i]);
    }

    sort(this.ids, this.coords, this.nodeSize, 0, this.ids.length - 1, 0);
}

首先將points點座標全部放到coords數組中，用ids數組記錄索引，然後用sort函數實現排序。
sort函數是一個遞歸函數，功能是將點座標按照之前提到的kdbush方法重新排序，方便快速查找。

function sort(ids, coords, nodeSize, left, right, depth) {
    if (right - left <= nodeSize) return;

    var m = Math.floor((left + right) / 2);

    select(ids, coords, m, left, right, depth % 2);

    sort(ids, coords, nodeSize, left, m - 1, depth + 1);
    sort(ids, coords, nodeSize, m + 1, right, depth + 1);
}

  閱讀這些經典算法的源代碼，始終有一種如沐春風的感覺，函數優美地分離，程序清晰簡潔，能看懂一眼就明白，看不懂地也一眼讓你看出來，避免帶你入坑太久，虐的你體無完膚再放你出來，好在如今一切看起來都是那麼地自然清新。
  這裏沒什麼好解釋，代碼自解釋：找到中間索引點，調用一個select函數進行一番重排序操作，然後遞歸調用sort函數分別處理中間索引左側和右側序列，並且有一個參數depth標識它遞歸到哪一層，所以主要邏輯在函數select中。

function select(ids, coords, k, left, right, inc) {

    while (right > left) {
        if (right - left > 600) {
            var n = right - left + 1;
            var m = k - left + 1;
            var z = Math.log(n);
            var s = 0.5 * Math.exp(2 * z / 3);
            var sd = 0.5 * Math.sqrt(z * s * (n - s) / n) * (m - n / 2 < 0 ? -1 : 1);
            var newLeft = Math.max(left, Math.floor(k - m * s / n + sd));
            var newRight = Math.min(right, Math.floor(k + (n - m) * s / n + sd));
            select(ids, coords, k, newLeft, newRight, inc);
        }

        var t = coords[2 * k + inc];
        var i = left;
        var j = right;

        swapItem(ids, coords, left, k);
        if (coords[2 * right + inc] > t) swapItem(ids, coords, left, right);

        while (i < j) {
            swapItem(ids, coords, i, j);
            i++;
            j--;
            while (coords[2 * i + inc] < t) i++;
            while (coords[2 * j + inc] > t) j--;
        }

        if (coords[2 * left + inc] === t) swapItem(ids, coords, left, j);
        else {
            j++;
            swapItem(ids, coords, j, right);
        }

        if (j <= k) left = j + 1;
        if (k <= j) right = j - 1;
    }
}

  以上代碼很好地展現了優秀代碼的風格，比如在一開始進入循環的部分，有一段當right-left大於600的代碼段，裏面有很多數學公式，很明顯這段代碼本人看不懂，感謝作者在這裏將其很好地與主程序隔離，讓讀者即使不去理會這一段也不影響整個程序的理解。
  接下來的程序就是通過不斷交換數組元素達到生成符合要求的數組的目標，其中swapItem是交換函數，該函數交換了指定索引的點座標和點索引，而每次調用select得到的新數列符合要求：在left和right中間索引點的x或者y座標滿足：其左邊的所有點x或者y左邊都小於等於該點對應座標，其右邊所有點的x或者y左邊都大於等於該點對應座標，至於用x還是用y來作爲比較依據，那取決於當前的層級，也就是最後一個參數inc，層級爲偶數爲x，層級爲奇數爲y，層級從0開始。
整個算法總體思想：
將數列的中間點取出，放到數列的指定位置，使其滿足在這個位置左邊的所有值都小於等於該點值，右邊的所有值都大於等於該點值，然後根據新位置和中間點關係來縮小查詢範圍，直到找到的新位置正好是中間位置爲止。
如下圖所示舉例說明：

查詢函數

矩形框範圍查詢

矩形框查詢函數爲range：

function range(ids, coords, minX, minY, maxX, maxY, nodeSize) {
    var stack = [0, ids.length - 1, 0];
    var result = [];
    var x, y;

    while (stack.length) {
        var axis = stack.pop();
        var right = stack.pop();
        var left = stack.pop();

        if (right - left <= nodeSize) {
            for (var i = left; i <= right; i++) {
                x = coords[2 * i];
                y = coords[2 * i + 1];
                if (x >= minX && x <= maxX && y >= minY && y <= maxY) result.push(ids[i]);
            }
            continue;
        }

        var m = Math.floor((left + right) / 2);

        x = coords[2 * m];
        y = coords[2 * m + 1];

        if (x >= minX && x <= maxX && y >= minY && y <= maxY) result.push(ids[m]);

        var nextAxis = (axis + 1) % 2;

        if (axis === 0 ? minX <= x : minY <= y) {
            stack.push(left);
            stack.push(m - 1);
            stack.push(nextAxis);
        }
        if (axis === 0 ? maxX >= x : maxY >= y) {
            stack.push(m + 1);
            stack.push(right);
            stack.push(nextAxis);
        }
    }

    return result;
}

代碼相當簡潔，其中判斷條件即爲：
if (x >= minX && x <= maxX && y >= minY && y <= maxY) result.push(ids[m]);
當前點的x座標和y座標值都分別在minx、maxx和miny、maxy之間。

前半部分是普通依次對比的算法，不用太在意，在cesium中調用nodeSize值爲64，也就是一個點最多又64個子節點，在這64個點中搜索就採用依次搜索：

 if (right - left <= nodeSize) {
            for (var i = left; i <= right; i++) {
                x = coords[2 * i];
                y = coords[2 * i + 1];
                if (x >= minX && x <= maxX && y >= minY && y <= maxY) result.push(ids[i]);
            }
            continue;
        }

而後半部分是類似二分法查找，由於數據都在前面的排序算法中構成了樹，所以這裏只需要對比中間點，判斷中間點對應的x或者y（具體是x還是y要看當前循環到哪一層，單數層是x，雙數層是y）是大於minx或者miny還是小於maxx或者maxy，如果是前者，則將中間點的左側點都加入下一輪比較，如果是後者，則將中間點的右側點都加入下一輪比較，如果兩者都滿足，說明當前中間點本身就在查找範圍內，這時候並不能確定其左側點或者右側點都不在查找範圍，所以將本輪中間點的左右兩側點都加入下一輪比較。

圓形範圍查詢

圓形範圍查詢和矩形範圍查詢基本一致，方法爲within：

function within(ids, coords, qx, qy, r, nodeSize) {
    var stack = [0, ids.length - 1, 0];
    var result = [];
    var r2 = r * r;

    while (stack.length) {
        var axis = stack.pop();
        var right = stack.pop();
        var left = stack.pop();

        if (right - left <= nodeSize) {
            for (var i = left; i <= right; i++) {
                if (sqDist(coords[2 * i], coords[2 * i + 1], qx, qy) <= r2) result.push(ids[i]);
            }
            continue;
        }

        var m = Math.floor((left + right) / 2);

        var x = coords[2 * m];
        var y = coords[2 * m + 1];

        if (sqDist(x, y, qx, qy) <= r2) result.push(ids[m]);

        var nextAxis = (axis + 1) % 2;

        if (axis === 0 ? qx - r <= x : qy - r <= y) {
            stack.push(left);
            stack.push(m - 1);
            stack.push(nextAxis);
        }
        if (axis === 0 ? qx + r >= x : qy + r >= y) {
            stack.push(m + 1);
            stack.push(right);
            stack.push(nextAxis);
        }
    }

    return result;
}

只是判斷條件不同：
if (sqDist(coords[2 * i], coords[2 * i + 1], qx, qy) <= r2) result.push(ids[i]);
這裏sqDist爲勾股定理距離：

function sqDist(ax, ay, bx, by) {
    var dx = ax - bx;
    var dy = ay - by;
    return dx * dx + dy * dy;
}