揭开四叉树的奥秘——在 JavaScript 中的构建与应用

2023-09-05 22:27:49

四叉树的本质是一种树形数据结构，将空间划分为多个矩形区域，每个区域由一个节点表示。当节点包含的数据超过一定数量时，它将被进一步细分为四个子节点，依此类推。

四叉树的优势在于其高效的查询和更新性能。由于空间被划分为多个矩形区域，因此可以在对空间进行查询时快速缩小搜索范围，提高查询效率。同时，由于四叉树可以动态调整节点的划分，因此可以在对空间进行更新时高效地保持数据的组织结构。

在 JavaScript 中实现四叉树相对简单。我们可以使用对象来表示四叉树的节点，并将空间划分为四个子节点。以下是一个简单的 JavaScript 四叉树实现示例：

class QuadTree {
  constructor(boundary, capacity) {
    this.boundary = boundary;
    this.capacity = capacity;
    this.points = [];
    this.divided = false;
  }

  insert(point) {
    if (!this.boundary.contains(point)) {
      return false;
    }

    if (this.points.length < this.capacity) {
      this.points.push(point);
      return true;
    }

    if (!this.divided) {
      this.divide();
    }

    return this.nw.insert(point) || this.ne.insert(point) || this.sw.insert(point) || this.se.insert(point);
  }

  divide() {
    const halfWidth = this.boundary.width / 2;
    const halfHeight = this.boundary.height / 2;

    const x = this.boundary.x + halfWidth;
    const y = this.boundary.y + halfHeight;

    this.nw = new QuadTree(new Boundary(this.boundary.x, this.boundary.y, halfWidth, halfHeight), this.capacity);
    this.ne = new QuadTree(new Boundary(x, this.boundary.y, halfWidth, halfHeight), this.capacity);
    this.sw = new QuadTree(new Boundary(this.boundary.x, y, halfWidth, halfHeight), this.capacity);
    this.se = new QuadTree(new Boundary(x, y, halfWidth, halfHeight), this.capacity);

    this.divided = true;
  }

  query(range) {
    const foundPoints = [];

    if (!this.boundary.intersects(range)) {
      return foundPoints;
    }

    for (const point of this.points) {
      if (range.contains(point)) {
        foundPoints.push(point);
      }
    }

    if (this.divided) {
      foundPoints.push(...this.nw.query(range));
      foundPoints.push(...this.ne.query(range));
      foundPoints.push(...this.sw.query(range));
      foundPoints.push(...this.se.query(range));
    }

    return foundPoints;
  }
}

class Boundary {
  constructor(x, y, width, height) {
    this.x = x;
    this.y = y;
    this.width = width;
    this.height = height;
  }

  contains(point) {
    return point.x >= this.x && point.x < this.x + this.width && point.y >= this.y && point.y < this.y + this.height;
  }

  intersects(range) {
    return this.x < range.x + range.width && this.x + this.width > range.x && this.y < range.y + range.height && this.y + this.height > range.y;
  }
}