概述

本文主要介绍矢量图层的基类BaseVectorLayer类，在设置矢量图层时，通过选项传递的属性会成为图层对象的属性，并且这些属性会变得可观察，允许获取和设置其值。

源码剖析

BaseVectorLayer类继承自Layer类，其实现如下：

class BaseVectorLayer extends Layer {
  constructor(options) {
    options = options ? options : {};

    const baseOptions = Object.assign({}, options);

    delete baseOptions.style;
    delete baseOptions.renderBuffer;
    delete baseOptions.updateWhileAnimating;
    delete baseOptions.updateWhileInteracting;
    super(baseOptions);

    this.declutter_ = options.declutter ? String(options.declutter) : undefined;
    this.renderBuffer_ =
      options.renderBuffer !== undefined ? options.renderBuffer : 100;
    this.style_ = null;
    this.styleFunction_ = undefined;

    this.setStyle(options.style);
    this.updateWhileAnimating_ =
      options.updateWhileAnimating !== undefined
        ? options.updateWhileAnimating
        : false;

    this.updateWhileInteracting_ =
      options.updateWhileInteracting !== undefined
        ? options.updateWhileInteracting
        : false;
  }
  getDecluttter() {
    return this.declutter_;
  }
  getFetaures(pixel) {
    return super.getFeatures(pixel);
  }
  getRenderBuffer() {
    return this.renderBuffer_;
  }
  getRenderOrder() {
    return this.get(Property.RENDER_ORDER);
  }
  getStyle() {
    return this.style_;
  }
  getStyleFunction() {
    return this.styleFunction_;
  }
  getUpdateWhileAnimating() {
    return this.updateWhileAnimating_;
  }
  getUpdateWhileInteracting() {
    return this.updateWhileInteracting_;
  }
  renderDeclutter(frameState, layerState) {
    const declutterGroup = this.getDeclutter();
    if (declutterGroup in frameState.declutter === false) {
      frameState.declutter[declutterGroup] = new RBush(9);
    }
    this.getRenderer().renderDeclutter(frameState, layerState);
  }
  setRenderOrder() {
    this.set(Property.RENDER_ORDER, renderOrder);
  }
  setStyle(style) {
    this.style_ = style === undefined ? createDefaultStyle : style;
    const styleLike = toStyleLike(style);
    this.styleFunction_ =
      style === null ? undefined : toStyleFunction(styleLike);
    this.changed();
  }
}

BaseVector类的构造函数

BaseVector类的构造函数接受一个参数对象options,然后赋值给变量baseOptions并将其传给父类Layer类，后面就是进行一些变量的初始化，调用了this.setStyle方法

• setStyle方法

setStyle方法实现如下：

  setStyle(style) {
    this.style_ = style === undefined ? createDefaultStyle : style;
    const styleLike = toStyleLike(style);
    this.styleFunction_ =
      style === null ? undefined : toStyleFunction(styleLike);
    this.changed();
  }

setStyle方法主要用于设置feature的样式，其参数可以是一个styleLike类型，即style Object、数组[style Object]或者一个函数（返回值是一个style Object或者数组形式的[style Object]）。 若参数style是undefined,则会将createDefaultStyle函数赋值给this.style_。

• createDefaultStyle方法：它实际上就是一个style Function，接受两个参数要素feature和当前视图的分辨率resolution,其实现如下：

export function createDefaultStyle(feature, resolution) {
  if (!defaultStyles) {
    const fill = new Fill({
      color: "rgba(255,255,255,0.4)",
    });
    const stroke = new Stroke({
      color: "#3399CC",
      width: 1.25,
    });
    defaultStyles = [
      new Style({
        image: new CircleStyle({
          fill: fill,
          stroke: stroke,
          radius: 5,
        }),
        fill: fill,
        stroke: stroke,
      }),
    ];
  }
  return defaultStyles;
}

createDefaultStyle方法就是返回一个[style Object]，Style类实例对象构成的数组；在一个矢量图层上添加一个feature，默认样式就是这个。

setStyle方法然后会调用toStyleLike(style)方法获取styleLike,toStyleLike方法就是将一系列不同形式的样式转为style Functions或者样式对象;若styleLike为null，则将this.styleFunction_赋值为undefined，否则调用toStyleFunction(styleLike)转为style Function

最后调用this.changed()方法

BaseVector类的其它主要函数

• getDeclutter方法：获取this.declutter_
• getFeatures方法：获取父类的getFeatures方法
• getRenderBuffer方法：获取this.renderBuffer，默认为100
• getRenderOrder方法：就是调用this.get('render_order')
• getStyle方法：获取this.style_
• getStylefunction方法：获取this.styleFunction_
• getUpdateWhileAnimating方法:获取this.updateWhileAnimating_
• getUpdateWhileInteracting方法:获取this.updateWhileInteracting_
• setRenderOrder方法：接受一个参数renderOrder,然后调用this.set('render_order',renderOrder)
• renderDeclutter方法

  renderDeclutter(frameState, layerState) {
    const declutterGroup = this.getDeclutter();
    if (declutterGroup in frameState.declutter === false) {
      frameState.declutter[declutterGroup] = new RBush(9);
    }
    this.getRenderer().renderDeclutter(frameState, layerState);
  }

renderDeclutter方法就是渲染图层的declutter，接受两个参数帧状态frameState和图层状态layerState，然后调用this.getDeclutter()获取this.declutter_。如果它不在frameState.declutter中，则赋值frameState.declutter[declutterGroup] = new RBush(9),最后调用渲染器的renderDeclutter方法。

RBush是一个高性能的二维空间索引，用于处理点和矩形。它基于优化的R-tree 数据结构，并支持批量插入。

new RBush(9)就是创建了一个新的 RBush 实例，并指定树的最大分支数为 9

• RBush(9)：创建一个新的RBush 空间索引，并且每个树节点的最大子节点数为 9。换句话说，每个树节点最多可以包含 9 个空间对象（如点或矩形）。当节点中超过 9 个对象时，它会进行分裂，创建新的节点。

• 分支数（Branching factor）：在 R-tree 等空间索引中，分支因子指的是树中每个节点可以包含的最大子节点或对象的数量。这个值的设置会影响到空间索引的性能。分支数较大的情况下，树的深度较小，查询时会更快，但插入可能会较慢。较小的分支数则会增加树的深度，可能会使得插入操作更快，但查询可能会稍慢。

总结

本文介绍了BaseVector类的具体实现，以及后面提到 Openlayers 的依赖库RBush,后面会重点介绍。