概述

本文主要介绍 Openlayer 中渲染器的基类LayerRenderer类。在 Openlayers 中无论图层用canvas还是WebGL渲染，它们都是基于LayerRenderer类实现的。

源码剖析

LayerRenderer类是继承于Observable类，关于Observable类可以参考Observable 类 (opens new window)

LayerRenderer类的实现如下：

class LayerRenderer extends Observable {
  constructor(layer) {
    super();
    this.ready = true;
    this.boundHandleImageChange_ = this.handleImageChange_.bind(this);
    this.layer_ = layer;
    this.staleKeys_ = new Array();
    this.maxStaleKeys = maxStaleKeys;
  }
  getStaleKeys() {
    return this.staleLeys_;
  }
  prependStaleKey(key) {
    this.staleKeys_.unshift(key);
    if (this.staleKeys_.length > this.maxStaleKeys) {
      this.staleKeys_.length = this.maxStaleKeys;
    }
  }
  getFeatures(pixel) {
    return abstract();
  }
  getData(pixel) {
    return abstract();
  }
  prepareFrame(frameState) {
    return abstract();
  }
  renderFrame(frameState, target) {
    return abstract();
  }
  forEachFeatureAtCoordinate(
    coordinate,
    frameState,
    hitTolerance,
    callback,
    matches
  ) {
    return undefined;
  }
  getLayer() {
    return this.layer_;
  }
  handleFontsChanged() {}
  handleImageChange_(event) {
    const image = event.target;
    if (
      image.getState() === ImageState.LOADED ||
      image.getState() === ImageState.ERROR
    ) {
      this.renderIfReadyAndVisible();
    }
  }
  loadImage(image) {
    let imageState = image.getState();
    if (imageState != ImageState.LOADED && imageState != ImageState.ERROR) {
      image.addEventListener(EventType.CHANGE, this.boundHandleImageChange_);
    }
    if (imageState == ImageState.IDLE) {
      image.load();
      imageState = image.getState();
    }
    return imageState == ImageState.LOADED;
  }
  renderIfReadyAndVisible() {
    const layer = this.getLayer();
    if (layer && layer.getVisible() && layer.getSourceState() === "ready") {
      layer.changed();
    }
  }
  renderDeferred(frameState) {}
  disposeInternal() {
    delete this.layer;
    super.disposeInternal();
  }
}

由上可知，LayerRenderer类中定义了很多方法，但是有几个都没有具体实现，它们都是在子类中实现的，现在只需要知道它们的含义即可。

LayerRenderer类的构造函数

LayerRenderer类在构造函数中定义了了几个变量：

• this.ready：表示渲染器对象已经初始化完成，准备进行渲染；
• this.boundHandleImageChange_:绑定方法this.handleImageChange_的this指向，使其始终指向渲染器对象本身
• this.layer_:内部变量，存储参数layer图层
• this.staleKeys_:存储过旧的key数组
• this.maxStaleKeys:stale数组的最大长度，初始值为5

LayerRenderer类的方法

• getStaleKeys方法：获取stale的keys
• prependStaleKey方法：在stale数组的头部插入一个新的key，然后判断stale数组的长度是否超过this.maxStaleKeys，若超过，则更新其长度，该操作会直接移除stale数组尾部的元素
• getFeatures方法：未实现，获取图层中的features
• getData方法：未实现，获取数据
• prepareFrame方法：未实现，决定render方法是否应该被调用
• renderFrame：未实现，渲染图层的核心所在
• forEachFeatureAtCoordinate方法：未实现，获取该点坐标处的所有features
• getLayer方法：获取this.layer_
• handleFontsChanged方法：未实现，处理字体fonts更新变化的事件
• handleImageChange_方法：该方法用于处理图像变化的事件，接受一个参数event,然后获取event.target的状态，判断其状态是否为loaded或error，若是，则调用this.renderIfReadyAndVisible方法
• loadImage方法：加载图像的方法。接受一个参数image图像并获取其状态；如果图像没有加载并且也没有出现错误，则注册图像的change事件，回调函数为this.boundHandleImageChange_；如果图像状态为idle，则调用图像的load方法，重新获取图像的状态；最后返回一个布尔值，若为true，则表示图像已经加载完；反之为未载完。
• renderIfReadyAndVisible方法：获取图层，并判断图层以及图层的可见性还有图层源的状态是否为ready，若满足条件，则调用图层的changed方法
• renderDeferred方法：未实现，延迟渲染
• disposeInternal方法：清除操作

总结

本文主要介绍了LayerRenderer类图层渲染器的几个主要方法，未实现的方法需要结合LayerRenderer类的子类去研究。