OpenLayers 3实践与原理探究4.4-ol3源码分析-render

前面几节的内容介绍了Map,View,Source,Layer,这些其实我们都是要么在对象属性中设置 ，要么是通过方法设置，实质上是通过共享的全局变量设置地图包含的图层，地图的显示效果，但是如果真正上绘制在浏览器上，需要渲染在canvas(ol3常用的渲染方式).

由于源码代码量比较大，这里只是从大部分介绍流程。
网上有人(OpenLayers 3源码那些事)总结一张图的不错，这里拿来用一下

0.从map.js开始

• 1) render/renderSync
  具体流程用注释的形式标出

//renderSync是异步的，同样道理
ol.Map.prototype.render = function() {
  if (this.animationDelayKey_ === undefined) {
    this.animationDelayKey_ = ol.global.requestAnimationFrame(
        this.animationDelay_);
  }
};

• 2) animationDelay_

this.animationDelay_ = function() {
    this.animationDelayKey_ = undefined;
    this.renderFrame_.call(this, Date.now());
  }.bind(this);

• 3) renderFrame_

ol.Map.prototype.renderFrame_ = function(time) {

  var i, ii, viewState;

  var size = this.getSize();
  var view = this.getView();
  var extent = ol.extent.createEmpty();
  /** @type {?olx.FrameState} */
  var frameState = null;
  if (size !== undefined && ol.size.hasArea(size) && view && view.isDef()) {
    var viewHints = view.getHints(this.frameState_ ? this.frameState_.viewHints : undefined);
    var layerStatesArray = this.getLayerGroup().getLayerStatesArray();
    var layerStates = {};
    for (i = 0, ii = layerStatesArray.length; i < ii; ++i) {
      layerStates[goog.getUid(layerStatesArray[i].layer)] = layerStatesArray[i];
    }
    viewState = view.getState();
    frameState = /** @type {olx.FrameState} */ ({      //1.准备frameState
      animate: false,
      attributions: {},
      coordinateToPixelMatrix: this.coordinateToPixelMatrix_,
      extent: extent,
      focus: !this.focus_ ? viewState.center : this.focus_,
      index: this.frameIndex_++,
      layerStates: layerStates,//layer的常量属性，通过共享作为全局变量
      layerStatesArray: layerStatesArray,
      logos: ol.object.assign({}, this.logos_),
      pixelRatio: this.pixelRatio_,
      pixelToCoordinateMatrix: this.pixelToCoordinateMatrix_,
      postRenderFunctions: [],
      size: size,
      skippedFeatureUids: this.skippedFeatureUids_,
      tileQueue: this.tileQueue_,
      time: time,
      usedTiles: {},
      viewState: viewState,//view的常量属性，通过共享作为全局变量
      viewHints: viewHints,
      wantedTiles: {}
    });
  }

  if (frameState) {
    var preRenderFunctions = this.preRenderFunctions_;//2.渲染前
    var n = 0, preRenderFunction;
    for (i = 0, ii = preRenderFunctions.length; i < ii; ++i) {
      preRenderFunction = preRenderFunctions[i];
      if (preRenderFunction(this, frameState)) {
        preRenderFunctions[n++] = preRenderFunction;
      }
    }
    preRenderFunctions.length = n;

    frameState.extent = ol.extent.getForViewAndSize(viewState.center,
        viewState.resolution, viewState.rotation, frameState.size, extent);
  }

  this.frameState_ = frameState;
  this.renderer_.renderFrame(frameState);                //3.渲染

  if (frameState) {
    if (frameState.animate) {
      this.render();
    }
    Array.prototype.push.apply(
        this.postRenderFunctions_, frameState.postRenderFunctions);//4.渲染后

    var idle = this.preRenderFunctions_.length === 0 &&
        !frameState.viewHints[ol.ViewHint.ANIMATING] &&
        !frameState.viewHints[ol.ViewHint.INTERACTING] &&
        !ol.extent.equals(frameState.extent, this.previousExtent_);

    if (idle) {
      this.dispatchEvent(
          new ol.MapEvent(ol.MapEventType.MOVEEND, this, frameState));
      ol.extent.clone(frameState.extent, this.previousExtent_);
    }
  }

  this.dispatchEvent(
      new ol.MapEvent(ol.MapEventType.POSTRENDER, this, frameState));

  goog.async.nextTick(this.handlePostRender, this);

};

下面讲诉的渲染的第3步 renderFrame(frameState)
有关渲染的源代码在ol/ol/render,ol/ol/renderer下。
ol/ol/render文件夹下是渲染的基本属性和方法，利用设计模式中的工厂模式，用来构造ol/ol/renderer。

1.渲染Map

ol/ol/renderer/maprenderer.js

ol.renderer.Map = function(container, map) {}

这只是个父类，具体实现类位置在：
ol/ol/renderer/canvas/canvasmaprenderer.js–ol.render.canvas.Map(默认)
ol/ol/renderer/canvas/webglmaprenderer.js–ol.render.webgl.Map
ol/ol/renderer/canvas/dommaprenderer.js–ol.render.dom.Map

主要介绍第一种ol/ol/renderer/canvas/canvasmaprenderer.js

ol.renderer.canvas.Map = function(container, map) {
    ol.renderer.Map.call(this, container, map);
    this.context_ = ol.dom.createCanvasContext2D();

      this.canvas_ = this.context_.canvas;

      this.canvas_.style.width = '100%';
      this.canvas_.style.height = '100%';
      this.canvas_.className = ol.css.CLASS_UNSELECTABLE;
      container.insertBefore(this.canvas_, container.childNodes[0] || null);
}

渲染逻辑

ol.renderer.canvas.Map.prototype.renderFrame = function(frameState) {}

2.渲染Layer

ol/ol/renderer/layerrenderer.js

ol.renderer.Layer = function(layer) {

  ol.Observable.call(this);

  this.layer_ = layer;
};

这只是个父类，具体实现类位置在：
ol/ol/renderer/canvas/canvaslayerrenderer.js–ol.render.canvas.Layer(默认)
ol/ol/renderer/canvas/webgllayerrenderer.js–ol.render.webgl.Layer
ol/ol/renderer/canvas/domlayerrenderer.js–ol.render.dom.Layer

主要介绍第一种ol.render.canvas.Layer(默认)：
这个类又分为三种类型：
- ol.render.canvas.TileLayer
- ol.render.canvas.VectorLayer
- ol.render.canvas.VectorTileLayer

ol.render.canvas.TileLayer渲染逻辑

ol.renderer.canvas.TileLayer.prototype.prepareFrame = function(
    frameState, layerState) {}    //第一步
ol.renderer.canvas.TileLayer.prototype.composeFrame = function(//第二步
    frameState, layerState, context) {
  var transform = this.getTransform(frameState, 0);
  this.dispatchPreComposeEvent(context, frameState, transform);
  this.renderTileImages(context, frameState, layerState);
  this.dispatchPostComposeEvent(context, frameState, transform);
};

ol.renderer.canvas.TileLayer.prototype.renderTileImages = function(context, frameState, layerState) {}

参考文献：
- OpenLayers 3源码解析视频
- OpenLayers 3源码那些事(上)
- OpenLayers 3源码那些事(下)